jquery.mobile 共同布局遇到的問題小結(jié)

更新時(shí)間：2015年02月10日 09:18:07 投稿：hebedich

這篇文章主要介紹了jquery.mobile 共同布局遇到的問題小結(jié),需要的朋友可以參考下

最近項(xiàng)目用上了jquery.mobile這貨，在手機(jī)上做點(diǎn)簡(jiǎn)單的顯示。之前只知道有這個(gè)框架，沒把玩過。

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

如下圖，在做后臺(tái)系統(tǒng)時(shí)，一般左側(cè)都是一個(gè)個(gè)模塊及下屬菜單項(xiàng)，可展開折疊。

我的問題卡在了累計(jì)評(píng)價(jià)這塊，為了頁(yè)面復(fù)用，累計(jì)評(píng)價(jià)中嵌套了iframe做評(píng)論顯示。

第一檻

有過移動(dòng)WEB開發(fā)的同學(xué)應(yīng)該知道，IOS瀏覽器下iframe中內(nèi)容過多時(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)加載，寫DEMO在電腦上先跑一下，可行！換手機(jī)上，先用個(gè)android機(jī)試試，可行，滿心以為可以。

換用iphone 只是滾動(dòng)條的問題解決了，我的滾動(dòng)加載呢。反復(fù)滑動(dòng)還是沒反應(yīng)，心都涼了。這里要說個(gè)邪乎的事，在QQ, 微信中又是可以的，是在是怪哉。

再這么耗下去也沒什么結(jié)果，還是另尋它法吧。第一想到在單獨(dú)的頁(yè)面去做這事。于是遇到第二檻。

復(fù)制代碼代碼如下:

<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)擊后打開頁(yè)面樣式全亂了包括js事件都沒執(zhí)行。f12看代碼，除了body 中的html 元素，head中部分，頁(yè)面底部的js全沒了。

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

復(fù)制代碼代碼如下:

<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è)面打開

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

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)并不是上圖那樣。

復(fù)制代碼代碼如下:

到此問題都掃清，完整頁(yè)面如下：

復(fù)制代碼代碼如下: