bootstrap 和 jQuery mobile学习总结

一、bootstrap 组件

Bootstrap 插件部分 总结：

1、下拉菜单（dropdown）

触发源 data-toggle="dropdown"

被出发 <ul class="dropdown-menu">               (次要属性: .dropdown-toggle/.caret/.divider)
--------------------------------------------------------------------------------------------
2、模态框（modal）

触发源 data-toggle="modal" data-target="#myModal"

被触发 id="myModal" .modal.fade                  (次要属性: .close/data-dismiss="modal")
--------------------------------------------------------------------------------------------
3、弹出框 （popover）

触发源 data-toggle="popover" data-placement="bottom" data-content="详细内容"

被触发 无！                                （用法非常简单，但是弹出内容的具体样式无法设置，所以只能用于简单弹出框）
--------------------------------------------------------------------------------------------
4、轮播（carousel）

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>

        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
        </div>

        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
</div> 
----------------------------------------------------------------------------------------------
5、标签页切换（tab）

触发源 

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#menu1">菜单 1</a></li>
    <li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
    <li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
</ul>

被触发 

<div class="tab-content">

    <div id="menu1" class="tab-pane fade in active">
      <h3>菜单 1</h3>
      <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
    </div>

    <div id="menu2" class="tab-pane fade">
      <h3>菜单 2</h3>
      <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
    </div>

</div>

----------------------------------------------------------------------------------------------
6、滚动监听（scrollspy）、附加导航(affix)、提示工具（tooltip）、手风琴（accordion）、警告框（alert）等等。

二、jQuery mobile组件

一、页面主结构 （data-role="page" /header/main/footer）
data-role="page" id="pageone"
    data-role="header"
    data-role="main" class="ui-content"
    data-role="footer"
总结：data-role="page" id="pageone" 为一个完整页面，也就是说写在这个div外面的任何元素都不会显示，data-role="page" id="pagetwo"则是另外一个

页面，两者之间可通过<a href="#pageone">来跳转
----------------------------------------------------------------------------------------------
二、弹出对话框（data-dialog="true"）
data-dialog="true" 给跳转到的页面加上该属性就会变成对话框
----------------------------------------------------------------------------------------------
三、页面的过渡效果 （data-transition="slide"）
<a href="#pageone" data-transition="slide" data-direction="reverse">
只要给跳转的a链接 加上该属性就可以更改切换的风格效果data-transition="slide"/fade/flip/flow/pop/slidefade/slideup/slidedown/turn/none
----------------------------------------------------------------------------------------------
四、按钮 （data-role="button"）
三种写法：
<button>按钮</button>
<input type="button" value="按钮">
<a href="#" data-role="button">按钮</a>

小按钮    class="ui-btn ui-btn-inline"
返回按钮  data-rel="back"
圆角阴影小按钮 class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

按钮组合 
<div data-role="controlgroup" data-type="horizontal"></div>用该div包裹即可


----------------------------------------------------------------------------------------------
五、图标（ui-icon-xx）
            名称             位置       颜色（黑色   ）
class="ui-btn ui-icon-search ui-btn-icon-top"
class="ui-btn ui-icon-arrow-l ui-btn-icon-left ui-alt-icon"
class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon"
----------------------------------------------------------------------------------------------
六、popup弹出框 （data-role="popup"）
data-role="popup" 弹出框加上该属性，a链接href到该弹框的id即可
关闭按钮 <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
弹框位置 
    data-position-to="window"（居中显示）
    data-position-to="#demo" （显示在 id="demo" 元素上）
    data-position-to="origin"（显示在触发源上方）
过渡效果（同页面切换过渡效果）：data-transition="fade"/turn/...
带方向箭头的弹窗 
    触发源  <a href="#myPop1" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">左边</a>
    弹出框  <div data-role="popup" id="myPop1" class="ui-content" data-arrow="l"></div> （data-arrow="l"取值l/t/r/b）
----------------------------------------------------------------------------------------------
七、导航条（data-role="navbar"）
<div data-role="header">
    <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="home">主页</a></li>
                <li><a href="#" data-icon="arrow-r">第二页</a></li>
                <li><a href="#" data-icon="search">搜索</a></li>
            </ul>
    /div>
