jquery.mobile 中 collapsible-set collapsible listview 共同佈局問題

時間 2019-11-17

標籤 jquery.mobile jquery mobile collapsible set listview 共同佈局問題欄目 JQuery 简体版

原文原文鏈接

最近項目用上了jquery.mobile這貨，在手機上作點簡單的顯示。以前只知道有這個框架，沒把玩過。javascript

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

以下圖，在作後臺系統時，通常左側都是一個個模塊及下屬菜單項，可展開摺疊。html

個人問題卡在了累計評價這塊，爲了頁面複用，累計評價中嵌套了iframe作評論顯示。java

第一檻jquery

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

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

如今通常都是滾動加載，寫DEMO在電腦上先跑一下，可行！換手機上，先用個android機試試，可行，滿心覺得能夠。瀏覽器

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

再這麼耗下去也沒什麼結果，仍是另尋它法吧。第一想到在單獨的頁面去作這事。因而遇到第二檻。app

<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>

View Code

上面對應累計評價部分，在點擊後打開頁面樣式全亂了包括js事件都沒執行。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>

View Code

注：rel=’external'與target=''_blank''類似，意思在新的頁面打開

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

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

最終讓它們在一塊兒了。collapsible 圖標默認是+，listview項時右箭頭，將圖標統一。累計評價默認並非上圖那樣。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>醫院介紹</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">
                    <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>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。