进来对移动前端开始了解，虽然与原来所做的服务端开发越离越远，也没办法。想什么都做好，毕竟很难，精力有限。
坚定地往前端路线走下去，废话不多说了，因为写的博客主要是作为自己学习笔记。并不过多说明，这里只贴上代码，相信有兴趣的人可以先从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>
jquery mobile入门
时间： 2024-08-16 18:11:13