Jquery mobile 中在列表项上使用单选按钮

时间:2021-08-23 20:25:15

 

无意中发现可以在li上实现开关按钮

http://jsfiddle.net/Gajotres/pzfr2/

 

 

 

 

 

 

Jquery mobile 中在列表项上使用单选按钮

 

 

触类旁通,终于实现了在li上增加单选按钮组

 

  1. @model QGateMobile.Areas.WG32.Models.SystemConfigModel
  2. @{
  3.     ViewBag.Title = "系统配置";
  4. }
  5. @section Header {
  6.     @Html.ActionLink("后退", "Index", "Home", null, new { data_icon = "arrow-l", data_rel = "back" })
  7.     <h1>@ViewBag.Title</h1>
  8. }
  9. <style type="text/css">
  10.     #raido-container {
  11.         position: relative;
  12.         float: right;
  13.         margin-top: -10px !important;
  14.     }
  15.         #raido-container .ui-slider {
  16.             margin-top: -50px !important;
  17.         }
  18. </style>
  19. <p>
  20.     在此完成系统配置
  21. </p>
  22. <ul data-role="listview" data-inset="true" style="list-style-type: none;">
  23.     <li>@Ajax.ActionLink("数据库更新", "UpdateDB", "Home", new AjaxOptions())</li>
  24. </ul>
  25. <ul data-role="listview" data-inset="true" style="list-style-type: none;">
  26.     <li data-role="list-divider">反潜回设置</li>
  27.     <li data-role="fieldcontain">
  28.         <p>
  29.             反潜(同一控制器上多门反潜)
  30.         </p>
  31.         <p>
  32.             网段(同网段多控制器共享反潜)
  33.         </p>
  34.         <p>
  35.             区域(同区域多控制器共享反潜)
  36.         </p>
  37.         @{
  38.             string[] ss = new string[4];
  39.             if (Model.AntiBack == 0)
  40.             {
  41.                 ss[0] = "checked=\"checked\"";
  42.             }
  43.             ss[Model.AntiBackBroadcast] = "checked=\"checked\"";
  44.         }
  45.         <div data-role="controlgroup" data-type="horizontal">
  46.             <input type="" @Html.Raw(ss[0]) />
  47.             <label for="antibackRadio1">禁用</label>
  48.             <input type="" @Html.Raw(ss[1]) />
  49.             <label for="antibackRadio2">反潜</label>
  50.             <input type="" @Html.Raw(ss[2]) />
  51.             <label for="antibackRadio3">网段</label>
  52.             <input type="" @Html.Raw(ss[3]) />
  53.             <label for="antibackRadio4">区域</label>
  54.         </div>
  55.         @*<input type="checkbox" data-role="flipswitch" name="anti" id="anti" checked="">*@
  56.     </li>
  57. </ul>
  58. @Scripts.Render("~/bundles/anti")

 

 

 

Jquery mobile 中在列表项上使用单选按钮