jquery-mobile 学习笔记之一(基础属性)

页面导航:首页 > 网络编程 > JavaScript > jquery-mobile 学习笔记之一(基础属性)

jquery-mobile 学习笔记之一(基础属性)

来源: 作者: 时间:2016-01-22 08:39 【

写在前面本文是根据w3c 学习轨迹,自己研习过程中记录下的笔记,只供自己学习轨迹记录之用,不喜勿喷。0 引入库引入对应的文件:一、页面结构说明页面的三要素:页面 data-role=pa

 

写在前面

本文是根据w3c 学习轨迹,自己研习过程中记录下的笔记,只供自己学习轨迹记录之用,不喜勿喷。

 

0 引入库

 

引入对应的文件:
<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 //页尾标题 或菜单区


在此处写入标题

在此处写入正文

在此处写入页脚文本


【1.页面全屏】

需要当前页面的头部和尾部留在最上和最下的时候 可以
在 header 和 footer 的div 中 加上属性


data-position=fixed data-fullscreen=true

注意俩个必须同时加,否则将无任何效果

【2.页面标题居中】

必须在 header 或 footer的 div的下一级
加上 h1 标签 其他标签无效
 

标题文字


二、在HTML中创建多个页面


【页面内之间切换】

默认显示第一个页面
其他页面隐藏


【对话框】

如果页面中只用俩个page 默认第一个page 为主体页面
不会因为第二个标签a的data-rel 属性改变第一个页面成为对话框


当然如果有多个page,其他的也是可以更改的,但是第一个page 不会更改

我是一个对话框!

对话框与普通页面不同,它显示在当前页面的顶端。它不会横跨整个页面宽度。对话框页眉中的图标 “X” 可关闭对话框。

页脚文本


三、多个页面之间的过渡效果

在a标签中添加属性 data-transition=slide
当然可以添加滑动的反方向动作 data-direction=reverse


fade 默认。淡入淡出到下一页。
flip 从后向前翻动到下一页。
flow 抛出当前页面,引入下一页。
pop 像弹出窗口那样转到下一页。
slide 从右向左滑动到下一页。
slidefade 从右向左滑动并淡入到下一页。
slideup 从下到上滑动到下一页。
slidedown 从上到下滑动到下一页。
turn 转向下一页。
none 无过渡效果。

四、按钮的使用



生成按钮的三种方式











垂直分组(默认):


【后退按钮】(会自动忽略 href属性)

data-rel=back


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
data-iconpos=notext

六、工具栏的使用



【页眉】

向文字的左右俩测各加一个按钮

欢迎访问我的主页


[单个按钮居右](默认居左)
如果只加一个按钮,不管是加在h1的前面还是后面
都会默认放在左侧,如果想放在右侧,需在按钮上添加
如下属性
class=ui-btn-right


[注意]:页眉只可以包含一到俩个按钮,页脚无限制

【页脚】



页脚和页眉不同,他省去了一些内联样式 且不会居中
如果需要居中,则可以在footer上添加
class=ui-btn (并且只能在footer上添加)


当然也可以选择水平或垂直的组合方式



【页眉和页脚的定位】



[inline] 默认
页眉页脚与页面内容平行 即内容多高 页眉和页脚随内容的高度增加
data-position=inline


[fixed]
根据滚动条的位置 分别显示 或 隐藏页眉或页脚
data-position=fixed


[fullscreen]
需要同时定义俩个属性 会同时显示隐藏 页眉或页脚
data-position=fixed
data-fullscreen=true

七、导航栏的使用



【导航栏】

使用 navbar 定义导航栏
data-role=navbar


注意:navbar下面的a标签 可以免去
data-role=button 自动会添加类似属性

 

 


标题 可不要


 

【选中按钮】

在不点击的情况下 激活选中
class=ui-btn-active


点击后激活选中(这个预先放入按钮 属性中 点击时会被激活)
class=ui-state-persist


[注意]:
导航按钮可以放在 footer content header中
需要使用的时候:
必须按照
div:data-role=footer>div:data-role=navbar>ul>li>a 的层级来展示

八、可折叠的使用


【单个可折叠】

data-role=collapsible


格式:

 

 


标题

内容

折叠默认是关闭的,需要默认打开 可添加属性
data-collapsed=false


 

【嵌套的可折叠】

此格式 可以去掉内容 保留标题,
制作无限极菜单

点击我 - 我可以折叠!

我是被展开的内容。

点击我 - 我是嵌套的可折叠块!

我是嵌套的可折叠块中被展开的内容。


【集合可折叠】

父:data-role=collapsible-set
子:data-role=collapsible

 

 


点击我 - 我可以折叠!

我是可折叠的内容。

点击我 - 我可以折叠!

我是可折叠的内容。

点击我 - 我可以折叠!

我是可折叠的内容。

点击我 - 我可以折叠!

我是可折叠的内容。


 

【去掉标题圆角】

data-inset=false


【小化按钮】

data-mini=true


【改变图标】

data-expanded-icon




九、网格布局



【四种网格布局】



网格类 列 列宽度 对应 实例
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上增加 属性
data-role=listview


【特定列分割】

li列表中增加分隔符 手动分割
data-role=list-divider


【按字母自动分割】

ul/ol 增加属性
data-autodividers=true


【圆角】

data-inset=true


【搜索与过滤】

data-role=listview 列表属性
data-autodividers=true 按字母自动分组属性
data-inset=true 圆角属性
data-filter=true 数据过滤属性
data-filter-placeholder=搜索姓名 ... 过滤文本框默认文字属性

 

 

 



 

【只读属性】

去掉 li里的a标签 保留文字即可


【列表内容】



1. 包含缩略图的列表

 

 



 

2. 列表图标

如果是16*16的 图标 加上
class=ui-li-icon

 

 



  • 不是 就同上。


     

    3. 拆分按钮

     

     

    
    

     

    4. 计数泡沫

    a标签 里的sapn加上类名
    class=ui-li-count

     

     

    
    

     

    5. 更改默认图标

    li 里添加属性
    data-icon=minus


    6. 日历事件



    列表>分隔列表
    >列表内容

     

     

    
    
    • 星期三, 1 月 2 日, 2013 2



     

     

     

     

     

     

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<