私は HTML5 と CSS (Jquery Mobile を使用) を学び始めていますが、この分野のバックグラウンドがあまりないため、非常に簡単なことに行き詰まっています。リストビューにチェックボックスを入れたい（liごとに）。そのようにするにはどうすればよいですか: http://a4.mzstatic.com/us/r1000/095/Purple/ff/1d/33/mzl.ecpvufek.320x480-75.jpg (つまり、チェックボックスは他のテキストとすべての左側にあります)。
現時点では、私のコードは次のとおり です。 :(
私を助けてくれませんか？回答ありがとうございます。私の英語で申し訳ありません^^
すてきな一日を。
オリビエ。
編集 ：
ようやく右側部分の左側にチェックボックスを追加することに成功しました。私は自分の例を更新しました:http: //jsfiddle.net/AzN7S/2/ それが正しい方法かどうかはわかりませんが、うまくいきます:)
私は古い答えを再考し、特にmvc 4フレームワークに合わせて問題を修正しましたが、クライアント側はすべて同じです。
それでは始めましょう:
html だけが必要な場合は、ここで取得できます。
このリンクは、3 つの部分のチェックボックス リスト、チェックボックス、アイテムへのリンク、および情報ポップアップへのリンクです。
チェックボックスとアイコンを使用してリストビューを操作するためのjsfiddleへのリンクは次のとおりです
iv 最後にいくつかの 2 つのパーツ リスト ボックスと 1 つのパーツを追加しました。質問がある場合はお知らせください。
コントローラーの場合は、次のことを行う必要があります。
[Authorize]
public ActionResult Items(string act,
string tab, string search_by, string search, string sort, string sortdir, int? page, int? resultsPerPage,
List<int> selected, int? projectId, string username)
{
if (act == "AddItemsToUser")
{
string response;
if (selected != null)
{
response = "Project Items Added:";
foreach (var item in selected)
{
try
{
if (username != null)
if (UserItemRecordModel.InsertUserItem(username, item, null, null, 0, null, null))
response += item + " - inserted, ";
}
catch (Exception ex)
{
response += item + " - " + ex.Message + ", ";
}
}
response.TrimEnd(' ', ',');
}
else
{
response = "No Items Were Selected!";
}
return Json(response, JsonRequestBehavior.AllowGet);
}
else if (act == "AddItemsToProject")
{
string response;
if (selected != null)
{
response = "Project Items Added:";
foreach (var item in selected)
{
try
{
if (projectId != null)
if (ProjectItemRecordModel.InsertProjectItem(projectId.ToString(), item, null, null, 0, null, null))
response += item + " - inserted, ";
}
catch (Exception ex)
{
response += item + " - " + ex.Message + ", ";
}
}
response.TrimEnd(' ', ',');
}
else
{
response = "No Items Were Selected!";
}
return Json(response, JsonRequestBehavior.AllowGet);
}
else if (act == "RemoveItemsFromUser")
{
string response;
if (selected != null)
{
response = "Project Items Removed:";
foreach (var item in selected)
{
try
{
if (UserItemRecordModel.DeleteUserItem(username, item))
response += item + " - deleted, ";
}
catch (Exception ex)
{
response += item + " - " + ex.Message + ", ";
}
}
response.TrimEnd(' ', ',');
}
else
{
response = "No Items Were Selected!";
}
return Json(response, JsonRequestBehavior.AllowGet);
}
else if (act == "RemoveItemsFromProject")
{
string response;
if (selected != null)
{
response = "Project Items Removed:";
foreach (var item in selected)
{
if (ProjectItemRecordModel.DeleteProjectItem(projectId.ToString(), item))
response += item + " - deleted, ";
}
response.TrimEnd(' ', ',');
}
else
{
response = "No Items Were Selected!";
}
return Json(response, JsonRequestBehavior.AllowGet);
}
List<ItemRecordModel> items = ItemRecordModel.GetSensors(search_by, search, sort, sortdir);
return View("Items", new AdminRecordsViewModel() { Records = items });
}
これは私の古い答えでした:
私はいくつかのものを変更する必要があるあなたの問題を解決しましたが、次のようにチェックボックスで検索可能なリストビューを実現できます:
jsfiddle の例:
basic: 基本的な jsfiddle バージョン
より良いバージョン: より良いバージョン
here is a listView of checkBox and a search bar. you should add this js code
$("li").on("tap",function(){
$(this).find('label').click();
}); in the button somewhere in your page.
the js code crete a click on the check box when the user clicks on the li
<div class="ui-content" data-role="main">
<div data-role="main" class="ui-content">
<h2 class="settings-h2">Select category</h2>
<h5 lass="settings-h2">You will get articles on those subject,you can change your selection at any time.</h5>
<form class="ui-filterable">
<input id="myFilter-settings" data-type="search">
</form>
<ul data-role="listview" id="ScheduleList-settings" data-filter="true" data-input="#myFilter-settings" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-icon="false">
<form>
<fieldset class="myhover" data-role="controlgroup" data-iconpos="right" >
<input type="checkbox" name="checkbox-h-6a" id="checkbox-Sports" >
<label for="checkbox-Sports">Sports</label>
</fieldset>
</form>
</li>
<li data-icon="false" >
<form>
<fieldset data-role="controlgroup" data-iconpos="right" >
<input type="checkbox" name="checkbox-h-6a" id="ccheckbox-Food" >
<label for="ccheckbox-Food">Food</label>
</fieldset>
</form>
</li>
<li data-icon="false" >
<form>
<fieldset data-role="controlgroup" data-iconpos="right" >
<input type="checkbox" name="checkbox-h-6a" id="checkbox-Politics" >
<label for="checkbox-Politics">Politics </label>
</fieldset>
</form>
</li>
<li data-icon="false" >
<form>
<fieldset data-role="controlgroup" data-iconpos="right" >
<input type="checkbox" name="checkbox-h-6a" id="checkbox-Fashion" >
<label for="checkbox-Fashion">Fashion</label>
</fieldset>
</form>
</li>
</ul>
</div>
</div>