jquery.mobile 共同布局遇到的問(wèn)題小結(jié)
最近項(xiàng)目用上了jquery.mobile這貨，在手機(jī)上做點(diǎn)簡(jiǎn)單的顯示。之前只知道有這個(gè)框架，沒(méi)把玩過(guò)。
特別是事件綁定方面，相比桌面系統(tǒng)下瀏覽器用著各種不爽，不得要領(lǐng)。
如下圖，在做后臺(tái)系統(tǒng)時(shí)，一般左側(cè)都是一個(gè)個(gè)模塊及下屬菜單項(xiàng)，可展開(kāi)折疊。
我的問(wèn)題卡在了累計(jì)評(píng)價(jià)這塊，為了頁(yè)面復(fù)用，累計(jì)評(píng)價(jià)中嵌套了iframe做評(píng)論顯示。
第一檻
有過(guò)移動(dòng)WEB開(kāi)發(fā)的同學(xué)應(yīng)該知道，IOS瀏覽器下iframe中內(nèi)容過(guò)多時(shí)，滾動(dòng)條時(shí)不會(huì)出現(xiàn)的，內(nèi)容好像被截?cái)嗔恕?/p>
查資料最終搞定，手機(jī)屏畢竟小，評(píng)論多的時(shí)候不可能像電腦瀏覽器上的頁(yè)面搞一排的翻頁(yè)按鈕，這樣體驗(yàn)實(shí)在太差了。
現(xiàn)在一般都是滾動(dòng)加載，寫(xiě)DEMO在電腦上先跑一下，可行！換手機(jī)上，先用個(gè)android機(jī)試試，可行，滿心以為可以。
換用iphone 只是滾動(dòng)條的問(wèn)題解決了，我的滾動(dòng)加載呢。反復(fù)滑動(dòng)還是沒(méi)反應(yīng)，心都涼了。這里要說(shuō)個(gè)邪乎的事，在QQ, 微信中又是可以的，是在是怪哉。
再這么耗下去也沒(méi)什么結(jié)果，還是另尋它法吧。第一想到在單獨(dú)的頁(yè)面去做這事。于是遇到第二檻。
<div data-role="content" style="border: solid #CCC; border-width: 0 1px;">
<ul data-role="listview">
<li><a id="pjList" href="xxx" class="ui-btn-text" >累計(jì)評(píng)價(jià)</a></li>
</ul>
</div>
上面對(duì)應(yīng)累計(jì)評(píng)價(jià)部分，在點(diǎn)擊后打開(kāi)頁(yè)面樣式全亂了包括js事件都沒(méi)執(zhí)行。f12看代碼，除了body 中的html 元素，head中部分，頁(yè)面底部的js全沒(méi)了。
要不要這么坑啊。問(wèn)同事有沒(méi)遇到這樣的問(wèn)題，說(shuō)加上rel="external"就好了，別說(shuō)真行。于是代碼變成了如下：
<div data-role="content" style="border: solid #CCC; border-width: 0 1px;">
<ul data-role="listview">
<li><a id="pjList" href="xxx" class="ui-btn-text" rel="external">累計(jì)評(píng)價(jià)</a></li>
</ul>
</div>
注：rel='external'與target=''_blank''相似，意思在新的頁(yè)面打開(kāi)
第三檻，也就是標(biāo)題中提到的問(wèn)題(頭部圖片是最終效果)
collapsible listview 這兩伙伴水火不容，死活調(diào)不出比較好的布局效果，瞎鼓搗時(shí)加了個(gè)空的collapsible居然可以了。
最終讓它們?cè)谝黄鹆?。collapsible 圖標(biāo)默認(rèn)是+，listview項(xiàng)時(shí)右箭頭，將圖標(biāo)統(tǒng)一。累計(jì)評(píng)價(jià)默認(rèn)并不是上圖那樣。
<div data-role="content" style="border: solid #CCC; border-width: 0 1px;">
到此問(wèn)題都掃清，完整頁(yè)面如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="../Scripts/mobile/jquery.mobile-1.3.2.min.css" />
<script src="../Scripts/mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../Scripts/mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
.ui-btn-text
{
font: bold 14px Arial,Helvetica, sans-serif, 微軟雅黑;
}
</style>
</head>
<body>
<div data-role="page" id="pageone" data-add-back-btn="true" data-overlay-theme="a">
<div data-role="content">
<div data-role="collapsible-set" data-iconpos="right" data-theme="c" data-content-theme="d"
data-expanded-icon="arrow-u" data-collapsed-icon="arrow-d">
<div data-role="collapsible">
<h3>醫(yī)院介紹</h3>
<p></p>
</div>
<div data-role="collapsible">
<h3>套餐相關(guān)信息</h3>
<p></p>
</div>
<div data-role="collapsible">
<h3>使用須知</h3>
<p></p>
</div>
<div data-role="collapsible">
<h3>查看地圖</h3>
<p></p>
</div>
<div data-role="collapsible">
</div>
<div data-role="content" style="border: solid #CCC; border-width: 0 1px;">
<ul data-role="listview">
<li><a id="pjList" href="xxx" class="ui-btn-text" rel="external">累計(jì)評(píng)價(jià)</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
- 讓jQuery Mobile不顯示討厭loading界面的方法
- jquerymobile局部渲染的各種刷新方法小結(jié)
- 使用jQueryMobile實(shí)現(xiàn)滑動(dòng)翻頁(yè)效果的方法
- Jquery Mobile 自定義按鈕圖標(biāo)
- jQuery Mobile彈出窗、彈出層知識(shí)匯總
- jQuery Mobile開(kāi)發(fā)中日期插件Mobiscroll使用說(shuō)明
- JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳
- jQuery mobile的header和footer在點(diǎn)擊屏幕的時(shí)候消失的解決辦法
相關(guān)文章
大部分jQuery插件都是這種類型的插件，由于這種插件是將對(duì)象方法封裝起來(lái)，在jQuery選擇器獲取jQuery對(duì)象過(guò)程中進(jìn)行操作，從而發(fā)揮jQuery強(qiáng)大的選擇器優(yōu)勢(shì)2012-09-09
這篇文章主要介紹了jQuery中next方法用法,實(shí)例分析了jQuery中next方法的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下2015-04-04
20款超贊的jQuery插件 Web開(kāi)發(fā)人員必備
jQuery的易擴(kuò)展性吸引了來(lái)自全球的開(kāi)發(fā)者來(lái)共同編寫(xiě)jQuery插件。jQuery插件不僅能夠增強(qiáng)網(wǎng)站的可用性，有效地改善用戶體驗(yàn)，還可以大大減少開(kāi)發(fā)時(shí)間?，F(xiàn)在的jQuery插件很多，可以根據(jù)您的項(xiàng)目需要來(lái)選擇。這里為您介紹20款非常不錯(cuò)的插件。2011-02-02
jQuery源碼分析之jQuery中的循環(huán)技巧詳解
這篇文章主要介紹了jQuery源碼中的循環(huán)技巧,包括各類選擇、判斷、遍歷等等操作,非常實(shí)用的技巧,需要的朋友可以參考下2014-09-09
JQueryEasyUI之DataGrid數(shù)據(jù)顯示
在有的項(xiàng)目中，為了方便將數(shù)據(jù)庫(kù)中的某些定值儲(chǔ)存為指定的數(shù)字，怎么處理這種問(wèn)題呢？下面小編通過(guò)一段代碼給大家介紹下，需要的朋友參考下2016-11-11
這篇文章主要介紹了超級(jí)簡(jiǎn)單的jquery操作表格方法,可實(shí)現(xiàn)針對(duì)表格行與列的增加及刪除操作,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
寫(xiě)得不錯(cuò)的jquery table鼠標(biāo)經(jīng)過(guò)變色代碼
鼠標(biāo)經(jīng)過(guò)table變色的效果，想必大家都有遇到過(guò)吧，其實(shí)實(shí)現(xiàn)并不難，在本文為大家詳細(xì)介紹下jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以參看下2013-09-09
html中的input標(biāo)簽的checked屬性jquery判斷代碼
input 標(biāo)簽具有checked屬性，而當(dāng)input標(biāo)簽的type屬性設(shè)為button時(shí)，如果給input標(biāo)簽的checked屬性賦值時(shí)，在vs中會(huì)報(bào)錯(cuò)，提示 特性checked不是元素input的有效特性2012-09-09
jquery判斷iPhone、Android設(shè)備類型
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)iPhone、Android設(shè)備判斷方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
本文介紹了jquery實(shí)現(xiàn)輪播圖效果示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02