jquery Mobile入門—外部鏈接切換示例代碼
2、外部鏈接切換示例代碼:
<!DOCTYPE HTML >
<!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"/>
<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>
<section id="page1" data-role="page">
<header data-role="header"><h1>天氣預(yù)報(bào)</h1></header>
<div data-role="content" class="content">
<p><a href="#w1">今天</a></p>|
<p><a href="#">明天</a></p>
</div>
<footer data-role="footer"><h1>@2013 3i studio</h1></footer>
</section>
<section id="w1" data-role="page" data-add-back-btn="true">
<header data-role="header"><h1>今天天氣</h1></header>
<div data-role="content" class="content">
<p>4~7'C<br />晴轉(zhuǎn)多云<br />微風(fēng)</p>
<em style="float:right;padding:5px">
<a href="about.html" rel="external">3i Studio</a>提供
</em>
</div>
<footer data-role="footer"><h1>@2013 3i studio</h1></footer>
</section>
</BODY>
</HTML>
外部文件about.html代碼:
<!DOCTYPE HTML >
<!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"/>
<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>
<section id="page1" data-role="page" data-add-back-btn="true">
<header data-role="header"><h1>關(guān)于3I Studio</h1></header>
<div data-role="content" class="content">
<p>3I Studio是一個(gè)致力于創(chuàng)業(yè)創(chuàng)新的技術(shù)團(tuán)隊(duì)</p>|
</div>
<footer data-role="footer"><h1>@2013 3i studio</h1></footer>
</section>
</BODY>
</HTML>
3、效果圖預(yù)覽:
點(diǎn)擊3i Studio進(jìn)行外部鏈接:
4、返回上一頁(yè),則在<a>標(biāo)簽中添加data-rel屬性,并將屬性設(shè)為back,,如: <a data-rel="back">返回上一頁(yè)</a>
- jQuery Mobile彈出窗、彈出層知識(shí)匯總
- 使用jQueryMobile實(shí)現(xiàn)滑動(dòng)翻頁(yè)效果的方法
- jquery Mobile入門—多頁(yè)面切換示例學(xué)習(xí)
- jQuery Mobile開發(fā)中日期插件Mobiscroll使用說(shuō)明
- jquery mobile動(dòng)態(tài)添加元素之后不能正確渲染解決方法說(shuō)明
- 讓jQuery Mobile不顯示討厭loading界面的方法
- jquery mobile頁(yè)面跳轉(zhuǎn)后樣式丟失js失效的解決方法
- jquery mobile changepage的三種傳參方法介紹
- Jquery Mobile 自定義按鈕圖標(biāo)
- jQueryMobile之Helloworld與頁(yè)面切換的方法
- jQueryMobile之窗體長(zhǎng)內(nèi)容的缺陷與解決方法實(shí)例分析
相關(guān)文章
JQuery Tips(3) 關(guān)于$()包裝集內(nèi)元素的改變
JQuery包裝集內(nèi)的元素在一開始的選定后,還可以通過一系列JQuery提供的方法對(duì)包裝集內(nèi)的元素進(jìn)行擴(kuò)充,修改,篩選,刪除find()方法 VS filter()方法2009-12-12jQuery簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
目前jQuery有1.x和2.x兩個(gè)主要版本,區(qū)別在于2.x移除了對(duì)古老的IE 6、7、8的支持,因此2.x的代碼更精簡(jiǎn)。選擇哪個(gè)版本主要取決于你是否想支持IE 6~8,下文給大分享jquery 簡(jiǎn)介的相關(guān)知識(shí),感興趣的朋友一起看看吧2017-07-07jquery實(shí)現(xiàn)輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
本文主要分享了jquery實(shí)現(xiàn)輸入框?qū)崟r(shí)輸入觸發(fā)事件的代碼,代碼簡(jiǎn)單易懂,需要的朋友一起來(lái)看下吧2016-12-12jQuery實(shí)現(xiàn)級(jí)聯(lián)菜單效果(仿淘寶首頁(yè)菜單動(dòng)畫)
今天我們就帶大家體會(huì)一下級(jí)聯(lián)菜單的顯示,只是實(shí)現(xiàn)了簡(jiǎn)單的效果,不過大都原理是一樣的2014-04-04基于jQuery倒計(jì)時(shí)插件實(shí)現(xiàn)團(tuán)購(gòu)秒殺效果
倒計(jì)時(shí)在WEB上應(yīng)用非常廣泛,如考試系統(tǒng)倒計(jì)時(shí),團(tuán)購(gòu)網(wǎng)站中的優(yōu)惠活動(dòng)倒計(jì)時(shí)等等。今天,我們來(lái)使用jQuery倒計(jì)時(shí)超級(jí)實(shí)現(xiàn)團(tuán)購(gòu)秒殺效果,感興趣的朋友一起學(xué)習(xí)吧2016-05-05Jquery的autocomplete插件用法及參數(shù)講解
今天小編就為大家分享一篇關(guān)于Jquery的autocomplete插件用法及參數(shù)講解,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-03-03jquery實(shí)現(xiàn)tab選項(xiàng)卡切換效果(懸停、下方橫線動(dòng)畫位移)
這篇文章主要介紹了jquery實(shí)現(xiàn)tab選項(xiàng)卡切換效果,實(shí)現(xiàn)懸停、下方橫線動(dòng)畫位移,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05用Jquery重寫windows.alert方法實(shí)現(xiàn)思路
本文將介紹下用Jquery重寫windows.alert方法,已經(jīng)在 IE8 , firefox3.0.11下面測(cè)試通過,喜歡的朋友可以放心使用2013-04-04