jquery-mobile 学习笔记之中的一个（基础属性）

2021-07-02 09:04

阅读：564

写在前面

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

0 引入库

引入相应的文件：

一、页面结构说明

页面的三要素：

页面 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 无过渡效果。

四、button的使用

生成button的三种方式

【导航button】

data-role="button"

【行内button】

默认一个button占领一行，假设不想占领一行能够使用内联属性
data-inline="true"

【组合button】

data-role="controlgroup"
data-type="horizontal/vertical"


    水平分组：
    按钮 1
    按钮 2
    按钮 3

    

    垂直分组（默认）：
    按钮 1
    按钮 2
    按钮 3

【后退button】（会自己主动忽略 href属性）

data-rel="back"

data-corners true | false 规定button是否有圆角。默认true
data-mini true | false 规定是否是小型button。默认false
data-shadow true | false 规定button是否有阴影。

默认true

五、图标的使用

为button加入图标
仅仅要加上例如以下属性就可以
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"

六、工具栏的使用

【页眉】

向文字的左右俩測各加一个button


  
    首页
    欢迎訪问我的主页
    搜索

[单个button居右]（默认居左）
假设仅仅加一个button，无论是加在h1的前面还是后面
都会默认放在左側。假设想放在右側，需在button上加入
例如以下属性
class="ui-btn-right"

[注意]：页眉仅仅能够包括一到俩个button，页脚无限制

【页脚】

页脚和页眉不同，他省去了一些内联样式且不会居中
假设须要居中。则能够在footer上加入
class="ui-btn" (而且仅仅能在footer上加入)

当然也能够选择水平或垂直的组合方式


    
      转播到新浪微博
      转播到腾讯微博
      转播到QQ空间

【页眉和页脚的定位】

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

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

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

七、导航栏的使用

【导航栏】

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

注意：navbar以下的a标签能够免去
data-role="button" 自己主动会加入类似属性


    标题 可不要
    
        
首页
	    导航
	    搜索

【选中button】

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

点击后激活选中（这个预先放入button 属性中点击时会被激活）
class="ui-state-persist"

[注意]：
导航button能够放在 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"

【小化button】

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="搜索姓名 ..." 过滤文本框默认文字属性

Adele
Agnes
Albert
Billy
Bob
Calvin
Cameron
Chloe
Christina
Diana
Gabriel
Glen
Ralph
Valarie

【仅仅读属性】

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

【列表内容】

1. 包括缩略图的列表

Google Chrome

Google Chrome is a free, open-source web browser. Released in 2008.
Mozilla Firefox

Firefox is a web browser from Mozilla. Released in 2004.

2. 列表图标

假设是16*16的图标加上
class="ui-li-icon"

USA

不是就同上。

3. 拆分button

下载浏览器

4. 计数泡沫

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

Inbox335
Sent123
Trash7

5. 更改默认图标

li 里加入属性
data-icon="minus"

6. 日历事件

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

星期三, 1 月 2 日, 2013 2
医生

To Peter Griffin

Well, Mr. Griffin, I‘ve looked into physical results.

Ah, Mr. Griffin, I‘m not quite sure how to say this. Kim Bassinger? Bass singer? Bassinger?

But now, onto the cancer

You are a Cancer, right? You were born in July? Now onto these test results.

Re: Appointment
Glen Quagmire

Remember me this weekend!

- giggity giggity goo

Re: Camping

上一篇：Hibernate详细教程

下一篇：QuartZ .Net 学习笔记一: 源码下载与查看

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：jquery-mobile 学习笔记之中的一个（基础属性）
文章链接：http://soscw.com/essay/100719.html

亲，登录后才可以留言！

jquery-mobile 学习笔记之中的一个（基础属性）

一、页面结构说明

在此处写入标题

在此处写入页脚文本

【1.页面全屏】

【2.页面标题居中】

标题文字

二、在HTML中创建多个页面

【页面内之间切换】

【对话框】

我是一个对话框！

页脚文本

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

四、button的使用

【导航button】

【行内button】

【组合button】

【后退button】（会自己主动忽略 href属性）

五、图标的使用

六、工具栏的使用

【页眉】

欢迎訪问我的主页

【页脚】

【页眉和页脚的定位】

七、导航栏的使用

【导航栏】

标题 可不要

【选中button】

八、可折叠的使用

【单个可折叠】

标题

【嵌套的可折叠】

点击我 - 我能够折叠。

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

【集合可折叠】

点击我 - 我能够折叠！

点击我 - 我能够折叠。

点击我 - 我能够折叠！

点击我 - 我能够折叠！

【去掉标题圆角】

【小化button】

【改变图标】

九、网格布局

【四种网格布局】

十、列表视图

【特定列切割】

【按字母自己主动切割】

【圆角】

【搜索与过滤】

【仅仅读属性】

【列表内容】

1. 包括缩略图的列表

Google Chrome

Mozilla Firefox

2. 列表图标

3. 拆分button

4. 计数泡沫

5. 更改默认图标

6. 日历事件

医生

Glen Quagmire

评论

热门文章

推荐文章

最新文章

置顶文章

标题可不要