jQuery Mobile基本UI组件

基本页面构造

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

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

</head>

<body>

<div data-role="page">

  <div data-role="header">

    <h1>header</h1>

  </div>

  <div data-role="content">

    <p>content</p>

  </div>

  <div data-role="footer">

  <h1>footer</h1>

  </div>

</div> 

</body>

</html>

多页面

将页面作为对话框：data-rel="dialog" -line31

设置过渡效果：data-transition -line17

 <!DOCTYPE html>

 <html>

 <head>

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

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

 </head>

 <body>

 <div data-role="page" id="page1">

   <div data-role="header">

     <h1>header</h1>

   </div>

   <div data-role="content">

     <!-- 转到外部页面使用href="xxx.html" -->

     <a href="#page2" data-transition="slide">转到页面二</a>

   </div>

   <div data-role="footer">

   <h1>footer</h1>

   </div>

 </div> 

 <div data-role="page" id="page2">

   <div data-role="header">

     <h1>header</h1>

   </div>

   <div data-role="content">

     <a href="#dialog1" data-rel="dialog">弹出对话框</a>

   </div>

   <div data-role="footer">

   <h1>footer</h1>

   </div>

 </div> 

 <div data-role="page" id="dialog1">

   <div data-role="header">

     <h1>header</h1>

   </div>

   <div data-role="content">

     <a href="#page1">转到页面一</a>

   </div>

   <div data-role="footer">

   <h1>footer</h1>

   </div>

 </div> 

 </body>

 </html>

按钮

创建按钮（使用a标签构建按钮的时候又用到了data-role）

<button>button</button>

<input type="button" value="button" />

<a href="#" data-role="button">button</a>

行内按钮，可以让按钮自适应内容而不会整屏显示。

<a href="#" data-role="button" data-inline="true">button</a>

按钮组合框，可以把一些具有相关功能的按钮组合到一起。个人感觉太僵硬了，主要是不好调整，没什么太大用处。

<div data-role="controlgroup" data-type="horizontal">

    <a href="#" data-role="button">button1</a>

    <a href="#" data-role="button">button2</a>

    <a href="#" data-role="button">button3</a>

</div>

后退按钮，用data-rel实现。我们前面使用data-rel实现过将页面作为弹出对话框。

<a href="#" data-role="button" data-rel="back">后退</a>

其他控制按钮本身样式的属性，conrners/mini/shadow。

<!-- 默认按钮 -->

<a href="#" data-role="button" data-inline="true">button</a>

<!-- 直角按钮 -->

<a href="#" data-role="button" data-inline="true" data-corners="false">button</a>

<!-- 小型按钮 -->

<a href="#" data-role="button" data-inline="true" data-mini="true">button</a>

<!-- 无阴影按钮 -->

<a href="#" data-role="button" data-inline="true" data-shadow="false">button</a>

jQuery Mobile的预置按钮图标，data-icon。

<a href="#" data-role="button" data-inline="true" data-icon="search">button</a>

<a href="#" data-role="button" data-inline="true" data-icon="arrow-l">button</a>

<a href="#" data-role="button" data-inline="true" data-icon="arrow-r">button</a>

<a href="#" data-role="button" data-inline="true" data-icon="delete">button</a>

<a href="#" data-role="button" data-inline="true" data-icon="info">button</a>

<a href="#" data-role="button" data-inline="true" data-icon="home">button</a>

<a href="#" data-role="button" data-inline="true" data-icon="back">button</a>

<a href="#" data-role="button" data-inline="true" data-icon="grid">button</a>

预置的东西只是预置的，如何自定义使用data-icon，甚至怎样去封装一个icon到一个标签里才是真正值得深思的，否则永远只能跟着别人的屁股走，没意思。

图标定位，data-iconpos。

<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="top">button</a>

<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="bottom">button</a>

<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="left">button</a>

<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="right">button</a>

<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="notext">button</a>

好像混进了什么奇怪的东西，notext什么鬼？

工具栏

标题栏/页眉/header，还记得怎么写吗？

<div data-role="header">

　　<h1>header</h1>

</div>

header内允许添加最多两个按钮，比如说两个按钮

<div data-role="header">

  <a href="#" data-role="button">Home</a>

  <h1>Welcome</h1>

  <a href="#" data-role="button">Search</a>

</div>

比如说一个按钮在左边

<div data-role="header">

  <a href="#" data-role="button">Home</a>

  <h1>Welcome</h1>

</div>

比如说一个按钮在右边

<div data-role="header">

  <h1>欢迎来到我的主页</h1>

  <a href="#" data-role="button" class="ui-btn-right">搜索</a>

</div>

