本文档详细介绍了如何使用各种数据属性来定制UI元素的样式和行为，包括按钮、分组、图标位置等，适用于前端开发者快速掌握界面元素的个性化配置。
| 1 | data-role="button" | |
| 2 | data-rel="back" | |
| 3 | data-inline="true" | |
| 4 | data-role="controlgroup" | |
| 5 | data-type="horizontal" | 水平分组 |
| 6 | data-type="vertical" | 垂直分组 |
| 7 | data-corners="false" | 不带圆角的按钮 |
| 8 | data-mini="true" | 迷你按钮 |
| 9 | data-shadow="false" | 按钮不带阴影，默认是带阴影的 |
| 10 | data-icon="arrow-l" | 左箭头图标 |
| 11 | data-icon="arrow-r">右箭头图标</a> | |
| 12 | data-icon="arrow-u">上箭头图标</a> | |
| 13 | data-icon="arrow-d">下箭头图标</a> | |
| 14 | data-icon="plus">加号图标</a> | |
| 15 | data-icon="minus">减号图标</a> | |
| 16 | data-icon="delete">删除图标</a> | |
| 17 | data-icon="check">检查图标</a> | |
| 18 | data-icon="home">首页图标</a> | |
| 19 | data-icon="info">信息图标</a> | |
| 20 | data-icon="back">后退图标</a> | |
| 21 | data-icon="forward">向前图标</a> | |
| 22 | data-icon="refresh">刷新图标</a> | |
| 23 | data-icon="grid">网格图标</a> | |
| 24 | data-icon="gear">齿轮图标</a> | |
| 25 | data-icon="search">搜索图标</a> | |
| 26 | data-icon="star">星形图标</a> | |
| 27 | data-icon="alert">提醒图标</a> | |
| 定位图标 | ||
| 28 | data-iconpos="top">Top</a> | |
| 29 | data-iconpos="right">Right</a> | |
| 30 | data-iconpos="bottom">Bottom</a> | |
| 31 | data-iconpos="left">Left</a> | |
| 32 | data-iconpos="notext" | 只显示图标 |
| 33 | data-role="button" class="ui-btn-right" data-icon="search" | 向右添加按钮 |
| 34 | class="ui-btn" | 居中对齐按钮 |
| 35 | data-role="navbar" | 创建导航栏 |
| 36 | data-position="inline" | |
| 37 | data-position="fixed" | |
| 38 | data-fullscreen="true" | |
| 39 | class="ui-btn-active" | 为按钮添加被选中外观 |
| 40 | class="ui-btn-active ui-state-persist" | 默认选中 |
| 41 | data-iconpos="left" | 将图标定位在按钮的左边 |
| 42 | data-role="collapsible" | 可折叠 |
| 43 | data-collapsed="false" | 当页面加载时展开内容 |
| 44 | data-role="collapsible-set" | 可折叠集合 |
| 45 | data-inset="false" | >默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉圆角 |
| 46 | data-mini="true" | 使可折叠块更小 |
| 47 | data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" | 改变可折叠块的图标 |
| 48 | data-role="listview" | 可折叠列表 |
| 49 | <fieldset data-role="collapsible"> | 可折叠表单 |
| 50 | <legend>点击我 - 我可以折叠！</legend> | |
| 51 | class="ui-grid-a" | |
| 52 | class="ui-block-a" | |
| 53 | class="ui-block-b" | |
| 54 | ||
| 55 | class="ui-grid-b" | |
| 56 | class="ui-block-a" | |
| 57 | class="ui-block-b" | |
| 58 | class="ui-block-c" | |
| 59 | class="ui-grid-c" | |
| 60 | class="ui-block-a" | |
| 61 | class="ui-block-b" | |
| 62 | class="ui-block-c" | |
| 63 | class="ui-block-d" | |
| 64 | ||
| 65 | class="ui-grid-d" | |
| 66 | class="ui-block-a" | |
| 67 | class="ui-block-b" | |
| 68 | class="ui-block-c" | |
| 69 | class="ui-block-d" | |
| 70 | class="ui-block-e" | |
| 71 | ||
| 72 | data-inset="true" | 圆角 |
| 73 | data-role="list-divider" | 列表分隔符 |
| 74 | data-autodividers="true" | 自动分隔符 data-autodividers="true" 属性通过对列表项文本的首字母进行大写来创建分隔符。 |
| 75 | data-filter="true" | 创建搜索过滤器 |
| 76 | data-filter-placeholder="搜索姓名 ..." | 改变搜索框中的文本 |
| 77 | class="ui-li-icon" | 向列表中添加图标 |
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
