动态切换 jQuery 移动列表视图的拆分按钮

Posted 2023-05-09

【中文标题】动态切换 jQuery 移动列表视图的拆分按钮

【英文标题】：Dynamically toggle split buttons for jQuery mobile listviews

【发布时间】：2013-03-19 22:49:27

【问题描述】：

我正在使用 jquery mobile 构建一个移动应用程序。我正在使用 listview 控件，到目前为止它工作正常。 但是，我想显示一个拆分按钮（http://view.jquerymobile.com/1.3.0/docs/widgets/listviews/#list-split），但仅在单击某个按钮时才显示。用例是启用/禁用“删除模式”，以便在单击工具栏上的按钮后，删除图标才会出现在列表元素旁边。我有一个或多或少可行的解决方案，如下所示：

$('#editmode').live('click', function(e)
e.preventDefault();
$('.deletelog').toggle();
$('.deletelog:hidden').closest('li').removeClass("ui-li-has-alt");
$('.deletelog:visible').closest('li').addClass("ui-li-has-alt");
); 

问题是，对于第一个页面加载，即使按钮默认隐藏：

<a href="#" class="deletelog" style="display:none">Delete</a>

我仍然需要添加数据属性 data-split-icon 和 data-split-theme，这使得第一个页面加载看起来有点像，为按钮保留了空间。从上面的代码可以看出，这是因为“data-split-theme”类。所以如果我切换它，那么它会在第二次切换时消失。

有没有更好的方法来实现这种切换拆分按钮？

谢谢！

【参考方案1】：

您可以通过添加一个类并使用 jQuery 操作它来显示和隐藏拆分按钮。

展示

$('.delete').css('display', 'compact');

隐藏

$('.delete').css('display', 'none');

看看这个小提琴http://jsfiddle.net/mayooresan/2XxJx/

更新

这种情况下你需要更新ui-li-aside的css

$('.ui-li-aside ').css('margin-right', '50px');

检查这个现场小提琴http://jsfiddle.net/mayooresan/2XxJx/3/

【讨论】：

谢谢！实际上，我在第一篇文章中并不清楚我的问题。我用两张截图更新了它。问题是jquery mobile在使用data-split-icon数据属性时会增加一定的间距。