在JM的css文件中搜一把就能看到ui-btn-right是什么鬼。

.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; }

页脚/footer

页脚添加的按钮个数是没有限制的

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

    <a href="#" data-role="button">button</a>

    <a href="#" data-role="button">button</a>

    <a href="#" data-role="button">button</a>

</div>

至于这个ui-btn，我们审查一下就知道了。主要是为了去掉边距并且将内容居中显示。

.ui-btn {

    display: block;

    text-align: center;

    cursor: pointer;

    position: relative;

    margin: .5em 0;

    padding:;

}

定位页眉和页脚，data-position

你可以让页眉页脚分别显示在页面的两端，滑到页面的顶点才可以看到页眉页脚

<div data-role="header" data-position="inline"></div>

<div data-role="footer" data-position="inline"></div>

也可以让页眉页脚定位在你可视范围内的上下两端，无论你浏览到页面的哪个位置，页眉页脚总是出现在页面的两端

<div data-role="header" data-position="fixed"></div>

<div data-role="footer" data-position="fixed"></div>

再设置一下data-fullscreen，开启全屏看片模式，让你撸出血

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

<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

导航栏/navbar

可以写在页眉中，也可以写在页脚中，不过我特么就没怎么看过谁会把导航栏写在页脚。

<div data-role="header">

    <h1>header</h1>

    <div data-role="navbar">

        <ul>

            <li><a href="#" class="ui-btn-active ui-state-persist">你是狗</a></li>

            <li><a href="#">你是狗</a></li>

            <li><a href="#">你是狗</a></li>

        </ul>

    </div>

</div>

ui-btn-active代码如下

