jquerymobile基础应用小结（一）

过渡效果：data-transition="fade"(默认)；

 

按     钮：data-role="button" 默认按钮是全屏的，若想添加用data-inline:true;

             若是一组的用data-role="controlgroup" 属性与 data-type="horizontal\vertical"（水平\垂直） 一同使用，以规定水平或垂直地组合按钮，为连续无缝隙的按钮。

             更多用于按钮的data-*属性

　　　　　　　　data-corners="true\false"   是否圆角

　　　　　　　　data-mini="true\false"       是否是小型按钮

　　　　　　　　data-shadow="true\false"  是否有阴影

 

图     标：data-icon="search"(搜索)   "arrow-l"(左箭头)   "arrow-r"(右箭头)    "delete"(删除)   "info"(信息图标样式为圆圈i)    "home"(主页)   "back"(返回)

                            "grid"(网格)   

             图标默认都在都是靠左的，若想规定图标位置用data-iconpos="top"    "right"    "bottom"    "left"  

             若是只需要显示图标则将 data-iconpos="notext"  即可     

工 具 栏：标题栏页眉(header)通常是一到两个按钮，直接书写即可，若是一个按钮且想在右侧添加，用规定类名class="ui-btn-right";

             页脚栏页脚(footer)则没有限制，它会自动减去页边距和空白且按钮不会居中，若要修正直接在页脚设置的时候书写class="ui-btn";

                     eg:<div data-role="footer" class="ui-btn"></div>      

             定位页眉页脚的方式有三种：

　　　　　　　data-position="inline"   默认。页眉页脚与内容位于行内。拖到内容的最后才看的到页脚。

　　　　　　　data-positon="fixed"    页眉页脚会固定在顶部和底部。

  　　　　　　 data-fullscreen  与fixed的作用一样，但两者一起用则可以触摸屏幕隐藏和现实页眉页脚(对于照片、图像和视频非常理想)。

 　　　　　　　　　　　　eg:<div data-role="header" data-position="fixed" data-fullscreen="true"></div>     

 

导 航 栏：data-role="navbar" 导航栏由一组排列构成，通常位于页眉或页脚内部。默认导航栏中的链接会自动跳转为按钮，无需设置按钮。

             按钮宽度默认与其内容一致，会自动均等划分宽度，一个100%，两个50%，以此类推；

             若是想显示点击后按下的外观用 class="ui-btn-active"

 　　　 　若是多个页面，则需要每个按钮设置按下的外观。用来表示用户当前浏览的页面，则向链接添加class="ui-btn-active ui-state-persist"设置第一个就好;

　　　　       eg:<a href="#" class="ui-btn-active ui-state-persist">首页</a>

             注：导航栏最好不要超过5个。

折叠内容：data-role="collapsibles"(可折叠) 允许隐藏或显示内容，对于储存部分信息很有用。

              创建可折叠内容块，向某容器分配data-role="collapsibles"属性。在容器(div)中，添加标题元素(h1-h6),后面则是需要隐藏显示的任意内容;

              默认该内容是隐藏的，若是需要加载时展示内容用data-collapsed="false",

              折叠是可以嵌套的，直接书写内容块会全部展开；

              若用data-role="collapsibles-set"折叠集合(常被称为手风琴)，即新建一个折叠组，当新的折叠快被打开时，其他所有的会关闭；

　　　　   更多data-*属性：           

　　　　　　　　data-inset="false"去掉圆角；

　　　　　　　　data-mini="true"  变小；

　　　　　　　　data-collapsibles-icon="arrow-d"　　data-collapsibles="arrow-u" 改变图标,原图标默认是“+”“—”；

　　　　　　　　　    eg:　　<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
      　　　　　　　　　　　　　　 <h1>data-collapsed-icon 规定按钮的图标。</h1>
      　　　　　　　　　　　　　　 <p>data-expanded-icon 规定内容被展开时按钮的图标。</p>
  　　　　　　　　　　　　    </div>

 

