彩票走势图

如何自定义DevExpress ASP.NET iOS主题下的复选框

原创|使用教程|编辑:我只采一朵|2013-12-19 10:07:06.000|阅读 640 次

概述:本文讲解了如何自定义DevExpress ASP.NET iOS主题下的复选框和文本对齐。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

DevExpress ASP.NET iOS 主题可将ASP.NET控件以原生iOS进行显示,然而它毕竟还是ASP.NET控件,不是原生应用。如果你想用HTML5创建原生应用,推荐使用DevExpress的另一款工具——DevExtreme

CheckBox & iOS 开关

在iOS上,复选框是以开关的形式进行显示的,这样可以更方便用户进行触摸操作。传统的复选框和iOS的复选框图示:

DevExpress ASP.NET,CheckBox & iOS开关,复选框

自定义文本对齐

接下来就具体讲解一下如何自定义iOS主题下的复选框。

  • 设置ASPxCheckBox/ASPxCheckBoxList TextAlign属性为Right,也就是让开关移动到右边。
  • 设置Web.config -> devExpress -> themes -> styleSheetTheme属性(不是 "theme"属性)以保存markup样式设置。
  • 定义一个特别的CSS选择器以避免文本换行。

页面:

<style type="text/css">
.SwitchNoWrap label { white-space: nowrap !important; }
</style>

ASPxCheckBox:

<dx:ASPxCheckBox ID="ASPxCheckBox1" runat="server" Text="Switch Demo"
TextAlign="Right" SkinID="Switch">
</dx:ASPxCheckBox>

ASPxCheckBoxList:

<dx:ASPxCheckBoxList ID="ASPxCheckBoxList1" runat="server" CssClass="SwitchNoWrap"
TextAlign="Right" RepeatDirection="Horizontal" RepeatColumns="2">
<Items>
<dx:ListEditItem Text="Item 1" />
<dx:ListEditItem Text="Item 2" />
<dx:ListEditItem Text="Item 3" />
<dx:ListEditItem Text="Item 4" />
</Items>
</dx:ASPxCheckBoxList>

Web.config:

<configuration>
...
<devExpress>
<themes ... styleSheetTheme="iOS" theme="" />
</devExpress>
</configuration>

总结

之前有人提到,把开关的标题放在右边是不符合iOS规范的。这里特此说明一下,既然这是一个ASP.NET网站而非原生应用,所以也不必过分拘泥于Apple APP Store的规则。而DevExpress ASP.NET开发团队在制作这个iOS主题的时候,也是尽量遵循了iOS规则的。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP