使用不同参数 jqm 链接到当前页面答案

【问题标题】：Link to current page with different parameters jqm使用不同参数 jqm 链接到当前页面
【发布时间】：2013-10-01 07:45:12
【问题描述】：

我正在使用 jquery mobile 构建网页，并尝试使用参数链接页面。这可行，但我遇到的问题是我无法链接到我目前使用不同参数的同一页面。

例子：

<html>
      <body>
            <!-- START INDEX PAGE -->
            <div data-role="page" id="index">
                 <div data-role="header">
                     <h1>Indexpage</h1>
                 </div>
                 <div data-role="content">
                     <a href="index.html#listpage?list=1">
                     <a href="index.html#listpage?list=2">
                 </div>
            </div>
            <!-- END INDEX PAGE -->


            <!-- START LIST PAGE (page to list content i.e. user list)-->
            <div data-role="page" id="listpage">
                 <div data-role="header>
                      <h1>Listpage</h1>
                 </div>
                 <div data-role="content">
                      <ul data-role="listview" id="listview">
                      </ul>
                 </div>
                 <script>
                      //to get passed parameter (list id)
                      $.urlParam = function(name){
                            var results = new RegExp('[\\?&]' + name + '=             ([^&#]*)').exec(window.location.href);
                            if (results==null){
                                return null;
                            } else {
                                return results[1] || 0;
                            }
                       }

                       var list = $.urlParam('list');
                       switch(list) {
                              case 1:
                                     //insert list one into page
                                     break;
                               case 2:
                                     //insert list two into page
                                     break;
                       }
                 </script>
            </div>
            <!-- END LIST PAGE -->
      </body>
</html>

所以当我停留在 list1 上时单击 list2 链接时，它什么也没做。

感谢您的帮助

【问题讨论】：

将rel=external 属性添加到anchor tah，以便在没有Ajax 的情况下加载它
rel=external 不起作用，因为它与其他参数是同一个 jqm 页面

标签： javascript jquery jquery-mobile mobile

【解决方案1】：

You can append html data on click event of anchor tag if you are using same page 
OR
<a href="index.html#listpage?list=1" data-ajax="false">
<a href="index.html#listpage?list=2" data-ajax="false">
OR
$(document).delegate("a", "vclick click", function(event) {
  $.mobile.defaultPageTransition = "slide";                
  var href = $(this).attr("href");
  event.preventDefault();
  if ( event === "click" ) { return; }                      
  $.mobile.changePage(href);
});
 **PAGE-1**
<div data-role="page" id="index">      
<div data-role="header"> </div>

<div data-role="content">
    <a href="#list1"  data-transition="slide" data-role="none">List 1</a>
    <a href="#list2" data-transition="slide" data-role="none">List 2</a>
</div><!-- /content -->      

  <div data-role="footer">              
 </div> 
</div><!-- /page1 -->   

<div data-role="page" id="list1">      
   <div data-role="header"> </div>

    <div data-role="content">
    </div><!-- /content -->      

    <div data-role="footer">              
     </div> 
</div><!-- /List page1 --> 

<div data-role="page" id="list2">      
    <div data-role="header"> </div>

    <div data-role="content">        
     </div><!-- /content -->      

     <div data-role="footer">              
      </div> 
</div><!-- /List page2 -->

【讨论】：

【解决方案2】：

所以我这样解决了：

首先，我将在 pageint 开始的开关更改为独立功能：

function displayContent(contentid) {
    switch(contentid) {
        case 1:
            //change content
            break;
        case 2:
            //change content
            break;
    }
}

然后我改变了显示内容的方式：

$('#listpage-header-title').html('Alle Turner'); //change title on header

//CHANGED PART START
//check if navbar already exists                            
if($('#listpage-sub-nav ul').length != 0) {
    //remove activestate from all active buttons
    $('.ui-btn-active').removeClass('ui-btn-active');  
$('.ui-state-persist').removeClass('ui-state-persist');

    //add activestate to pushed button
    $('[onclick*="alle_tu"]').addClass('ui-btn-active');
    $('[onclick*="alle_tu"]').addClass('ui-state-persist');
} else {

    //if navbar doesn't exists add html code of the navbar
    $('#listpage-sub-nav').html('<ul><li><a href="index.html#turnerpage" data-role="tab" rel="external">Überblick</a></li><li><a href="#" onclick="displayContent(\'alle_tu\');" data-role="tab" class="ui-btn-active ui-state-persist">Turner</a></li><li><a href="#" onclick="displayContent(\'alle_ti\');" data-role="tab">Turnerinnen</a></li></ul>');
}
//CHANGED PART END

 //add autodivers to listview
 $('#list-page-listview').attr('data-autodividers', 'true');

 //change/add data to listview
 showTeilnehmer('listpageM');

 //refresh listview
 $('#list-page-listview').listview('refresh');
 break;

希望有人帮忙

【讨论】：