jQuery Mobile：外部面板的位置/始终可见？

Question

由于我确实想在 jQuery 多页 html 文件的每个页面上使用相同的面板，因此我有兴趣为每个页面使用相同的代码。

这应该适用于外部面板。但是，我的定位确实存在问题：据我所知，外部面板总是在整个页面高度上打开。我想要的是与 jQuery mobile demo page 中的面板相同的行为：

• 在大屏幕（例如桌面浏览器）上始终可见，并且，
• 当始终可见时，位于页面“内部”（例如，在标题下方）。

总而言之：我不想创建具有演示页面上（内部）面板的确切行为的外部面板。

我的第一个想法是在每个页面上包含一个外部 html 文件，因此我至少可以只编辑这个单个文件以将其保存在任何地方。起初看起来不错，但根本不起作用，因为这样元素将具有相同的 id（例如，在面板中使用表单）。

这个问题有干净的解决方案吗？

Answer 1

来自 JQM 演示页面的确切 CSS 和 HTML 是（见下文）。如果浏览器窗口大于 60em --- 960px，JQM 演示页面会在标题下方显示面板，在我的演示中我将其设置为 40em

外部面板位于数据角色页面的末尾。

演示展开窗口以显示面板

https://jsfiddle.net/jag6ose3/

HTML

<div data-role="page">
    <div data-role="header">
            <h1>External panels</h1>
    <a href="#" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-bars opanel">Opanel</a>

    </div>
    <div role="main" class="ui-content my-content">
            <h1>Content Area</h1>

    </div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
    <br>
    <ul data-role="listview">
        <li>The Panel</li>
        <li>option A</li>
        <li>option B</li>
        <li>option C</li>
        <li>option D</li>
    </ul>
</div>

CSS

@media (min-width: 40em) {
    #my-panel {
        visibility: visible;
        position: relative;
        left: 0;
        clip: initial;
        float: left;
        width: 25%;
        background: none;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        transition: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        transform: none !important;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .my-content {
        width: 67%;
        padding-top: 2em;
        padding-left: 5%;
        padding-right: 3%;
        float: right;
    }
.opanel {
 visibility:hidden;   
}
}

代码

$(function () {
    $("body>[data-role='panel']").panel(); //initialize the external panel

    $(document).on("click", ".opanel", function () {
        $("#my-panel").panel("open")
    });
});

Answer 2

还有一个更复杂的例子。面板宽度为 300px 且窗口小于 900px 时，将显示图标 .opanel。

<script id="panel-init">
    function resizeP() {
        var cw = $("body").prop("clientWidth");
        var padding2x = 32;
        if (cw > 900) {
            $(".my-content").width(cw - 300 - padding2x);
        }
        else
            $(".my-content").width(cw - padding2x);
    }
    $(function () {
        $("body>[data-role='panel']").panel(); //initialize the external panel

        $(document).on("click", ".opanel", function () {
            $("#my-panel").panel("open");
        });

    });
    $(document).ready(function () {
        resizeP();
    });
    $(window).resize(function () {
        resizeP();
    });

</script>

<style>
    @@media screen and (min-width: 900px) {
        #my-panel {
            visibility: visible;
            position: relative;
            left: 0;
            clip: initial;
            float: left;
            width: 300px;
            background: none;
            -webkit-transition: none !important;
            -moz-transition: none !important;
            transition: none !important;
            -webkit-transform: none !important;
            -moz-transform: none !important;
            transform: none !important;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

        .my-content {
            width: 300px;
            /*padding-top: 2em;
            padding-left: 5%;
            padding-right: 3%;*/
            float: right;
        }

        .opanel {
            visibility: hidden;
        }
    }

    .ui-content {
        padding: 16px;
    }

    .countBubl {
        float: left;
        margin-top: -30px;
        margin-left: 35px;
        background: #ed1d24;
        color: #fff;
        padding: 2px;
    }




    .ui-li-static.ui-collapsible > .ui-collapsible-heading {
        margin: 0;
    }

    .ui-li-static.ui-collapsible {
        padding: 0;
    }

        .ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
            border-top-width: 0;
        }

        .ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
        .ui-li-static.ui-collapsible > .ui-collapsible-content {
            border-bottom-width: 0;
        }