.ui-btn-active {

    border: 1px solid #2373a5;

    background: #5393c5;

    font-weight:;

    color: #fff;

    cursor: pointer;

    text-shadow: 0 1px 0 #3373a5;

    text-decoration: none;

    background-image: -webkit-gradient(linear,left top,left bottom,from(#5393c5),to(#6facd5));

    background-image: -webkit-linear-gradient(#5393c5,#6facd5);

    background-image: -moz-linear-gradient(#5393c5,#6facd5);

    background-image: -ms-linear-gradient(#5393c5,#6facd5);

    background-image: -o-linear-gradient(#5393c5,#6facd5);

    background-image: linear-gradient(#5393c5,#6facd5);

    font-family: Helvetica,Arial,sans-serif;

}

而ui-state-persist则是在JS中作用

// Buttons in the navbar with ui-state-persist class should regain their active state before page show

$navbar.closest( ".ui-page" ).bind( "pagebeforeshow", function() {

    $navbtns.filter( ".ui-state-persist" ).addClass( $.mobile.activeBtnClass );

});

最后说一点，navbar中的a标签会自动转换成button，下文中提到的list也是如此。

可折叠的内容块Collapsible

内容块默认是折叠的

<div data-role="collapsible">

    <h1>show</h1>

    <p>content</p>

</div>

也可以改成展开的

<div data-role="collapsible" data-collapsed="false">

    <h1>show</h1>

    <p>content</p>

</div>

可以嵌套

<div data-role="collapsible">

    <h1>show1</h1>

    <p>content1</p>

    <div data-role="collapsible">

        <h1>show2</h1>

        <p>content2</p>

    </div>

</div>

还可以写成组合模式（组合模式下仅能打开一个内容块）

<div data-role="collapsible-set">

    <div data-role="collapsible">

        <h1>show1</h1>

        <p>content1</p>

    </div>

    <div data-role="collapsible">

        <h1>show2</h1>

        <p>content2</p>

    </div>

</div>

列表

列表视图/listview

<ul data-role="listview" data-inset="true">

  <li><a href="#">item1</a></li>

  <li><a href="#">item2</a></li>

  <li><a href="#">item3</a></li>

</ul>

有时候你的列表需要分隔符，于是

<ul data-role="listview" data-inset="true">

    <li data-role="list-divider">seprator</li>

    <li><a href="#">item1</a></li>

    <li><a href="#">item2</a></li>

    <li data-role="list-divider">seprator</li>

    <li><a href="#">item3</a></li>

    <li><a href="#">item4</a></li>

    <li data-role="list-divider">seprator</li>

    <li><a href="#">item5</a></li>

    <li><a href="#">item6</a></li>

</ul>

有时候要像通讯录那样创建首字母大写的分隔符

<ul data-role="listview" data-inset="true" data-autodividers="true">

    <li><a href="#">A</a></li>

    <li><a href="#">G</a></li>

    <li><a href="#">E</a></li>

    <li><a href="#">Z</a></li>

    <li><a href="#">W</a></li>

    <li><a href="#">D</a></li>

</ul>

再来个搜索框，修改一下placeholder，更像我们平时用的手机应用了

<ul data-role="listview" data-inset="true" data-autodividers="true" data-filter="true" data-filter-placeholder="Search...">

    <li><a href="#">A</a></li>

    <li><a href="#">G</a></li>

    <li><a href="#">E</a></li>

    <li><a href="#">Z</a></li>

    <li><a href="#">W</a></li>

    <li><a href="#">D</a></li>

</ul>

加个计数泡沫，就像我们平时看到的邮箱页面那样

<ul data-role="listview" data-inset="true">

    <li><a href="#">已发送<span class="ui-li-count">100</span></a></li>

    <li><a href="#">收件箱<span class="ui-li-count">100</span></a></li>

    <li><a href="#">垃圾箱<span class="ui-li-count">100</span></a></li>

</ul>

表单

表单必须要设置method和action

<form method="post" action="test.php">

</form>

表单内的元素必须要有唯一id，还要有一个label来匹配，注意label的for和input的id是对应的，不要搞成name了，特此区分开。

<form method="post" action="test.php">

    <label for="testName">Name</label>

    <input type="text" name="userName" id="testName" />

</form>

加上ui-hidden-accessible类可以隐藏label

<label for="testName" class="ui-hidden-accessible">Name</label>

域容器/fieldcontain，处理表单在宽屏上的显示，没什么卵用，不过我还是记一下，万一见鬼了呢！

<form method="post" action="test.php">

    <div data-role="fieldcontain">

        <label for="testName">Name</label>

        <input type="text" name="userName" id="testName" />

        <label for="testSex">Sex</label>

        <input type="text" name="userSex" id="testSex" />

    </div>

    <input type="submit" data-inline="true" value="submit" />

</form>

接下来是各种表单组件，主要分为输入/选择/滑块三种组件类型。

单行文本输入之text

<label for="testName">Name</label>

<input type="text" name="userName" id="testName" />

单行文本输入之date

<label for="testDate">Name</label>

<input type="date" name="userDate" id="testDate" />

单行文本输入之email

<label for="testMail">Name</label>

<input type="email" name="userMail" id="testMail" />

多行文本/textarea

<label for="testContent">Name</label>

<textarea name="userContent" id="testContent" />

搜索框/search

<label for="mySearch">Search</label>

<input type="email" name="searchText" id="mySearch" />

单选/radio

首先你可以有一个包装的容器

<fieldset data-role="controlgroup">

</fieldset>

然后这个容器还可以有个标题

<fieldset data-role="controlgroup">

  <legend>title</legend>

</fieldset>

最后把选项放进去,发现label是显示在input上的，不要把value理解成label，单选框的name值是一样的，不要搞混了。

<fieldset data-role="controlgroup">

    <legend>Gender</legend>

    <label for="male">男性</label>

    <input type="radio" name="gender" id="male" value="male">

    <label for="female">女性</label>

    <input type="radio" name="gender" id="female" value="female">

</fieldset>

复选/checkbox 同理

<fieldset data-role="controlgroup">

    <legend>Color</legend>

    <label for="myRed">红色</label>

    <input type="checkbox" name="color" id="myRed" value="reded">

    <label for="myYellow">黄色</label>

    <input type="checkbox" name="color" id="myYellow" value="yellow">

    <label for="myBlue">蓝色</label>

    <input type="checkbox" name="color" id="myBlue" value="blue">

    <label for="myGreen">绿色</label>

    <input type="checkbox" name="color" id="myGreen" value="green">

</fieldset>

下拉选择之select&option

<label for="day">日期</label>

<select name="myDay" 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>

也可以像listview那样插入分隔符

<label for="day">日期</label>

<select name="myDay" id="day">

    <optgroup id="weekdays">

        <option value="mon">星期一</option>

        <option value="tue">星期二</option>

        <option value="wed">星期三</option>

        <option value="thu">星期四</option>

        <option value="fri">星期五</option>

    </otpgroup>

    <otpgroup id="weekends">

        <option value="sat">星期六</option>

        <option value="sun">星期日</option>

    </otpgroup>

</select>

滑块之range

<label for="myVolume">Volume</label>

<input type="range" name="volume" id="myVolume" value="50" min="0" max="100" data-highlight="true">

滑块之slider

<select data-role="slider">

   <option value="on" selected>On</option>

   <option value="off">Off</option>

</select>

框架的组件是学不完的，学会如何封装组件的功能和样式才是最关键的，只有这样才能开发出属于自己，能让自己心仪/满意/得心应手/真正想要的组件。