> <h2>Google Chromeh2> <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。 p> a> li> ul>
<div data-role="content"> <h2>我的邮箱h2> <ul data-role="listview" data-inset="true"> <li><a href="#">收件箱<span class="ui-li-count">25span>a>li> <li><a href="#">发件箱<span class="ui-li-count">432span>a>li> <li><a href="#">垃圾箱<span class="ui-li-count">7span>a>li> ul> div>
表单
效果图如下:
div data-role="content"> <form method="post" action="#"> <div data-role="fieldcontain"> <label for="name" class="ui-hidden-accessible">姓名:label> <input type="text" id="name" placeholder="姓名.." /> <button type="submit" data-inline="true">提交button> div> form> div>
<div data-role="content"> <form method="post" action="demoform.asp"> <div data-role="fieldcontain"> <label for="search">搜索:label> <input type="search" name="search" id="search" placeholder="搜索内容..."> div> <input type="submit" data-inline="true" value="提交"> form> div>
1 <form method="post" action="#"> 2 <div data-role="fieldcontain"> 3 <label for="name">姓名:label> 4 <input type="text" id="name" name="name" placeholder="姓名" /> 5 6 <label for="like">介绍:label> 7 <textarea id="like" placeholder="请输入介绍..........">textarea> 8 9 <label for="search">搜索:label> 10 <input type="search" name="search" id="search" /> 11 12 <legend>Choose your like:legend> 13 <select data-inline="true" name="day" id="day"> 14 <option value="" selected>请选择日期.....option> 15 <option value="mon">星期一option> 16 <option value="tue">星期二option> 17 <option value="wed">星期三option> 18 select> 19 20 <fieldset data-role="controlgroup" data-type="horizontal"> 21 <legend>Choose your gender:legend> 22 <label for="boy">boy:label> 23 <input type="radio" id="boy" name="sex" value="boy"> 24 <label for="gril">gril:label> 25 <input type="radio" checked id="gril" name="sex" value="girl"> 26 fieldset> 27 <fieldset data-role="controlgroup" data-type="horizontal"> 28 <legend>Choose your like:legend> 29 <label for="book">book:label> 30 <input type="checkbox" id="book" name="sex" value="book"> 31 <label for="sleep">sleep:label> 32 <input type="checkbox" id="sleep" name="sex" value="sleep"> 33 fieldset> 34 <label for="points">Points:label> 35 <input type="range" name="points" id="points" value="50" min="0" max="100"> 36 37 <label for="switch">开关:label> 38 <select id="switch" data-role="slider"> 39 <option value="on" selected>onoption> 40 <option value="off">offoption> 41 select> 42 div> 43 <button data-icon="search" data-inline="true" data-iconpos="right">提交button> 44 form>
导航栏和工具栏
导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部。默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button")。请使用 data-role="navbar" 属性来定义导航栏:
1 <div data-role="header"> 2 3 <div data-role="navbar"> 4 <ul> 5 <li><a href="#" data-icon="home">首页a>li> 6 <li><a href="#" data-icon="search">搜索a>li> 7 <li><a href="#" data-icon="back">返回a>li> 8 ul> 9 div> 10 div>
提示:按钮的宽度,默认地,与其内容一致。使用无序列表来均等地划分按钮:一个按钮占据 100% 的宽度,两个按钮各分享 50% 的宽度,三个按钮 33.3%,以此类推。不过,如果您在导航栏中规定了五个以上的按钮,那么它会弯折为多行
1 <div data-role="navbar"> 2 <ul> 3 <li><a href="#" data-icon="plus">更多a>li> 4 <li><a href="#" data-icon="minus">更少a>li> 5 <li><a href="#" data-icon="delete">删除a>li> 6 <li><a href="#" data-icon="check">喜爱a>li> 7 <li><a href="#" data-icon="info">信息a>li> 8 ul> 9 div>
页眉通常会包含页眉标题/LOGO 或一到两个按钮(通常是首页、选项或搜索按钮)
1 <div data-role="header"> 2 <div data-role="header"> 3 <a href="#" data-role="button">首页a> 4 <h1>欢迎来到我的主页h1> 5 6 <a href="#" data-role="button" class="ui-btn-right">搜索a> 7 div> 8 div>
提示:页眉可包含一个或两个按钮,然而页脚没有限制
页脚与页眉的样式不同(它会减去一些内边距和空白,并且按钮不会居中).如果要修正该问题,请在页脚设置类名 "ui-btn"
1 <div data-role="footer" class="ui-btn"> 2 <a href="#" data-role="button">转播到新浪微博a> 3 <a href="#" data-role="button">转播到腾讯微博a> 4 div>
1 <div data-role="header" data-position="fixed" data-fullscreen="true">div> 2 <div data-role="footer" data-position="fixed" data-fullscreen="true">div>
布局
使用固定宽度的包裹层(Wrapper), 内部的各个部分可以使用百分比或者固定的宽度来表示. 这里最重要的是, 外面的所谓包裹层(或称为容器)的宽度是固定不变的, 所以不论访问者的浏览器是什么分辨率, 他们看到的网页宽度都彼此相同.
流式布局(Fluid Layout 或 Liquid Layout), 主要使用百分比来设置各个部分的宽度, 用来适应不同的分辨率. 有时候, 对于网页中的某一部分元素(比如边界值, 侧边栏), 可以使用固定宽度, 但大部分元素是使用百分比来控制的
jQuery Mobile 提供了一套基于 CSS 的列布局方案。不过,一般不推荐在移动设备上使用列布局,这是由于移动设备的屏幕宽度所限。但是有时您需要定位更小的元素,比如按钮或导航栏,就像在表格中那样并排。这时,列布局就恰如其分。网格中的列是等宽的(总宽是 100%),无边框、背景、外边距或内边距。可使用的布局网格有四种:
提示:在列容器中,根据不同的列数,子元素可设置类 ui-block-a|b|c|d|e。这些列将依次并排浮动。
实例 1: 对于 ui-grid-a 类(两列布局),您必须规定两个子元素 ui-block-a 和 ui-block-b。
实例 2: 对于 ui-grid-b 类(三列布局),请添加三个子元素 ui-block-a、ui-block-b 和 ui-block-c
案例代码如下:
<div data-role="content"> <div class="ui-grid-b"> <div class="ui-block-a"><a href="#" data-role="button" data-icon="home">首页a>div> <div class="ui-block-b"><a href="#" data-role="button" data-icon="search">搜索a>div> <div class="ui-block-c"><a href="#" data-role="button" data-icon="back">返回a>div> <div class="ui-block-a"><a href="#" data-role="button" data-icon="home">首页a>div> <div class="ui-block-b"><a href="#" data-role="button" data-icon="search">搜索a>div> <div class="ui-block-a"><a href="#" data-role="button" data-icon="back">返回a>div> div> div>