大学生向けのモバイル Web ページをデザインしています。簡単にするために、各学生には一意の ID と追加のフィールドが割り当てられます。これらのフィールドはどちらも文字列として扱うことができます。一意の ID は一意ですが、2 番目のフィールドは一意である可能性がありますが、一意であるとは限りません。以下のコードには、学生情報のデータベースを模倣するサンプル データがあります。
Web ページが開き、これらのフィールドのいずれかを入力するための検索フィールドがあります。一意の ID またはその他のフィールドに入力すると、検索フィールドは保存されている要素を照会し、一致する要素を表示します。これらのエントリのいずれかをクリックすると、2 番目のページが表示され、両方のフィールドが表示されます (コードは表示する必要はありません)。この 2 ページ目には、最初のページに戻るための戻るボタンがあります。
2 つの質問があります。
1) まず。最初のページ (検索バーがあるページ) の上部に 2 つのボタンがあります。これらはラジオ ボタンで、一度に 1 つのみ選択できます。これらのボタンのいずれかを押すと、検索バーに表示される値が変更されます。たとえば、「一意の ID」ラジオ ボックスを選択した場合、一意の ID のみが検索ボックスに表示されるようにします。他のフィールドについても同様です。これは、リストビュー内の要素のテキストを (自然に) 変更することによって実現されますが、落とし穴があります。リストビュー内の要素の 1 つのテキスト (リストビュー内の要素の下のスクリプト タグ内) を変更すると、html リンクが失われます (およびスペーシング - 新しいボックスはより小さく、よりコンパクトになります)。ボタンへのリンクを再追加して、以前と同じように動作するようにするにはどうすればよいですか (ユーザーを 2 番目のページに移動させます)。
2)これはオプションですが、クリックしてテキストを変更し、ボックスのサイズを変更して縮小するのではなく、ボタンのデフォルト(スウォッチの選択によって選択されたもの)をリセットする方法はありますか? ここでの提案はうまくいきませんでした:項目のテキストを変更すると、モバイル ナビゲーション バーのサイズが変更されます
<!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>