带有Jquery移动设备的ListView中的复选框

Question

我开始学习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/ 正如你可以看到复选框位于文本上方,即使是带有浮点数的div:在第二个li中左边,它也不起作用:(

你能帮我吗 ？非常感谢你的回答,对不起我的英语^^

祝你有美好的一天.

奥利维尔.

编辑:

我终于成功地在右侧部分的左侧添加了一个复选框.我更新了我的例子:http://jsfiddle.net/AzN7S/2/ 我不知道它是否是正确的方法,但它的工作原理:)

Answer 1

我重新考虑了我的旧答案并重新解决了问题,特别是为了适应mvc 4框架,但客户端都是一样的.
所以让我们开始:
如果你只是想要html你可以在这里获得它
这个链接是一个3部分的复选框列表,复选框,项目的链接和信息弹出:

这是jsfiddle工作列表视图的链接,带有复选框AND图标

iv最后添加了2个部分列表框和单个部分,如有任何问题请告诉我.

现在,对于控制器,您需要做的就是

[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示例:

基本: 基本的jsfiddle版本

更好的版本: 更好的版本

jquery移动列表视图与复选框和图标或图像