首页 > 代码库 > jquery mobile入门
jquery mobile入门
进来对移动前端开始了解，虽然与原来所做的服务端开发越离越远，也没办法。想什么都做好，毕竟很难，精力有限。
坚定地往前端路线走下去，废话不多说了，因为写的博客主要是作为自己学习笔记。并不过多说明，这里只贴上代码，相信有兴趣的人可以先从w3cschool网站去学习入门，基本上与我们pc端的前端开发一致。
具体效果，把下面代码复制到html文件里面运行一下就知道了。
<!DOCTYPE html> <html> <head> <title>ButtonBar HTML5</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /> <style>.ui-bar-f{color:green;background-color:yellow;}.ui-body-f {font-weight:bold;color:purple;}</style> </head> <body> <div data-role="page" id="index"> <div data-role="header" data-position="inline" data-theme="a"> <span id="now_time">Thu Aug 07 2014 16:02:23 GMT+0800 (中国标准时间)</span> <h1>欢迎来到我的首页</h1> <a data-role="button" data-inline="true" href="#search" data-icon="search" class="ui-btn-right"><span>搜索</span></a> <div data-role="navbar"> <ul> <li><a data-role="button" href="#log" data-theme="e"><span>日志</span></a></li> <li><a data-role="button" href="#calendar" data-theme="e"><span>日历</span></a></li> <li><a data-role="button" href="#phones" data-theme="e"><span>通讯录</span></a></li> <li><a data-role="button" href="#message" data-theme="e"><span>留言板</span></a></li> </ul> </div> </div> <div data-role="content" data-theme="c"> <div data-role="fieldcontain"> <fieldset data-role="collapsible"> <legend>安排行程</legend> <div data-role="controlgroup" data-type="horizontal"> <select data-inline="true"> <option value="mon">Monday</option> <option value="tue">Tuesday</option> <option value="wed" selected>Wednesday</option> <option value="thu">Thursday</option> <option value="fri">Friday</option> <option value="sat">Saturday</option> <option value="sun">Sunday</option> </select> <select data-inline="true"> <option value="08">08:00</option> <option value="09">09:00</option> <option value="10">10:00</option> <option value="11">11:00</option> <option value="12">12:00</option> <option value="13">13:00</option> <option value="14">14:00</option> <option value="15">15:00</option> <option value="16">16:00</option> </select> </div> <div data-role="collapsible"> <h1>日程紧凑程度</h1> <input id="range" name="range" type="range" data-hightlight="true" min="0" max="100"> </div> </fieldset> </div> <div data-role="controlgroup" data-type="horizontal" style="text-align:center;"> <a data-role="button" href="#next" data-icon="arrow-r" data-iconpos="right" data-theme="b">下页</a> <a data-role="button" data-rel="dialog" href="#info" data-icon="info" data-theme="b">信息</a> </div> </div> <div data-role="footer" class="ui-btn" data-position="fixed" data-fullscreen="true" data-theme="a"> <div data-role="controlgroup" data-type="horizontal"> <a data-role="button" href="#" data-icon="plus">转载到新浪微博</a> <a data-role="button" href="#" data-icon="plus">转载到腾讯微博</a> <a data-role="button" href="#" data-icon="plus">转载到QQ空间</a> </div> </div></div><div data-role="page" id="search"> <div data-role="header"> <a data-rel="back" data-icon="back">返回</a> <h1>搜索</h1> </div> <div data-role="content" data-theme="e"> <form> <div data-role="fieldcontain"> <label class="ui-input-text" for="name">名称：</label> <input type="search" placeholder="请输入关键字" id="name" name="name" /> </br></br> <label class="ui-input-text" for="key">查找内容：</label> <input type="search" placeholder="请输入关键字" id="key" name="key" /> </br></br> <label class="ui-input-text" for="day">今天日期</label> <select name="day" id="day" data-native-menu="false" multiple="multiple"> <optgroup label="工作日"> <option value="mon">星期一</option> <option value="tue">星期二</option> <option value="wed">星期三</option> <option value="mon">星期四</option> <option value="tue">星期五</option> </optgroup> <optgroup label="周末"> <option value="wed">星期六</option> <option value="mon">星期天</option> </optgroup> </select> </br></br> <label class="ui-input-text" for="switch">全文搜索</label> <select name="switch" id="switch" data-role="slider"> <option value="yes">是</option> <option value="no">否</option> </select> </br></br> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>请选择您喜欢的颜色</legend> <label for="red">红色</label> <input type="checkbox" name="favcolor" id="red" value="red" checked /> <label for="green">绿色</label> <input type="checkbox" name="favcolor" id="green" value="green" /> <label for="blue">蓝色</label> <input type="checkbox" name="favcolor" id="blue" value="blue" /> </fieldset> </div> <input type="submit" value="搜索" data-inline="true" /> </form> </div> <div data-role="footer"> <h4>copy pale blue</h4> </div></div><div data-role="page" id="next"> <div data-role="header"> <h1>还未开发....</h1> </div> <div data-role="content"> <a data-role="button" href="#index" data-icon="arrow-l" data-iconpos="left">上一页</a> </div> <div data-role="footer"> <h4>copy pale blue</h4> </div></div><div data-role="page" id="info" data-overlay-theme="e"> <div data-role="header"> <h1>信息</h1> <a data-role="button" href="#mail" data-icon="message" class="ui-btn-right"><span>写信息</span></a> </div> <div data-role="content"> <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-content-theme="e"> <h1>小刘的留言</h1> <p>早上好！</p> </div> </div> <div data-role="footer"></div></div><div data-role="page" id="mail"> <div data-role="header"> <a data-rel="back" data-icon="back">返回</a> <h1>邮件</h1> </div> <div data-role="content"> <form> <div data-role="fieldcontain"> <label data-role="ui-input-text" for="get_man">收件人</label> <input type="email" name="get_man" id="get_man" placeholder="请填写邮件地址" required="required" /> </br></br> <label data-role="ui-input-text" for="send_msg">邮件内容</label> <textarea name="send_msg" id="send_msg"></textarea> </br></br> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>匿名发送</legend> <label for="yes">是</label> <input type="radio" name="hide_name" id="yes" value="yes" checked /> <label for="no">否</label> <input type="radio" name="hide_name" id="no" value="no" /> </fieldset> </div> <input type="submit" value="submit" data-inline="true" /> </form> </div> <div data-role="footer"></div></div><div data-role="page" id="log"> <div data-role="header"> <a data-rel="back" data-icon="back">返回</a> <h1>日志</h1> </div> <div data-role="content"> <div class="ui-grid-d"> <div class="ui-block-a"> <a data-role="button"><span>你是我的眼</span></a> </div> <div class="ui-block-b"> <a data-role="button"><span>我是你的菜</span></a> </div> <div class="ui-block-c"> <a data-role="button"><span>你是我的眼</span></a> </div> <div class="ui-block-d"> <a data-role="button"><span>我是你的菜</span></a> </div> <div class="ui-block-e"> <a data-role="button"><span>你是我的眼</span></a> </div> </div> </div> <div data-role="footer"> <h4>copy pale blue</h4> </div></div><div data-role="page" id="calendar"> <div data-role="header"> <a data-rel="back" data-icon="back">返回</a> <h1>日历</h1> </div> <div data-role="content"> <h1>我的日历</h1> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">星期一，8月4日，2014</li> <li> <a href="#"> <h2>厦门</h2> <p><b>坐汽车</b></p> <p>3个小时才能到，真累啊</p> <p class="ui-li-aside">已完成</p> </a> </li> <li data-role="list-divider">星期二，8月5日，2014</li> <li> <a href="#"> <h2>泉州</h2> <p><b>继续上班</b></p> <p>今天必须记得补假条</p> <p class="ui-li-aside">已完成</p> </a> </li> <li data-role="list-divider">星期三，8月6日，2014</li> <li> <a href="#"> <h2>北京</h2> <p><b>怒艹</b></p> <p>怎么就不能自觉点，不要那么无耻。</p> <p class="ui-li-aside">已完成</p> </a> </li> <li data-role="list-divider">星期四，8月7日，2014</li> <li> <a href="#"> <h2>累啊</h2> <p><b>中暑</b></p> <p>多喝水</p> <p class="ui-li-aside">已完成</p> </a> </li> <li data-role="list-divider">星期五，8月8日，2014</li> <li> <a href="#"> <h2>这周快过了</h2> <p><b>下周继续努力</b></p> <p>周报都没什么好写的了，叫我不要优化。</p> <p class="ui-li-aside">未完成</p> </a> </li> <li data-role="list-divider">星期六，8月9日，2014</li> <li> <a href="#"> <h2>周六</h2> <p><b>好好休息</b></p> <p>宅着干嘛好呢</p> <p class="ui-li-aside">未完成</p> </a> </li> <li data-role="list-divider">星期日，8月10日，2014</li> <li> <a href="#"> <h2>中元节</h2> <p><b>俗称的鬼节</b></p> <p>该不该回家呢</p> <p class="ui-li-aside">未完成</p> </a> </li> </ul> </div> <div data-role="footer"> <h4>copy pale blue</h4> </div></div><div data-role="page" id="phones"> <div data-role="header"> <a data-rel="back" data-icon="back">返回</a> <h1>通讯录</h1> </div> <div data-role="content"> <div data-role="collapsible"> <h1>通讯录</h1> <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="搜索姓名" data-split-theme="b"> <li data-role="list-divider">宝宝</li> <li> <a href="#"><span class="ui-li-count">50</span><span>冠宇</span></a> <a href="#"><span>dowload</span></a> </li> <li data-role="list-divider">大学同学</li> <li>阿宝</li> <li>小强</li> <li>大黄</li> <li>小B</li> </ul> </div> </div> <div data-role="footer"> <h4>copy pale blue</h4> </div></div><div data-role="page" id="message"> <div data-role="header"> <a data-rel="back" data-icon="back">返回</a> <h1>留言板</h1> </div> <div data-role="content"> <div data-role="collapsible-set" data-inset="true"> <div data-role="collapsible"> <h1>小吴</h1> <p>你真傻！</p> </div> <div data-role="collapsible"> <h1>小林</h1> <p>哈哈！</p> </div> <div data-role="collapsible"> <h1>小白</h1> <p>神神！</p> </div> </div> </div> <div data-role="footer"> <h4>copy pale blue</h4> </div></div></body><script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script><script type="text/javascript">/* $(document).on("pagebeforecreate",function(event){ alert("触发 pagebeforecreate 事件！"); }); $(document).on("pagecreate",function(event){ alert("触发 pagecreate 事件！"); }); $(document).on(‘pageinit‘, ‘#index‘, function () { alert("触发 pageinit 事件！"); var timer = window.setInterval(function () { $(‘#now_time‘).text(new Date()); }, 1000); $(‘#now_time‘).on(‘tap‘, function (e) { alert(this.innerHTML); }).on(‘taphold‘, function (e) { $(this).hide(); clearInterval(timer); }).on(‘swipe‘, function (e) { }).on(‘swipeleft‘, function (e) { timer = window.setInterval(function () { $(‘#now_time‘).text(new Date()); }, 1000); }).on(‘swiperight‘, function (e) { clearInterval(timer); }); $(document).on(‘scrollstart‘, function (e) { alert(‘开始滚动‘); }).on(‘scrollstop‘, function (e) { alert(‘停止滚动‘); }); $(window).on("orientationchange",function(event){ alert("方向是：" + event.orientation); }); $(document).on("pagebeforeshow","#message",function () { // 当进入页面二时 alert("message即将显示"); }).on("pageshow","#message",function () { // 当进入页面二时 alert("现在显示message"); }).on("pagebeforehide","#message", function () { // 当离开页面二时 alert("message即将隐藏"); }).on("pagehide","#message",function () { // 当离开页面二时 alert("现在隐藏message"); }); });*/</script> </html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。