</style>

<div data-role="page">
    <div data-role="header">
        <h1>External panels</h1>
        <a href="#" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-bars opanel">Opanel</a>

    </div>
    <div role="main" class="ui-content my-content">
        <h1>Content Area</h1>

        <button>dds</button>


        <p>A paragraph with a tooltip. <a href="#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more">Learn more</a></p>
        <div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
            <p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
        </div>



        <ul data-role="listview" data-inset="true" data-divider-theme="a">
            <li data-role="list-divider">Mail</li>
            <li><a href="#">Inbox</a></li>
            <li><a href="#">Outbox</a></li>
            <li data-role="list-divider">Contacts</li>
            <li><a href="#">Friends</a></li>
            <li><a href="#">Work</a></li>
        </ul>



        <div data-role="footer">
            <div data-role="navbar">
                <ul>
                    <li><a href="#" data-icon="grid">Summary <span class="ui-li-count ui-btn-corner-all countBubl">12</span></a></li>
                    <li><a href="#" data-icon="star" id="btn2" class="ui-btn-active">Favs</a></li>
                    <li><a href="index2.html" data-icon="gear">Setup</a></li>
                </ul>
            </div><!-- /navbar -->
        </div>

    </div>

    <div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
        <div data-role="collapsibleset" data-theme="a" data-inset="false">
            <div data-role="collapsible">
                <h2>Mailbox</h2>
                <ul data-role="listview">
                    <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
                    <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
                    <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
                    <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
                    <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
                </ul>
            </div>
            <div data-role="collapsible">
                <h2>Calendar</h2>
                <ul data-role="listview" data-theme="a" data-divider-theme="b">
                    <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
                    <li>
                        <a href="index.html">
                            <h3>Stephen Weber</h3>
                            <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                            <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                            <p class="ui-li-aside"><strong>6:24</strong>PM</p>
                        </a>
                    </li>
                    <li>
                        <a href="index.html">
                            <h3>jQuery Team</h3>
                            <p><strong>Boston Conference Planning</strong></p>
                            <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
                            <p class="ui-li-aside"><strong>9:18</strong>AM</p>
                        </a>
                    </li>
                    <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
                    <li>
                        <a href="index.html">
                            <h3>Avery Walker</h3>
                            <p><strong>Re: Dinner Tonight</strong></p>
                            <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
                            <p class="ui-li-aside"><strong>4:48</strong>PM</p>
                        </a>
                    </li>
                    <li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
                    <li>
                        <a href="index.html">
                            <h3>Amazon.com</h3>
                            <p><strong>4-for-3 Books for Kids</strong></p>
                            <p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
                            <p class="ui-li-aside"><strong>12:47</strong>PM</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible">
                <h2>Contacts</h2>
                <ul data-role="listview" data-autodividers="true" data-theme="a" data-divider-theme="b">
                    <li><a href="index.html">Adam Kinkaid</a></li>
                    <li><a href="index.html">Alex Wickerham</a></li>
                    <li><a href="index.html">Avery Johnson</a></li>
                    <li><a href="index.html">Bob Cabot</a></li>
                    <li><a href="index.html">Caleb Booth</a></li>
                    <li><a href="index.html">Christopher Adams</a></li>
                    <li><a href="index.html">Culver James</a></li>
                </ul>
            </div>
        </div>
        @*<br>
            <ul data-role="listview">
                <li>The Panel</li>
                <li>option A</li>
                <li>option B</li>
                <li>option C</li>
                <li>option D</li>
            </ul>*@

    </div>

</div>