jquery Moblie入門(mén)—hello world的示例代碼學(xué)習(xí)
更新時(shí)間：2013年01月08日 10:46:14 作者：
jquery Moblie入門(mén)：Hello World的示例代碼學(xué)習(xí)，感興趣的朋友可以了解下哦
1、需要運(yùn)行JQuery Mobile 移動(dòng)應(yīng)用頁(yè)面，需要下載JQuery Mobile 3個(gè)相關(guān)插件文件（有多版本），jquery.mobile-1.2.0.min.css、jquery-1.8.3.min.js、jquery.mobile-1.2.0.min.js，JQuery Mobile官網(wǎng)地址：http://jquerymobile.com
2、將插件文件加載到頁(yè)面中，注意它們的加載順序，語(yǔ)句如：
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script>
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
3、Hello World的示例代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name="viewport" content="width=device-width,initial-scale=1"/> //設(shè)置頁(yè)面的寬度與移動(dòng)設(shè)備的屏幕寬度相同
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script>
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
</HEAD>
<BODY>
<div id="page1" data-role="page">
<div data-role="header"><h1>JQuery Moblie</h1></div>
<div data-role="content" class="content"><p>Hello World!</p></div>
<div data-role="footer"><h1>工作室版權(quán)所有</h1></div>
</div>
</BODY>
</HTML>
4、由于JQuery Mobile 已經(jīng)全面支持HTML5結(jié)構(gòu)，因此，<body>主體元素代碼也可以修改為：
<BODY>
<section id="page1" data-role="page">
<header data-role="header"><h1>JQuery Moblie</h1></header>
<div data-role="content" class="content"><p>Hello World!</p></div>
<footer data-role="footer"><h1>工作室版權(quán)所有</h1></footer>
</section>
</BODY>
5、為了更好地在PC端瀏覽JQuery Mobile 頁(yè)面在移動(dòng)終端的執(zhí)行效果，可以下載Opera移動(dòng)模擬器，下載地址：http://cn.opera.com/，預(yù)覽效果圖：
2、將插件文件加載到頁(yè)面中，注意它們的加載順序，語(yǔ)句如：
復(fù)制代碼 代碼如下:
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script>
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
3、Hello World的示例代碼如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name="viewport" content="width=device-width,initial-scale=1"/> //設(shè)置頁(yè)面的寬度與移動(dòng)設(shè)備的屏幕寬度相同
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script>
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
</HEAD>
<BODY>
<div id="page1" data-role="page">
<div data-role="header"><h1>JQuery Moblie</h1></div>
<div data-role="content" class="content"><p>Hello World!</p></div>
<div data-role="footer"><h1>工作室版權(quán)所有</h1></div>
</div>
</BODY>
</HTML>
4、由于JQuery Mobile 已經(jīng)全面支持HTML5結(jié)構(gòu)，因此，<body>主體元素代碼也可以修改為：
復(fù)制代碼 代碼如下:
<BODY>
<section id="page1" data-role="page">
<header data-role="header"><h1>JQuery Moblie</h1></header>
<div data-role="content" class="content"><p>Hello World!</p></div>
<footer data-role="footer"><h1>工作室版權(quán)所有</h1></footer>
</section>
</BODY>
5、為了更好地在PC端瀏覽JQuery Mobile 頁(yè)面在移動(dòng)終端的執(zhí)行效果，可以下載Opera移動(dòng)模擬器，下載地址：http://cn.opera.com/，預(yù)覽效果圖：
相關(guān)文章
利用Jquery實(shí)現(xiàn)幾款漂亮實(shí)用的時(shí)間軸(附示例代碼)
這篇文章主要介紹了利用Jquery實(shí)現(xiàn)幾款漂亮的時(shí)間軸示例代碼，文中利用Jquery實(shí)現(xiàn)了縱向折疊時(shí)間軸、縱向鼠標(biāo)滑動(dòng)時(shí)間軸、縱向可折疊時(shí)間軸以及橫向時(shí)間軸，每種時(shí)間軸都給出了完整的示例代碼，需要的朋友可以參考學(xué)習(xí)。2017-02-02
jquery中$.post()方法的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery中$.post()方法的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
jquery實(shí)現(xiàn)點(diǎn)擊label的同時(shí)觸發(fā)文本框點(diǎn)擊事件的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊label的同時(shí)觸發(fā)文本框點(diǎn)擊事件的方法,涉及jQuery鼠標(biāo)事件及頁(yè)面元素操作的技巧,需要的朋友可以參考下2015-06-06
這個(gè)是select版的，若想美化某些樣式是不支持得，大家可以使用div模擬版，下面小編給大家介紹下jQuery雙向列表選擇器select版，感興趣的朋友一起看看吧2016-11-11
最近在寫(xiě)一個(gè)首頁(yè)返回頂部的效果，因?yàn)镮E6不兼容position:fixed的原因，一直找不到好的解決辦法。在Google了一下，有了點(diǎn)眉目，加上一點(diǎn)自己的開(kāi)發(fā)，總算誤打誤撞的把問(wèn)題解決了。2011-01-01
jQuery實(shí)現(xiàn) RadioButton做必選校驗(yàn)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn) RadioButton做必選校驗(yàn)功能的相關(guān)資料,需要的朋友可以參考下2017-06-06
jquery復(fù)選框checkbox實(shí)現(xiàn)刪除前判斷
頁(yè)面有很多數(shù)據(jù)，可以刪除一條或多條，刪除前判斷是否選中至少一條，否則提示，具體示例如下，需要的朋友可以參考下2014-04-04
基于jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退功能
前進(jìn)與后退在瀏覽網(wǎng)頁(yè)的時(shí)候是比較常見(jiàn)的而且非常的實(shí)用，接下來(lái)為大家分享下使用jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退，感興趣的朋友可以參考下哈2013-04-04
基于Jquery的表格隔行換色，移動(dòng)換色，點(diǎn)擊換色插件
希望能和大家一起交流學(xué)習(xí)。先放上去一個(gè)上周學(xué)習(xí)的一個(gè)jquery插件，基于Jquery的表格隔行換色，移動(dòng)換色，點(diǎn)擊換色插件。2010-12-12
jquery基于layui實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉選擇(省份城市選擇)
本篇文章主要介紹了jquery基于layui實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉選擇(省份城市選擇)，具有一定的實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06