布局网格：这款网格是一套基于css的列布局方案，不推荐在移动设备使用，因为屏幕的宽度有限。

              但有时需要定位更小的元素，eg:按钮，导航栏，就像表格中那样排列，这时就好用了；

　　　　   网格中的列是等宽的(总宽为100%)，无边框，背景，内外边距。

              四种网格布局：

                       网格类               列               列宽度           对应子元素

                     ui-grid-a             2                 50%          ui-block-a\b

                     ui-grid-b             3                 33%          ui-block-a\b\c

                     ui-grid-c             4                 25%          ui-block-a\b\c\d

                     ui-grid-d             5                 20%          ui-block-a\b\c\d\e

　　　　　在列容器中，子元素为依次并排浮动。

              定制网格：可以在css中定制；eg:  .ui-grid-a{background:red; text-align:center; ……};

                            可以在行内定制；

              多行：即ui-block-a总是创建新的一行；

 

面    板：data-role="panel"创建面板。在div中添加html标记来显示面板内容；

    　　  注：panel标记必须置于头部、内容、底部组成的页面之前或之后。

                 要访问面板，需要创建一个指向面板的id链接，点击即可打开面板；

                 eg:<div data-role="page" id="pageone">

　　　　　　　　　　    　　<div data-role="header">
       　　　　　　　　　　　　　　 <h1>头部</h1>
    　　　　　　　　　　</div>
   　　　　　　　　 　　<div data-role="content">
        　　　　　　　　　　　　<a href="#mypanel">打开我的面板</a>
   　　　　　　　　　　 </div>
    　　　　　　　　　　<div data-role="footer">
       　　　　　　　　　　　　 <h1>页脚</h1>
    　　　　　　　　　　</div>
       　　　　　　　　　 <div data-role="panel" id="mypanel">(新的内容块)
            　　　　　　　　　　<h1>我的面板</h1>
            　　　　　　　　　　<p>面板内容</p>
        　　　　　　　　　　</div>
    　　　　　　</div>

　　　　　　面板展示：data-display="overlay"  在内容上显示面板

　　　　　　　　　　　data-display="push"      同时推动面板和页面

                               data-display="reveal"    默认，将页面像幻灯片一样从屏幕画出来显示面板

                                   eg:<div data-role="panel"  id="mypanel"  data-display="overlay">面板</div>

                 面板默认展示在左侧，可以用data-position="right" 让其到右边；

                

表    格：响应式表格有两种类型：reflow（回流）与列切换；

　　　　reflow（回流）：屏幕尺寸够大时水平显示，足够小时垂直显示；

　　　　　　　　　　　　创建表格，在<table>元素添加 data-role="table" 和class="ui-reponsive"

　　　　　　　　　　　　对于响应式表格，必须包含<thead>和<tbody>元素，不能使用rowspan和colspan，响应式表格不支持这两个属性。

           列    切    换   ：会在宽度不够时隐藏数据；

　　　　　　　　　　　　创建表格，在<table>元素添加 data-role="table"和data-mode="columtoggle" class="ui-reponsive"

　　　　　　　　　　　　jquerymobile会最先隐藏右边的列，可在th中添加指（1-6）（最高优先级-最低优先级），如没设置则列会一直存在不会隐藏。　

　　　　　　　　　　　　　　eg:

　　　　　　　　　　　　　　<table data-role="table" data-mode="columtoggle" class="ui-reponsive" >

　　　　　　　　　　　　　　　　<thead>　　　　　　　　　　　

　　　　　　　　　　　　　　　　<th>I will never be hidden</th>

　　　　　　　　　　　　　　　　　　<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th>

　　　　　　　　　　　　　　　　　　<th data-priority="3">我是重要的列 - 我可能被隐藏</th>

　　　　　　　　　　　　　　　　　　<th data-priority="5"我是不怎么重要的列 - 我最先被隐藏</th> 

　　　　　　　　　　　　　　　　</thead>

　　　　　　　　　　　　　　</table>　

　　　　　　　　　　　　运用data-column-btn-text="隐藏显示"  属性来修改表格的文本。