mobile按钮样式及输入框及网格
1.mobile按钮有三种写法及html5也有三种写法:
a) <a href="#" data-role="button">按钮</a> b) <a href="#" class="ui-btn">按钮</a> c) <button>按钮</button>
d) <input type="button" value="按钮"> f) <input type="reset" value="重置"> g) <input type="submit" value="提交">
<a href="#" data-role="button">按钮2</a> <a href="#" class="ui-btn">按钮3</a> <button>按钮4</button> <input type="button" value="按钮5"> <input type="reset" value="按钮6"> <input type="submit" value="按钮7">
2.按钮事件初始化：
$(document).on("pagecreate",function(){});
$(document).bind("pagecreate",function(){});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile-网页基本结构</title>
<script type="text/javascript" src="../js/jquery-2.2.3.min.js" ></script>
<script type="text/javascript" src="../js/jquery.mobile-1.4.5.js" ></script>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.css" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script>
$(document).on("pagecreate",function(){
$("#button_bold").click(function(){
$("#demoFiled").css("font-weight","700");
});
$("#button_normal").click(function(){
$("#demoField").css("font-weight","normal");
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>按钮处理演示</h1>
</div>
<div class="ui-content" role="main">
<a href="#" data-role="button" id="button_bold">粗体字</a>
<a href="#" data-role="button" id="button_normal">复原</a>
<div id="demoField">测试</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h6>页尾</h6>
</div>
</div>
</body>
</html>
3.按钮基本样式
| 属性 | CSS类 | 描述 |
| data-inline | ui-btn-inline | 当属性值为true时，按钮的宽度随着按钮上文字或者图标内容而改变 |
| data-mini | ui-mini | 迷你(紧凑)型按钮 |
| data-shadow | ui-shadow | 属性值为true时，按钮呈现出阴影效果 |
| data-theme | 主题样式(a~z) | |
| data-corners | ui-corner-all | 属性值为true时，按钮的4个角为圆角，否则为直角 |
| ui-state-disabled | 使<a>按钮失效 | |
| disabled | 使<button>按钮失效 | |
| data-role | 取消jquery mobile对按钮的样式改变，保留原始样式 |
按钮图标data-icon及按钮位置data-iconpos: left|top|right|bottom|notext对应的CSS类 ui-btn-icon-left|ui-btn-icon-top|ui-btn-icon-right|ui-btn-icon-bottom|ui-btn-icon-notext(无文字图标)
默认图标是白色使用ui-alt-icon替换成黑色，去除圆形背景ui-nodisc-icon <a href="#" class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-top ui-nodisc-icon">主页</a>
<div data-role="page"> <div data-role="header" data-position="fixed" data-tap-toggle="false"> <a href="#page2">第二页</a> <h1>按钮样式</h1> </div> <div class="ui-content" role="main"> <button disabled>失效状态</button><br> <a href="#" class="ui-btn ui-state-disabled">失效状态</a><br> <a href="#" data-role="button" data-mini="true" data-inline="true">inline</a><br> <a href="#" data-role="button" data-shadow="false">无阴影</a><br> <a href="#" data-role="button" data-corners="false">直角边框</a> </div> <div data-role="footer" data-position="fixed" data-tap-toggle="false"> <h6>页尾</h6> </div> </div> <div data-role="page" data-theme="b" id="page2"> <div data-role="header"> <h1>按钮与图标</h1> </div> <div class="ui-content" role="main"> <a href="#" data-role="button" data-icon="home" data-theme="b">图标按钮</a> <a href="#" data-role="button" data-icon="home" data-theme="b" data-iconpos="right">右</a> <a href="#" data-role="button" data-icon="home" data-theme="b" data-iconpos="top">上</a> <a href="#" data-role="button" data-icon="home" data-theme="b" data-iconpos="left">左</a> <a href="#" data-role="button" data-icon="home" data-theme="b" data-iconpos="bottom">下</a> <a href="#" data-role="button" data-icon="home" data-theme="b" data-iconpos="notext">无文字</a> <a href="#" data-role="button" data-icon="home" data-theme="b" data-iconpos="notext" data-corners="false">无文字</a> </div> </div>
4.单选及复选框按钮排列样式：相同先框用容器<fireldset data-role="controlgroup"> data-type="horizontal"按钮组水平排列；
<label for>中的for属性值对应的input类型的id名称
div data-role="page"> <div data-role="header"> <h1>单选按钮</h1> </div> <div class="ui-content" role="main"> <form> <fieldset data-role="controlgroup" data-mini="true" data-iconpos="right"> <legend>水果</legend> <label for="fruit1">苹果</label> <input type="radio" name="fruit" id="fruit1" value="苹果"/> <label for="fruit2">香蕉</label> <input type="radio" name="fruit" id="fruit2" value="香蕉"/> <label for="fruit3">葡萄</label> <input type="radio" name="fruit" id="fruit3" value="葡萄"/> <label for="fruit4">西瓜</label> <input type="radio" name="fruit" id="fruit4" value="西瓜"/> </fieldset> <fieldset data-role="controlgroup" data-type="horizontal"> <label for="fruit5">苹果</label> <input type="checkbox" name="fruit0" id="fruit5" value="苹果"/> <label for="fruit6">香蕉</label> <input type="checkbox" name="fruit0" id="fruit6" value="香蕉"/> <label for="fruit7">葡萄</label> <input type="checkbox" name="fruit0" id="fruit7" value="葡萄"/> <label for="fruit8">西瓜</label> <input type="checkbox" name="fruit0" id="fruit8" value="西瓜"/> </fieldset> </form> </div> </div>
5.文本输入框input类别：text/search/date/time/email/color
search前面带搜索图标,date有下拉选择不同的浏览器显示会不一样，time会以时间格式，color会弹出颜色对话框选择
class="ui-field-contain"会把文本与输入框显示一行，但对手机屏幕无效，大屏幕有效。
data-clear-btn="true" 输入框右边会显示一个X的清除内容按钮
<div data-role="page"> <div data-role="header"> <h1>文本输入</h1> </div> <div class="ui-content" role="main"> <form> <label for="mysearch">查询</label> <input type="search" name="mysearch" id="mysearch" placeholder="查询条件..." data-clear-btn="true" /> <label for="mytext">文本</label> <input type="text" name="mytext" id="mytext" placeholder="请输入文本内容"/> <label for="mydate">日期</label> <input type="date" name="mydate" id="mydate" /> <label for="mytime">时间</label> <input type="time" name="mytime" id="mytime" /> <div class="ui-field-contain"> <label for="myemail">电子邮件</label> <input type="email" name="myemail" text="mytext" data-clear-btn="true"/> </div> <div class="ui-field-contain"> <label for="mycolor">颜色</label> <input type="color" name="mycolor" id="mycolor"/> </div> </form> </div> </div>
6.网格：最多拥有5列，当一个风格只有一列是ui-grid-solo, 当一个风格拥有2列到5列时，分别用字母a-d来代表，附加到CSS类名前缀ui-grid
网格中的每一个单元格通过CSS类名前缀“ui-block-”表示所处的位置。处于一行中第一个位置的单元格使用位置序号a, 第二个b,以此类推c,d,e
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile-网页基本结构</title>
<script type="text/javascript" src="../js/jquery-2.2.3.min.js" ></script>
<script type="text/javascript" src="../js/jquery.mobile-1.4.5.js" ></script>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.css" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
div[class^="ui-block-"]>div{
height: 40px;
background-color: #ccffff;
border-style:dotted;
border-width: 1px;
text-align: center;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>网络</h1>
</div>
<div class="ui-content" role="main">
<div class="ui-grid-b">
<div class="ui-block-a">
<div>第一列</div>
</div>
<div class="ui-block-b">
<div>第一列</div>
</div>
<div class="ui-block-c">
<div>第一列</div>
</div>
<div class="ui-block-a">
<div>第一列</div>
</div>
<div class="ui-block-b">
<div>第一列</div>
</div>
<div class="ui-block-c">
<div>第一列</div>
</div>
<div class="ui-block-a">
<div>第一列</div>
</div>
<div class="ui-block-b">
<div>第一列</div>
</div>
<div class="ui-block-c">
<div>第一列</div>
</div>
</div>
<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="phone">联系</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-icon="search">查询</a>
</div>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号