</div>
----------------------------------------------------------------------------------------------
八、滑动面板（data-role="panel"）
 data-role="panel" 滑动的面板加上该属性 触发的a链接href到该面板的id即可
滑动效果 data-display="overlay"（堆叠）/push（推动）/reveal（默认，“像幻灯片一样从屏幕划出”）

----------------------------------------------------------------------------------------------
九、折叠（ata-role="collapsible"）
 <div data-role="collapsible">
            <h1>点击我 - 我可以折叠！</h1>
            <p>我是可折叠的内容。</p>
 </div>
----------------------------------------------------------------------------------------------
十、表格（data-role="table"）
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
            <thead>
            <tr>
                <th data-priority="6">CustomerID</th>
                <th>CustomerName</th>
                <th data-priority="1">ContactName</th>
                <th data-priority="2">Address</th>
                <th data-priority="3">City</th>
                <th data-priority="4">PostalCode</th>
                <th data-priority="5">Country</th>
            </tr>
            </thead>
----------------------------------------------------------------------------------------------
十一、网格布局
    网格类      列   列宽 对应
    ui-grid-solo 1  100%    ui-block-a
    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

----------------------------------------------------------------------------------------------
十二、列表（ata-role="listview" ）
<ul data-role="listview" data-autodividers="true" data-inset="true">
            <li><a href="#">Adele</a></li>
            <li><a href="#">Agnes</a></li>
</ul>
----------------------------------------------------------------------------------------------
十三、表单 （data-role="flipswitch"...）
1.按钮（switch）
<label for="switch">切换开关:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">

2.搜索框
<label for="search">搜索:</label>
<input type="search" name="search" id="search">

3.提交按钮
<input type="submit" data-inline="true" value="提交">

4.单选按钮
<fieldset data-role="controlgroup">
                <legend>Choose your gender:</legend>
                <label for="male">Male</label>
                <input type="radio" name="gender" id="male" value="male">
                <label for="female">Female</label>
                <input type="radio" name="gender" id="female" value="female">
</fieldset>

5.复选框
<fieldset data-role="controlgroup">
                <legend>Choose as many favorite colors as you'd like:</legend>
                <label for="red">Red</label>
                <input type="checkbox" name="favcolor" id="red" value="red">
                <label for="green">Green</label>
                <input type="checkbox" name="favcolor" id="green" value="green">
                <label for="blue">Blue</label>
                <input type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>

6.下拉菜单（select option）
<fieldset data-role="fieldcontain">
                <label for="day">选择天</label>
                <select name="day" id="day">
                    <option value="mon">星期一</option>
                    <option value="tue">星期二</option>
                    <option value="wed">星期三</option>
                    <option value="thu">星期四</option>
                    <option value="fri">星期五</option>
                    <option value="sat">星期六</option>
                    <option value="sun">星期日</option>
                </select>
</fieldset>

7.自定义下拉加多选

 <select name="day" id="day" multiple="multiple" data-native-menu="false">
                    <option>天</option>
                    <option value="mon">星期一</option>
                    <option value="tue">星期二</option>
                    <option value="wed">星期三</option>
                    <option value="thu">星期四</option>
                    <option value="fri">星期五</option>
                    <option value="sat">星期六</option>
                    <option value="sun">星期日</option>
                </select>
 </fieldset>
----------------------------------------------------------------------------------------------
十四、自定义主题
 .ui-bar-f {
            color: red;
            background-color: yellow;
        }

        .ui-body-f {
            font-weight: bold;
            color: white;
            background-color: purple;
        }

        .ui-page-theme-f {
            font-weight: bold;
            background-color: green;
        }
jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。
----------------------------------------------------------------------------------------------
十五、事件

为了让jQuery代码脚本在DOM元素加载完成后才开始执行：

$(document).on("pagecreate","#pageone",function(){

   // jQuery 事件...

});

其他：
点击 tap
长按 taphold
滑动 swip/swipeleft/swiperight
滚动 scrollstart/scrollstop
方向改变 orientationchange


----------------------------------------------------------------------------------------------
总结： 功能组件 data-role="功能"
    样式组件 class="ui-样式"
    过渡 data-transion
    位置 data-position
----------------------------------------------------------------------------------------------