jquery-mobile,基础属性本文实例讲述了jquery-mobile基础属性与用法。分享给大家供大家参考，具体如下： 写在前面 本文是根据w3c 学习轨迹，自己研习过程中记录下的笔记，只供自己学习轨迹记录之用，不喜勿喷。 0. 引入库 引入对应的文件： <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 一、页面结构说明 页面的三要素： 页面 data-role="page" //注意这个属性必须有 且为最外层div 否则事件注册的时候 会自动注册俩次
页头 data-role="header" //页面头部标题 或菜单区
内容 data-role="content" //页面内容
页尾 data-role="footer" //页尾标题 或菜单区 <div data-role="page" id="pageone"> <div data-role="header"> <h1>在此处写入标题</h1> </div> <div data-role="content"> <p>在此处写入正文</p> </div> <div data-role="footer"> <h1>在此处写入页脚文本</h1> </div></div> 【1.页面全屏】 需要当前页面的头部和尾部留在最上和最下的时候 可以在 header 和 footer 的div 中 加上属性 data-position="fixed" data-fullscreen="true" 注意俩个必须同时加，否则将无任何效果 【2.页面标题居中】 必须在 header 或 footer的 div的下一级加上 h1 标签 其他标签无效 <div data-role="footer"> <h1>标题文字</h1></div> 二、在HTML中创建多个页面 【页面内之间切换】 默认显示第一个页面
其他页面隐藏 <div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo">转到页面二</a> </div></div><div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#pageone">转到页面一</a> </div></div> 【对话框】 如果页面中只用俩个page 默认第一个page 为主体页面
不会因为第二个标签a的data-rel 属性改变第一个页面成为对话框 当然如果有多个page，其他的也是可以更改的，但是第一个page 不会更改 <div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo" data-rel="dialog">转到对话框二</a> </div></div><div data-role="page" id="pagetwo"> <div data-role="header"> <h1>我是一个对话框！</h1> </div> <div data-role="content"> <p>对话框与普通页面不同，它显示在当前页面的顶端。它不会横跨整个页面宽度。对话框页眉中的图标 “X” 可关闭对话框。</p> <a href="#pageone">转到页面一</a> </div> <div data-role="footer"> <h1>页脚文本</h1> </div></div> 三、多个页面之间的过渡效果 在a标签中添加属性
当然可以添加滑动的反方向动作
fade 默认。淡入淡出到下一页。 flip 从后向前翻动到下一页。 flow 抛出当前页面，引入下一页。 pop 像弹出窗口那样转到下一页。 slide 从右向左滑动到下一页。 slidefade 从右向左滑动并淡入到下一页。 slideup 从下到上滑动到下一页。 slidedown 从上到下滑动到下一页。 turn 转向下一页。 none 无过渡效果。 四、按钮的使用 生成按钮的三种方式 <button>
<input type="submit/reset/button"/>
<a data-role="button"> (推荐) 【导航按钮】 【行内按钮】 默认一个按钮占据一行，如果不想占据一行可以使用内联属性 【组合按钮】 data-role="controlgroup"data-type="horizontal/vertical" <div data-role="controlgroup" data-type="horizontal"> <p>水平分组：</p> <a href="#" data-role="button">按钮 1</a> <a href="#" data-role="button">按钮 2</a> <a href="#" data-role="button">按钮 3</a></div><div data-role="controlgroup" data-type="vertical"> <p>垂直分组（默认）：</p> <a href="#" data-role="button">按钮 1</a> <a href="#" data-role="button">按钮 2</a> <a href="#" data-role="button">按钮 3</a></div> 【后退按钮】（会自动忽略 href属性） data-corners true | false
规定按钮是否有圆角。默认true
data-mini true | false
规定是否是小型按钮。默认false
data-shadow true | false
规定按钮是否有阴影。默认true 五、图标的使用 为按钮添加图标 只要加上如下属性 即可 data-icon="search" data-icon="arrow-l" 左箭头 data-icon="arrow-r" 右箭头 data-icon="delete" 删除 data-icon="info" 信息 data-icon="home" 首页 data-icon="back" 返回 data-icon="search" 搜索 data-icon="grid" 网格 图标定位 data-iconpos="top/left/right/bottom" 默认left 只要图标的话： 将上述属性设置为 notext 六、工具栏的使用 【页眉】 向文字的左右俩测各加一个按钮 <div data-role="page"> <div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a> <h1>欢迎访问我的主页</h1> <a href="#" data-role="button" data-icon="search">搜索</a> </div></div> [单个按钮居右]（默认居左） 如果只加一个按钮，不管是加在h1的前面还是后面都会默认放在左侧，如果想放在右侧，需在按钮上添加 如下属性 [注意]：页眉只可以包含一到俩个按钮，页脚无限制 【页脚】 页脚和页眉不同，他省去了一些内联样式 且不会居中
如果需要居中，则可以在footer上添加 class="ui-btn" (并且只能在footer上添加) 当然也可以选择水平或垂直的组合方式 <div data-role="footer" class="ui-btn" > <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="plus">转播到新浪微博</a> <a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a> <a href="#" data-role="button" data-icon="plus">转播到QQ空间</a> </div></div> 【页眉和页脚的定位】 [inline] 默认 页眉页脚与页面内容平行 即内容多高 页眉和页脚随内容的高度增加 [fixed] 根据滚动条的位置 分别显示 或 隐藏页眉或页脚 [fullscreen] 需要同时定义俩个属性 会同时显示隐藏 页眉或页脚 data-position="fixed"data-fullscreen="true" 七、导航栏的使用 【导航栏】 使用 navbar 定义导航栏 注意：navbar下面的a标签 可以免去
data-role="button" 自动会添加类似属性 <div data-role="header"> <h1>标题 可不要</h1> <div data-role="navbar"> <ul> <li><a href="#a">首页</a></li> <li><a href="#a">导航</a></li> <li><a href="#a">搜索</a></li> </ul> </div></div> 【选中按钮】 在不点击的情况下 激活选中 点击后激活选中（这个预先放入按钮 属性中 点击时会被激活） class="ui-state-persist" [注意]： 导航按钮可以放在 footer content header中 需要使用的时候： 必须按照 div:data-role="footer">div:data-role="navbar">ul>li>a 的层级来展示 八、可折叠的使用 【单个可折叠】 格式： <div data-role="collapsible"> <h1>标题</h1> <p>内容</p></div> 折叠默认是关闭的，需要默认打开 可添加属性 【嵌套的可折叠】 此格式 可以去掉内容 保留标题，制作无限极菜单 <div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是被展开的内容。</p> <div data-role="collapsible"> <h1>点击我 - 我是嵌套的可折叠块！</h1> <p>我是嵌套的可折叠块中被展开的内容。</p> </div></div> 【集合可折叠】 父：data-role="collapsible-set"
子：data-role="collapsible" <div data-role="collapsible-set"> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div></div> 【去掉标题圆角】 【小化按钮】 【改变图标】 九、网格布局 【四种网格布局】 网格类 列 列宽度
对应 实例
ui-grid-a 2 50% / 50% ui-block-a|b ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e 父类 行row
ui-grid-a 俩列
ui-block-a
ui-block-b 注意子类每一个新的类 ui-block-a 都会另起一行 十、列表视图 在ul或ol上增加 属性 【特定列分割】 li列表中增加分隔符 手动分割 【按字母自动分割】 ul/ol 增加属性 【圆角】 【搜索与过滤】 data-role="listview" 列表属性
data-autodividers="true" 按字母自动分组属性
data-inset="true" 圆角属性
data-filter="true" 数据过滤属性
data-filter-placeholder="搜索姓名 ..." 过滤文本框默认文字属性 <ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true" data-filter-placeholder="搜索姓名 ..."> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Albert</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Cameron</a></li> <li><a href="#">Chloe</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Diana</a></li> <li><a href="#">Gabriel</a></li> <li><a href="#">Glen</a></li> <li><a href="#">Ralph</a></li> <li><a href="#">Valarie</a></li></ul> 【只读属性】 去掉 li里的a标签 保留文字即可 【列表内容】 1. 包含缩略图的列表 <ul data-role="listview" data-inset="true"> <li> <a href="#"> <img src="/i/chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome is a free, open-source web browser. Released in 2008.</p> </a> </li> <li> <a href="#"> <img src="/i/firefox.png"> <h2>Mozilla Firefox</h2> <p>Firefox is a web browser from Mozilla. Released in 2004.</p> </a> </li></ul> 2. 列表图标 如果是16*16的 图标 加上 <li> <a href="#"> <img src="us.png" alt="USA" class="ui-li-icon"> USA </a></li> 不是 就同上。 3. 拆分按钮 <ul data-role="listview"> <li> <a href="#"><img src="chrome.png"></a> <a href="#download" data-rel="dialog">下载浏览器</a> </li></ul> 4. 计数泡沫 a标签 里的sapn加上类名 <ul data-role="listview"> <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li> <li><a href="#">Sent<span class="ui-li-count">123</span></a></li> <li><a href="#">Trash<span class="ui-li-count">7</span></a></li></ul> 5. 更改默认图标 li 里添加属性 6. 日历事件 列表>分隔列表
>列表内容 <ul data-role="listview" data-inset="true"> <li data-role="list-divider">星期三, 1 月 2 日, 2013 <span class="ui-li-count">2</span></li> <li><a href="#"> <h2>医生</h2> <p><b>To Peter Griffin</b></p> <p>Well, Mr. Griffin, I've looked into physical results.</p> <p>Ah, Mr. Griffin, I'm not quite sure how to say this. Kim Bassinger? Bass singer? Bassinger?</p> <p>But now, onto the cancer</p> <p>You are a Cancer, right? You were born in July? Now onto these test results.</p> <p class="ui-li-aside">Re: Appointment</p></a> </li> <li><a href="#"> <h2>Glen Quagmire</h2> <p>Remember me this weekend!</p> <br> <p>- giggity giggity goo</p> <p class="ui-li-aside">Re: Camping</p></a> </li></ul> 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》 希望本文所述对大家jQuery程序设计有所帮助。
jquery-mobile,基础属性
|
