jquery.mobile 共同佈局遇到的問題小結

最近專案用上了jquery.mobile這貨，在手機上做點簡單的顯示。之前只知道有這個框架，沒把玩過。

特別是事件綁定方面，相比桌面系統下瀏覽器用著各種不爽，不得要領。

如下圖，在做後台系統時，一般左側都是一個個模組及下屬選單項，可展開折疊。

我的問題卡在了累計評價這塊，為了頁面復用，累計評價中嵌套了iframe做評論顯示。

第一門檻

有過移動WEB開發的同學應該知道，IOS瀏覽器下iframe中內容過多時，滾動條時不會出現的，內容好像被截斷了。

查資料最後搞定，手機螢幕畢竟小，評論多的時候不可能像電腦瀏覽器上的頁面搞一排的翻頁按鈕，這樣體驗實在太差了。

現在通常都是滾動加載，寫DEMO在電腦上先跑一下，可行！換手機上，先用android機試試，可行，滿心以為可以。

換用iphone 只是滾動條的問題解決了，我的滾動加載呢。反覆滑動還是沒反應，心都涼了。這裡要說個邪乎的事，在QQ, 微信中又是可以的，是在是怪哉。

再這麼耗下去也沒什麼結果，還是另尋它法吧。第一想到在單獨的頁面做這事。 於是遇到第二門檻。

複製程式碼程式碼如下:

上面對應累計評價部分，點擊後開啟頁面樣式全亂了包含js事件都沒執行。 f12看程式碼，除了body 中的html 元素，head中部分，頁面底部的js全沒了。

要不要這麼坑啊。問同事有沒遇到這樣的問題，說加上rel="external"就好了，別說真行。於是程式碼變成瞭如下：

複製程式碼程式碼如下:

註：rel='external'與target=''_blank''相似，意思在新的頁面開啟

第三門檻，也就是標題中提到的問題(頭部圖片是最終效果)

collapsible listview 這兩夥伴水火不容，死活調不出比較好的佈局效果，瞎鼓搗時加了個空的collapsible居然可以了。

最後讓它們在一起了。 collapsible 圖示預設是，listview項時右箭頭，將圖示統一。累計評價預設並不是上圖那樣。

到此問題都掃清，完整頁如下：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

data-expanded-icon="arrow-u" data-collapsed-icon="arrow-d">

相關標籤：

jquery mobile 佈局

來源：php.cn

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

jquery.mobile 共同佈局遇到的問題小結_jquery