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的 - 如何将链接添加到列表元素

回答

相关问题