與Jquery Mobile的第一次親密接觸

時間 2019-12-02

標籤 jquery mobile 第一次親密接觸欄目 JQuery 简体版

原文原文鏈接

Jquery Mobile聞名已久，今天終於有親密接觸的機會。javascript

經過動手寫的demo，對它有了一個基本的認識：css

自帶的UI組件用起來簡潔，方便；對舊版本的瀏覽器或移動設備能作到很好的優雅降級，而不影響頁面性能；html

基於AJAX的數據處理給人很好的用戶體驗:快速，高效，交互友好；java

頁面切換效果麼麼噠;jquery

data-*屬性的運用也十分便捷，易用，且功能強大。web

Demo：瀏覽器

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
	<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.theme.css">

	<style type="text/css">
   
    [data-role="footer"],[data-role="header"]{
    	text-align: center;
    }
     

	</style>
    }
</head>
<body>

<div data-role="page">
<!--data-role="page" 告訴jquery mobile要把這個內容處理爲一個完整的頁面-->

<!--header-->
<div data-role="header" data-theme="b" data-position="fixed">

<!--返回按鈕，data-theme="b" 加強顯示效果-->
<a href="#" data-rel="back" data-icon="back" data-role="button" >Back</a>
<h1>Jquery Mobile</h1>
<!--添加按鈕-->
<a href="#"  data-icon="plus" data-role="button" data-theme="b" class="ui-btn-right" >Back</a>
</div>

<!--content-->

<div data-role="content">
	
    <ul data-role="listview" data-inset="true" data-filter="true">
 
    <!--
     data-filter="true":爲列表增長過濾器；
     data-role="listview"告訴jquery mobile把它處理爲一個列表視圖
    -->

    <li data-role="list-divider"><h3>web skills</h3></li>

	<li><a href="#">
	<img src="http://pic1.zhimg.com/bdc11fd74_l.jpg" alt="bdc11fd74_l">
	<!--只要添加圖片，jquery mobile自身效果會幫你作其他的事情-->
	<h3>jquery</h3></a>
	</li>

	<li><a href="#"><img src="http://pic1.zhimg.com/bdc11fd74_l.jpg" alt="bdc11fd74_l">
	<h3>css</h3></a>
	</li>

	<li><a href="#"><img src="http://pic1.zhimg.com/bdc11fd74_l.jpg" alt="bdc11fd74_l">
	<h3>html</h3></a>
	</li>

	<li><a href="#"><img src="http://pic1.zhimg.com/bdc11fd74_l.jpg" alt="bdc11fd74_l">
	<h3>javascript</h3></a>
	</li>


	 <li data-role="list-divider"><h3>coder</h3></li>
	<li>
	<a href="#"><img src="http://pic1.zhimg.com/bdc11fd74_l.jpg" alt="bdc11fd74_l">
	<h3>kevin zhang</h3></a>
	</li>
	</ul>

</div>

<!--構建HTML5表單-->

<div data-role="content">
	<form id="tartanator_form">
		<ul data-role="listview" id="tartanator_form_list" data-inset="true">
		<li data-role="list-divider">Tell us your color</li>
		<li data-role="fieldcontain">
		<!--
        data-role="fieldcontain":加強表單時要把這個元素包含的域及其標籤組合起來，此處包含label
		-->
			<label for="userName">name</label>
			<input type="text" name="name" id="userName" placeholder="name"/>
		</li>
		<li data-role="fieldcontain">
		<label for="userInfo">userInfo</label>
		<textarea cols="40" rows="8" name="userInfo" id="userInfo" placehoder="userInfo"></textarea>
		</li>

		<li data-role="list-divider">Build your colors</li>

		<li data-role="fieldcontain">
		<label  class="select" for="userColor">userColor</label>
		<select name="userColor" id="userColor">
		   <option> 選取一種顏色</option>
		    <option value="red">red</option>
			<option value="green">green</option>
			<option value="blue">blue</option>
		</select>	
		</li>

		<li data-role="fieldcontain">
		<label  class="select" for="userColor">colorSize</label>
		<input type="range" min="2" step="2" max="72" autocomplete="off" value="2">        	
		</li>


        <li><button data-theme="b">submit</button></li>
		</ul>
 
	</form>
</div>




<!--footer-->

<div data-role="footer" data-position="fixed" data-theme="b">
<!--data-position="fixed" 讓footer永遠固定在頁面最下方-->
<!--構造導航欄：data-role:navbar-->

<div data-role="navbar" >

<ul>
<li><a href="#" data-icon="info" class="ui-btn-active">nav a</a></li>
<li><a href="#" data-icon="star">nav b</a></li>
<li><a href="#" data-icon="grid">nav c</a></li>
</ul>

</div>

</div>

</div>


<!--js-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。