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----------------------------------------------------------------------------------------------