jquery.mobile 共同布局遇到的問題小結(jié)
最近項目用上了jquery.mobile這貨，在手機上做點簡單的顯示。之前只知道有這個框架，沒把玩過。
特別是事件綁定方面，相比桌面系統(tǒng)下瀏覽器用著各種不爽，不得要領(lǐng)。
如下圖，在做后臺系統(tǒng)時，一般左側(cè)都是一個個模塊及下屬菜單項，可展開折疊。
我的問題卡在了累計評價這塊，為了頁面復用，累計評價中嵌套了iframe做評論顯示。
第一檻
有過移動WEB開發(fā)的同學應(yīng)該知道，IOS瀏覽器下iframe中內(nèi)容過多時，滾動條時不會出現(xiàn)的，內(nèi)容好像被截斷了。
查資料最終搞定，手機屏畢竟小，評論多的時候不可能像電腦瀏覽器上的頁面搞一排的翻頁按鈕，這樣體驗實在太差了。
現(xiàn)在一般都是滾動加載，寫DEMO在電腦上先跑一下，可行！換手機上，先用個android機試試，可行，滿心以為可以。
換用iphone 只是滾動條的問題解決了，我的滾動加載呢。反復滑動還是沒反應(yīng)，心都涼了。這里要說個邪乎的事，在QQ, 微信中又是可以的，是在是怪哉。
再這么耗下去也沒什么結(jié)果，還是另尋它法吧。第一想到在單獨的頁面去做這事。于是遇到第二檻。
<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" >累計評價</a></li>
</ul>
</div>
上面對應(yīng)累計評價部分，在點擊后打開頁面樣式全亂了包括js事件都沒執(zhí)行。f12看代碼，除了body 中的html 元素，head中部分，頁面底部的js全沒了。
要不要這么坑啊。問同事有沒遇到這樣的問題，說加上rel="external"就好了，別說真行。于是代碼變成了如下：
<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">累計評價</a></li>
</ul>
</div>
注：rel='external'與target=''_blank''相似，意思在新的頁面打開
第三檻，也就是標題中提到的問題(頭部圖片是最終效果)
collapsible listview 這兩伙伴水火不容，死活調(diào)不出比較好的布局效果，瞎鼓搗時加了個空的collapsible居然可以了。
最終讓它們在一起了。collapsible 圖標默認是+，listview項時右箭頭，將圖標統(tǒng)一。累計評價默認并不是上圖那樣。
<div data-role="content" style="border: solid #CCC; border-width: 0 1px;">
到此問題都掃清，完整頁面如下：
<!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">累計評價</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
jQuery UI Autocomplete是jQuery UI的自動完成組件，是我用過的最強大、最靈活的Autocomplete，它支持本地的Array/JSON數(shù)組、通過ajax請求的Array/JSON數(shù)組、JSONP、以及Function(最靈活)等方式來獲取數(shù)據(jù)2012-02-02
這篇文章主要介紹了jQuery驗證元素是否為空的兩種常用方法,實例分析了兩種常用的判斷為空技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
3Z版基于jquery的圖片復選框(asp.net+jquery)
最近在做一個彩票縮水工具,找了幾個圖片復選框插件始終感覺不太滿意,自己動手山寨了一下imageTick插件.2010-04-04
這篇文章主要介紹了jquery實現(xiàn)圖片左右切換的方法,設(shè)計jQuery操作頁面元素及對應(yīng)樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05
jQuery實現(xiàn)鼠標經(jīng)過購物車出現(xiàn)下拉框代碼(推薦)
在做web前端項目開發(fā)的時候，使用jquery庫的感觸頗多，下面小編通過寫購物車的下拉框做法，把我的想法給大家分享一下，感興趣的朋友可以參考下2016-07-07
jQuery動態(tài)移除與增加onclick屬性的方法詳解
這篇文章主要介紹了jQuery動態(tài)移除與增加onclick屬性的方法,結(jié)合實例形式分析了jQuery使用attr與removeAttr方法針對元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-06-06
基于jquery的兼容各種瀏覽器的iframe自適應(yīng)高度的腳本
在網(wǎng)上找了很多的iframe自適應(yīng)高度的腳本，對瀏覽的的兼容性都不好。所以就想利用jquery強大的兼容性，寫一個iframe自適應(yīng)高度的腳本。2010-08-08
下面小編就為大家?guī)硪黄P(guān)于Jquery中的事件綁定總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了jQuery實現(xiàn)二級導航菜單的示例，幫助大家理解和制作網(wǎng)頁特效，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了jQuery實現(xiàn)鼠標滑過圖片移動特效，鼠標移動到圖片上時圖片向上動一下，等到鼠標離開后，圖片又返回到原來位置,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12