javascript - jQuery 手机 : Position of external panel/always visible?

Question

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

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

• 在大屏幕(例如桌面浏览器)上始终可见，
• 当始终可见时，在页面“内部”(例如在页眉下方)。

总而言之:我不想在演示页面上创建具有与(内部)面板完全相同的行为的外部面板。

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

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

Answer 1

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

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

Demo展开窗口显示面板

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")
    });
});