JQuery Mobile-如何将链接添加到列表元素
[英]JQuery Mobile - How to add a link to a list element
问题描述
I am designing a mobile webpage for use by college students. 
我正在设计一个供大学生使用的移动网页。 For simplicity, each student is assigned a unique id and an additional field. 为简单起见，为每个学生分配一个唯一的ID和一个附加字段。 Both of these fields can be treated as strings, the unique id is unique while the second field may be unique, but isn't guaranteed to be. 这两个字段都可以视为字符串，唯一ID是唯一的，而第二个字段可能是唯一的，但不能保证是唯一的。 There is sample data to mimic a database of student information in the code below. 在下面的代码中，有一些样本数据可以模仿学生信息数据库。
The webpage opens up and there is a search field to input either one of these fields. 网页打开，并且有一个搜索字段可输入这些字段之一。 As you enter in a unique id or other field, the search field queries the elements stored and it will display the ones that match. 当您输入唯一ID或其他字段时，搜索字段将查询存储的元素，并将显示匹配的元素。 If you click on one of these entries, it will take you to a second page where it will show you both fields (code not necessary to be shown). 如果单击这些条目之一，将带您进入第二页，在该页上将显示两个字段（无需显示代码）。 There is a back button on this second page to get you to the first page. 第二页上有一个后退按钮，可转到第一页。
I have two questions: 我有两个问题：
1) First. 1）首先。 I have two buttons on the top of the first page, the page with the search bar in it. 我在第一页的顶部有两个按钮，其中有搜索栏的页面。 These are radio buttons and only one can be selected at a given time. 这些是单选按钮，并且在给定时间只能选择一个。 I would like when either of these buttons are hit to change the values I see in the search bar. 我希望当这些按钮中的任何一个被击中时，更改在搜索栏中看到的值。 For example, if I have "unique ID" radio box selected, I would only like the unique ID's to be in the search box. 例如，如果我选择了“唯一ID”单选框，那么我只希望唯一ID位于搜索框中。 Likewise for the other field. 对于其他领域也是如此。 This is accomplished by changing the text of the element in the listview (naturally), however there is a catch. 这是通过（自然地）更改列表视图中元素的文本来实现的，但是有一个陷阱。 If I change the text in one of my elements in my listview (in the script tag below my elements in my listview), I lose the html link (and spacing - the new box is smaller and more compact). 如果更改列表视图中元素之一的文本（在列表视图中元素下方的脚本标签中），则会丢失html链接（并且间距-新框更小，更紧凑）。 How might I re-add the link to the button so it acts the same way as before (brings the user to the second page) 如何将链接重新添加到按钮，使其与以前相同（将用户带到第二页）
2) This one is optional but is there a way to reset the default (as chosen by the swatch selection) of the button that I click to simply change the text, and not resize & shrink the box? 2）这是可选的，但是有没有办法重置我单击的按钮的默认值（由色板选择所选择），以简单地更改文本，而不调整大小和缩小框？ The suggestion here did not work: 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>
1 个解决方案
解决方案1
1 已采纳 2013-05-30 17:35:03
There are several ways to accomplish what you're asking for. 有几种方法可以满足您的要求。 Here's one idea. 这是一个主意。
First add both properties as data- attributes to the li s in your Listview. 首先将这两个属性作为data- attribute添加到Listview中的li 。 Like so: 像这样：
<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 -->
This will make swapping the values easier later. 这将使以后更容易交换值。 Now add some radio selectors: 现在添加一些单选按钮：
<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>
And finally, we need some JavaScript to tie it all together when you select a radio: 最后，当您选择收音机时，我们需要一些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
});
});
You can see a working demo here: http://jsfiddle.net/5cpKW/4/ 您可以在此处查看有效的演示： http : //jsfiddle.net/5cpKW/4/
The only I couldn't figure out was getting the results to update if you select a new radio after some are displayed, but I've never used jQuery Mobile before, so perhaps someone else can chime in on that point. 我唯一不知道的是，如果在显示某些广播后选择了一个新的广播电台，则要更新结果，但是我以前从未使用过jQuery Mobile，因此也许有人可以对此提出建议。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.