jQuery Mobile的 - 如何將鏈接添加到列表元素

我設計中使用的移動網頁的大學生。爲了簡單起見，每個學生被分配一個唯一的ID和一個額外的字段。這兩個字段都可以視爲字符串，唯一的ID是唯一的，而第二個字段可能是唯一的，但不能保證是唯一的。有以下代碼模擬學生信息數據庫的樣本數據。jQuery Mobile的 - 如何將鏈接添加到列表元素

的網頁打開了，並沒有輸入這些領域的任何一個搜索字段。在輸入唯一的ID或其他字段時，搜索字段會查詢存儲的元素，並顯示匹配的元素。如果你點擊其中一個條目，它會帶你到第二個頁面，它會向你顯示兩個字段（代碼不需要顯示）。在第二頁上有一個後退按鈕可讓您進入第一頁。

我有兩個問題：

1）首先，第一頁頂部有兩個按鈕，其中包含搜索欄。這些是單選按鈕，只有一個可以在給定的時間選擇。我希望當這些按鈕中的任何一個被擊中以更改我在搜索欄中看到的值時。例如，如果我選擇了「唯一ID」單選框，我只想將唯一ID放在搜索框中。同樣適用於其他領域。這是通過改變listview中元素的文本（自然）來實現的，但是有一個問題。如果我更改了我的元素之一文字在我的列表視圖（在下面我在我的列表視圖元素的腳本標籤），我失去了HTML鏈接（和間距 - 新盒更小，更緊湊的）。我怎麼可能重新添加鏈接到按鈕，所以它的行爲與以前一樣（將用戶帶到第二頁）

2）這一個是可選的，但有沒有一種方法來重置默認值（如所選由swatch選擇）我點擊的按鈕來簡單地改變文本，而不是調整大小&縮小盒子？這裏的建議沒有奏效：mobile navbar resizes on changing text of an item

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
    <div data-role="page" id="home"> 
    <div data-role="header" data-position="fixed" data-theme="b"> 
     <h1>Home</h1><!--Header text--> 
    </div> 
      <div data-role="content"> 
      <ul data-role="listview" data-filter="true" data-inset="true" data-filter-placeholder="Search" id="list" data-filter-reveal="true" data-prevent-focus-zoom="true"> 
      <li id="1234" lang="ILIKEFROGS"><a href="#student">1234567</a></li> 
      <li id="9281" lang="LICENSE2"><a href="#student">9281736</a></li> 
      <li id="0233" lang="PICKLES"><a href="#student">0233392</a></li> 
      <li id="7732" lang="FOEREST"><a href="#student">7732825</a></li> 
      <li id="2245" lang="BLASTOISE"><a href="#student">2245722</a></li> 
      <li id="9956" lang="CHARMANDER"><a href="#student">9956353</a></li> 
      <li id="2245" lang="BULBASAUR"><a href="#student">2245871</a></li> 


      </ul> 
      <script> 
       $("li").bind("click", function() { 

        this.innerText = this.lang; 
       }); 
           $("li").unbind("click"); 
      </script> 
      </div> 
    </div> 

    <div data-role="page" id="student"> 
      <div data-role="header" data-theme="b" data-position="fixed"> 
       <a href="#home" data-icon="back" class="ui-btn-left">Back</a> 
        <h1>Student info</h1> 
      </div> 
     </div> 
    </body> 
</html>

來源

2013-05-30 Zac

有幾種方法可以完成您要求的功能。這是一個想法。

首先添加這兩個屬性，如您的列表視圖data-屬性的li秒。像這樣：

<li id="1234" data-lang="ILIKEFROGS" data-id="1234567"><a href="#student">1234567</a></li> 
<li id="9281" data-lang="LICENSE2" data-id="9281736"><a href="#student">9281736</a></li> 
<li id="0233" data-lang="PICKLES" data-id="0233392"><a href="#student">0233392</a></li> 
<!-- snip -->

這將使交換後的值更容易。現在添加一些無線電選擇：

<div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup"> 
    <legend>Search by:</legend> 
    <input type="radio" name="search-by" id="search-by-id" value="id" checked="checked" /> 
    <label for="search-by-id">ID</label> 

    <input type="radio" name="search-by" id="search-by-lang" value="lang" /> 
    <label for="search-by-lang">Lang</label> 
    </fieldset> 
</div>

最後，我們需要一些JavaScript來將其結合在一起，當你選擇一個電臺：

$("input[name='search-by']").on('click', function(event) { 
    var prop = $(this).val(); // which 'data-' property are we searching by 
    var target = $("#list"); // your listview 

    // Swap out values 
    target.find("li").each(function() { 
     var $this = $(this); 
     var newvalue = $this.data(prop); // the new text value is pulled from the element 
     $this.find("a").text(newvalue); //make the change 
    }); 
});

你可以看到一個工作演示在這裏：http://jsfiddle.net/5cpKW/4/

我唯一無法弄清楚的是，如果在顯示一些信息後選擇了新的收音機，那麼結果將得到更新，但我已經之前從未使用過jQuery Mobile，所以也許別人可以在這一點上做出貢獻。

來源

2013-05-30 17:35:03 hamstu

謝謝hamstu，我會愛，如果我可以選擇單個元素，但似乎我的代碼無法出現這樣的工作。感謝您的回答 – Zac

jQuery Mobile的 - 如何將鏈接添加到列表元素

回答

相關問題