推荐屏幕配置¶
通过遵循建议的屏幕配置，您可以创建与intra-mart Accel Applications基本屏幕组件以及平台上的各种应用程序兼容的统一屏幕设计。
页¶
¶
考虑到在黑暗和明亮的地方的可见性，请考虑“ A”（ 默认 ）。
标记示例。
<div data-role = “ page” > <div data-role = “ header” 数据位置= “ fixed” > <h3>标头</ h3> </ div> <div class = “ ui-content” 角色= “ main” > <h3>内容</ h3> </ div> <div data-role = “页脚” data-position = “固定” > <h3>页脚</ h3> </ div> </ div>标记结果。调整为基于黑色的设计。
页切换¶
使用“淡入淡出”（ 默认 ），这会使终端或OS很难有所作为。对于具有动画效果的情况，取决于设备，动画可能无法有效工作。
¶元素
在页元素中放置一个过渡到HOME屏幕的过程。基本上，将其放在页脚中。
标头¶
对于普通页，请统一设置。使用<div data-role =“ header”>或<imart type =“ spHeaderWithLink”>标记。请积极使用固定位置模式（数据位置=“固定”）。
左键¶
- 根据需要排列它们。
- 应用程序和功能的顶层不需要后退按钮。
- 除上述情况外，基本上放置一个后退按钮。
- 后退按钮是图标+字符串。基本上，指定data-icon =“ arrow-l”。
页脚¶
对于普通页，请统一设置。使用下面显示的导航栏或使用<imart type =” spCommonFooter”>。请参阅实施示例以了解如何使用导航栏。
使用导航栏实现页脚（推荐） ¶
否 标签名称 职责 备注 1个 无 HOME链接 设置从账号上下文获得的主页URL 。 两个 个人的 屏幕个别功能 在每个屏幕上分别设置。 三 无 其他 有四个或更多的单个功能时放置。
页脚¶
页脚定义为标准jQueryMobile页脚。指定data-position =“ fixed”会使它成为固定的页脚。此外，请确保在页脚中指定class =“ imui-smart-footer”。在页脚中定义导航栏，并放置处理链接等。一次最多显示5个链接。确保可以从每个屏幕的页脚调用版权。
HOME¶
将其放在页脚的最左侧。设置以下属性。
- data-ajax =“ false”
- data-icon =“自定义”
- class =“ im-smart-icon-common-32-home-navbar-navbar”
- data-iconpos =“顶部”
处理¶
在每个屏幕上分别设置。如果包括HOME链接在内的链接总数超过5个，请添加其他链接。
为按钮属性指定以下内容。
- data-icon =“自定义”
- class =“图标类名称+ -navbar”
- data-iconpos =“顶部”
- 指定链接的文本。
有关可用图标，请参阅智能手机的CSS Sprite Image List 。
注解
推荐的图标图片大小为32px。
其他¶
包括HOME链接在内的链接总数超过五个时放置。按下该按钮时，其他功能将显示在弹出屏幕中。
为按钮属性指定以下内容。
- data-icon =“自定义”
- class =“ im-smart-icon-common-32-more-navbar”
- data-iconpos =“顶部”
标记¶
html
<footer data-role = “ footer” 类= “ imui-smart-footer” 数据位置= “固定” > <div data-role = “ navbar” > <ul> <li> <a href = “ home” 数据-icon = “ custom” 类= “ im-smart-icon-common-32-home-navbar” data-iconpos = “ top” data-ajax = “ false” > </a> </ li> <li> < A HREF = “index.html的”数据-图标= “定制”类= “IM-智能图标共32桌面站点导航栏”数据iconpos = “顶部”>显示在PC屏幕</一个上> </ LI> <LI> <a href= "index.html" data-icon= "custom" class= "im-smart-icon-common-32-mail-navbar" data-iconpos= "top">邮件</a> </ li> <li> <a href = “ index.html” data-icon = “ custom” 类= “ im-smart-icon-common-32-sitemap-navbar” data-iconpos = “顶部“ >站点地图</a> </ li> <li> <a href = ” index.html“ data-icon = ” custom“ class = ” im-smart-icon-common-32-more-navbar“ data-iconpos = “顶部” >更多</a> </ li> </ ul> </ div> </ footer>标记结果
纽扣¶
¶
屏幕主要用途的按钮（例如事务处理（例如注册/更新））应标有“ B”以突出显示。但是，对于删除处理，请为intra-mart Accel Platform扩展色板指定“ F”。在其他情况下，没有特殊限制，但是如果没有特殊原因，最好不要指定它以使整个屏幕具有统一感。
每个色板的标记示例
按钮¶
如果有适合按钮用途的物品，请积极使用。
表单元素¶
关于data-role =“ none” ¶
用于在浏览器中本地呈现元素的属性规范。除非有特殊原因，否则请勿使用。
放置¶
基本上，每行使用一个元素。
¶
使用<imart type =“ spFieldContain”>标记或<div class =“ ui-field-contain”>，<imart type =“ spControlGroup”>标记或<div data-role =“ controlgroup”>标记。
重点项目的突出显示¶
对于spFieldContain或spControlGroup，请指定required =“ true”。在其他情况下，请为样式类指定“ imui-smart-ui-required”。
标记示例“标题*”显示在屏幕上。
<label class = “ imui-smart-ui-required：after” >标题</ label>
客户端JavaScript¶
¶
对于特定于屏幕的行为，请将其放在<div data-role =“ page”>标记内。在jQuery Mobile中，如果使用通过Ajax进行的屏幕过渡，则仅会获取过渡目标屏幕的页元素，因此，如果像以前一样将其放置在<HEAD>标记中，则可能导致错误的操作。
关于$（document）.ready（） ¶
不建议使用。当使用通过Ajax进行的屏幕过渡时，过渡目标屏幕的就绪事件可能不会被调用。使用$（document）.on（“ pagecreate”，function（）{}）;
关于window.alert（） ¶
请使用imspAlert。
标记示例
<SCRIPT> $（文件）。在（ “pagecreate”，函数（）{ 绑定的//按钮轻敲事件 $（ “#someButton”）。在 （ “抽头”，函数（）{imspAlert（ 'AAA'， '警告'，函数（）{警报（ “OK”）;}）;}）;}）; </ SCRIPT> ... <a data-role= "button" id= "someButton">按钮</一>
关于window.confirm（） ¶
如上所述使用imspConfirm。