使用不同參數鏈接到當前頁面jqm

我正在用jquery mobile構建一個網頁，並嘗試將頁面與參數鏈接起來。這有效，但我的問題是，我無法鏈接到我目前留在不同的參數相同的頁面。使用不同參數鏈接到當前頁面jqm

例子：

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

所以，當我的列表2點擊IM停留在列表1時，它不會做任何事情。

感謝您的幫助

來源

2013-10-01 Getu.ch

加上'相對= external'屬性錨塔赫，加載它沒有Ajax – Omar

相對=外部不起作用，因爲它與其他參數 –

所以我解決這樣說：

首先，我改變了開關，它開始在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;

希望有人幫助

來源

2013-10-02 14:12:39

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

來源

2013-10-01 08:27:02 Ved

更新例如同一JQM頁面。無論如何，感謝您的幫助^^ –

使用不同參數鏈接到當前頁面jqm

回答

相關問題