位置: 编程技术 - 正文
推荐整理分享jquery-mobile基础属性与用法详解(jquery mobile),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:jquery mobile实例,jquery mobile是干什么的,jquery mobile是干什么的,jquery mobile是干什么的,jquery mobile教程,jquery mobile教程,jquery mobile ui,jquery mobile ui,内容如对您有帮助,希望把文章链接给更多的朋友!
本文实例讲述了jquery-mobile基础属性与用法。分享给大家供大家参考,具体如下:
写在前面
本文是根据w3c 学习轨迹,自己研习过程中记录下的笔记,只供自己学习轨迹记录之用,不喜勿喷。
0. 引入库
引入对应的文件:
一、页面结构说明
页面的三要素:
页面 data-role="page" //注意这个属性必须有 且为最外层div 否则事件注册的时候 会自动注册俩次页头 data-role="header" //页面头部标题 或菜单区内容 data-role="content" //页面内容页尾 data-role="footer" //页尾标题 或菜单区
【1.页面全屏】
需要当前页面的头部和尾部留在最上和最下的时候 可以在 header 和 footer 的div 中 加上属性
注意俩个必须同时加,否则将无任何效果
【2.页面标题居中】
必须在 header 或 footer的 div的下一级加上 h1 标签 其他标签无效
二、在HTML中创建多个页面
【页面内之间切换】
默认显示第一个页面其他页面隐藏
【对话框】
如果页面中只用俩个page 默认第一个page 为主体页面不会因为第二个标签a的data-rel 属性改变第一个页面成为对话框
当然如果有多个page,其他的也是可以更改的,但是第一个page 不会更改
三、多个页面之间的过渡效果
在a标签中添加属性
当然可以添加滑动的反方向动作
fade 默认。淡入淡出到下一页。
flip 从后向前翻动到下一页。
flow 抛出当前页面,引入下一页。
pop 像弹出窗口那样转到下一页。
slide 从右向左滑动到下一页。
slidefade 从右向左滑动并淡入到下一页。
slideup 从下到上滑动到下一页。
slidedown 从上到下滑动到下一页。
turn 转向下一页。
none 无过渡效果。
四、按钮的使用
生成按钮的三种方式
<button><input type="submit/reset/button"/><a data-role="button"> (推荐)
【导航按钮】
【行内按钮】
默认一个按钮占据一行,如果不想占据一行可以使用内联属性
【组合按钮】
【后退按钮】(会自动忽略 href属性)
data-corners true | false规定按钮是否有圆角。默认truedata-mini true | false规定是否是小型按钮。默认falsedata-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
六、工具栏的使用
【页眉】
向文字的左右俩测各加一个按钮
[单个按钮居右](默认居左)
如果只加一个按钮,不管是加在h1的前面还是后面都会默认放在左侧,如果想放在右侧,需在按钮上添加
如下属性
[注意]:页眉只可以包含一到俩个按钮,页脚无限制
【页脚】
页脚和页眉不同,他省去了一些内联样式 且不会居中如果需要居中,则可以在footer上添加
class="ui-btn" (并且只能在footer上添加)
当然也可以选择水平或垂直的组合方式
【页眉和页脚的定位】
[inline] 默认
页眉页脚与页面内容平行 即内容多高 页眉和页脚随内容的高度增加
[fixed]
根据滚动条的位置 分别显示 或 隐藏页眉或页脚
[fullscreen]
需要同时定义俩个属性 会同时显示隐藏 页眉或页脚
七、导航栏的使用
【导航栏】
使用 navbar 定义导航栏
注意:navbar下面的a标签 可以免去data-role="button" 自动会添加类似属性
【选中按钮】
在不点击的情况下 激活选中
点击后激活选中(这个预先放入按钮 属性中 点击时会被激活)
class="ui-state-persist"
[注意]:
导航按钮可以放在 footer content header中
需要使用的时候:
必须按照
div:data-role="footer">div:data-role="navbar">ul>li>a 的层级来展示
八、可折叠的使用
【单个可折叠】
格式:
折叠默认是关闭的,需要默认打开 可添加属性
【嵌套的可折叠】
此格式 可以去掉内容 保留标题,制作无限极菜单
【集合可折叠】
父:data-role="collapsible-set"子:data-role="collapsible"
【去掉标题圆角】
【小化按钮】
【改变图标】
九、网格布局
【四种网格布局】
网格类 列 列宽度对应 实例ui-grid-a 2 % / % ui-block-a|b
ui-grid-b 3 % / % / % ui-block-a|b|c
ui-grid-c 4 % / % / % / % ui-block-a|b|c|d
ui-grid-d 5 % / % / % / % / % ui-block-a|b|c|d|e
父类 行rowui-grid-a 俩列ui-block-aui-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="搜索姓名 ..." 过滤文本框默认文字属性
【只读属性】
去掉 li里的a标签 保留文字即可
【列表内容】
1. 包含缩略图的列表
2. 列表图标
如果是*的 图标 加上
不是 就同上。
3. 拆分按钮
4. 计数泡沫
a标签 里的sapn加上类名
5. 更改默认图标
li 里添加属性
6. 日历事件
列表>分隔列表 >列表内容
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jquery-mobile表单的创建方法详解 本文实例讲述了jquery-mobile表单的创建方法。分享给大家供大家参考,具体如下:一、注意事项1.form元素必须设置method和action属性2.每个表单元素必须设
jQuery-mobile事件监听与用法详解 本文实例讲述了jQuery-mobile事件监听与用法。分享给大家供大家参考,具体如下:触摸事件-当用户触摸屏幕时触发(敲击和滑动)滚动事件-当上下滚动
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法 jQueryCannotreadproperty‘msie'ofundefined错误的解决方法最近把一个项目的jQuery升级到最新版,发现有些页面报如下错误Cannotreadproperty'msie'ofundefined上jQuery网站
标签: jquery mobile
本文链接地址:https://www.jiuchutong.com/biancheng/377852.html 转载请保留说明!友情链接: 武汉网站建设