将JQM Panel限制为仅限页面上的1个实例 [英] Restrict JQM Panel to only 1 instance on page

问题描述

我正在使用单页开发JQM主题。我还有一个侧栏/面板，它是作为一个单独的html文件构建的。使用以下JS将此面板导入JQM页面;

I'm developing a JQM theme using single pages. I also have a side bar / panel that is built as a seperate html file. This panel is imported into the JQM page using the following JS;

/* Creates the functionality to open the left side panel with a swipe */
$(document).one("pagebeforecreate", function () {
  $.get('left-panel.html', function(data){ 
    $.mobile.pageContainer.prepend(data);
    $("[data-role=panel]").panel().enhanceWithin(); // initialize panel
  }, "html");
});   

我已经将这个脚本放在每个页面底部加载的js文件中，因为用户是移动网站可以通过任何页面进入。

Ive got this script in a js file that is loaded at the foot of every page, since users of the 'mobile site' could enter via any page.

我已经注意到，通过Firebug，我导航到的每个页面都会添加一个面板实例。因此，如果我访问3页，面板将被加载3次，4页= 4个面板等等。

Ive noticed via Firebug that an instance of the panel seems to be added with every page I navigate to. So if I visit 3 pages, the panel will be loaded 3 times, 4pages = 4 panels, etc.

可以说我在JQ& amp; JQM，但我的印象是使用

It's fair to say I'm fairly novice at JQ & JQM, but I was under the impression that the use of

$(document).one

意味着事件每页只发生一次，因此会阻止我遇到的问题。

meant the event only occurred once per page, and would therefore prevent the issue I have.

如果你能帮我弄清楚如何防止这个问题，我真的很感激。

IF you can help me work out how I can prevent this issue, I'd really appreciate it.

推荐答案

pagebeforecreate 事件将在每个页面上发出，但仅在ONCE上发出。如果您在一个HTML文件（多页模型）中有5个页，那么该事件将在创建/显示目标页面之前触发 5次。

The pagebeforecreate event will emit on each and every page, but only ONCE. If you have 5 pages in one HTML file (Multi-Page Model), that event will fire 5 times before creating/showing the target page.

此事件不能委派到特定页面，例如以下代码无法使用。

This event can't be delegated to a specific page, e.g. the below code won't work.

$(document).on("pagebeforecreate", "#pageX", function (event) {
  /* do something to pageX */
});

与 pagecreate 不同，它可以是委派到特定页面。

unlike pagecreate which can be delegated to a specific page.

$(document).on("pagecreate", "#pageX", function (event) {
  /* use it to add listeners */
});

但是，您可以获取正在创建的页面的对象。

However, you can obtain an object of that page which is being created.

$(document).on("pagebeforecreate", function (event) {
  var page = event.target.id;
  if ( page == "pageX") {
    /* do something to pageX */
  }
});

---

为什么 .one（ ）？

由于 pagebeforecreate 无法委派并且它在每个页面上触发，使用 .one（）将只运行一次代码。但是，如果您使用 .one（）重复相同的代码，该代码将再次执行。

---

Why .one()?

Since pagebeforecreate can't be delegated and it fires on each page, using .one() will run code once only. However, if you repeat the same code using .one() that code will be executed it again.

1. 在添加面板之前检查面板是否已添加。

1. Check whether panel is added before adding it.

$(document).one('pagebeforecreate', function () {
    var panelDOM = $("[data-role=panel]").length;
    if (panelDOM === 0) {
        /* add panel */
    } else {
        /* nothing */
    }
});

演示

Demo

使用 mobileinit 因为每个文档/框架触发一次。此事件在加载jQM之前触发，因此在加载jQM后，您需要增强 / _ initialize_面板。

Use mobileinit as it fires once per document/framework. This event fires before loading jQM, so you will need to enhance/_initialize_ panel after loading jQM.

<script src="jquery-1.9.1.min.js"></script>
<script>
    /* inject panel */
    $(document).on("mobileinit", function() {
        var panel = '<div>panel</div>';
        $("body").prepend(panel);
    });
</script>
<script src="jquery.mobile-1.4.2.min.js"></script>
<script>
    /* initialize it */
    $(function() {
        $("[data-role=panel]").panel().enhanceWithin();
    });
</script>

演示

Demo

这篇关于将JQM Panel限制为仅限页面上的1个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！