如何让jQuery mobile listview使用复选框和图标

如何让jQuery mobile listview使用复选框和图标,jquery,css,mobile,jquery-mobile,Jquery,Css,Mobile,Jquery Mobile,我试图获得一个类似于jQuery mobile listview中所附图像的布局。我目前正在使用星图上的class.ui li图标,但我没有将其放在右边,即使我用自己的css属性覆盖了定位 当然,我可以通过位置迫使星星在右边:绝对;但这会在不同的平台上以及横向与纵向模式之间造成问题 在jQuery mobile中获得如下布局的最佳方法是什么 图片:查看以下链接: 浏览列表视图文档: 我重新思考了我以前的答案,并重新处理了这个问题,特别是为了适应MVC4框架,但客户端还是一样的。 让

我试图获得一个类似于jQuery mobile listview中所附图像的布局。我目前正在使用星图上的class.ui li图标,但我没有将其放在右边,即使我用自己的css属性覆盖了定位

当然,我可以通过位置迫使星星在右边:绝对;但这会在不同的平台上以及横向与纵向模式之间造成问题

在jQuery mobile中获得如下布局的最佳方法是什么

图片:

查看以下链接:

浏览列表视图文档:


我重新思考了我以前的答案,并重新处理了这个问题,特别是为了适应MVC4框架,但客户端还是一样的。
让我们开始:
如果您只需要html,可以在此处获取
此链接指向由三部分组成的复选框列表、复选框、项目链接和信息弹出窗口:

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 });
}
[授权]
公共动作结果项(字符串动作,
字符串选项卡、字符串搜索依据、字符串搜索、字符串排序、字符串排序、int?page、int?resultsPerPage、,
选定列表,int?projectId,字符串用户名)
{
如果(act==“AddItemsToUser”)
{
字符串响应;
如果(已选择!=null)
{
response=“添加的项目项:”;
foreach(所选中的var项目)
{
尝试
{
如果(用户名!=null)
if(UserItemRecordModel.InsertUserItem(用户名、项、null、null、0、null、null))
响应+=项目+“-插入”;
}
捕获(例外情况除外)
{
响应+=项目+“-”+例如消息+“,”;
}
}
回答:TrimEnd(“,”);
}
其他的
{
response=“未选择任何项目!”;
}
返回Json(response,JsonRequestBehavior.AllowGet);
}
否则,如果(act==“AddItemsToProject”)
{
字符串响应;
如果(已选择!=null)
{
response=“添加的项目项:”;
foreach(所选中的var项目)
{
尝试
{
if(projectId!=null)
if(ProjectItemRecordModel.InsertProjectItem(projectId.ToString(),item,null,null,0,null,null))
响应+=项目+“-插入”;
}
捕获(例外情况除外)
{
响应+=项目+“-”+例如消息+“,”;
}
}
回答:TrimEnd(“,”);
}
其他的
{
response=“未选择任何项目!”;
}
返回Json(response,JsonRequestBehavior.AllowGet);
}
否则如果(act==“RemoveItemsFromUser”)
{
字符串响应;
如果(已选择!=null)
{
response=“项目项已删除:”;
foreach(所选中的var项目)
{
尝试
{
if(UserItemRecordModel.DeleteUserItem(用户名,项))
响应+=项目+“-已删除”;
}
捕获(例外情况除外)
{
响应+=项目+“-”+例如消息+“,”;
}
}
回答:TrimEnd(“,”);
}
其他的
{
response=“未选择任何项目!”;
}
返回Json(response,JsonRequestBehavior.AllowGet);
}
else if(act==“从项目中移除项目”)
{
字符串响应;
如果(已选择!=null)
{
response=“项目项已删除:”;
foreach(所选中的var项目)
{
if(ProjectItemRecordModel.DeleteProjectItem(projectId.ToString(),item))
响应+=项目+“-已删除”;
}
回答:TrimEnd(“,”);
}
其他的
{
response=“未选择任何项目!”;
}
返回Json(response,JsonRequestBehavior.AllowGet);
}
列表项=ItemRecordModel.GetSensors(按搜索、搜索、排序、排序);
返回视图(“项目”,新AdminRecordsViewModel(){Records=Items});
}
这是我以前的回答:
我解决了您的问题您需要更改一些内容,但您可以通过复选框实现可搜索列表视图,如下所示:

JSFIDLE示例:


基本:

更好的版本:


感谢您的提示,我现在使用拆分按钮列表,但我不知道如何使用我自己的图像来进行拆分按钮。我是否必须覆盖css,或者是否有其他(更好的)方法?@Pat我建议发布另一个问题,其中包含一些您尝试过的示例代码,以及哪些不起作用。也有帮助