在 jquery mobile listview 中添加更多数据属性以拆分图标

Posted 2023-05-09

【中文标题】在 jquery mobile listview 中添加更多数据属性以拆分图标

【英文标题】：add more data-attributes to split icon in jquery mobile listview

【发布时间】：2013-05-09 23:34:25

【问题描述】：

我正在一个 webapp 中工作，我正在使用 jquery mobile 的 listview...

这里，只想自定义每个列表行右侧的拆分图标...

但是想通过使用data-split-shadow="false"和data-split-stroke="false"等数据属性来做到这一点，这样图标上的阴影和白色圆圈笔划将不会显示，而只会显示灰色背景和图标。 ..

我已经附上了一个演示...... http://jsfiddle.net/FkGz8/

就这样，

<ul class="ui-icon-alt" data-role="listview" data-inset="false" data-split-icon="gear" data-split-theme="d" data-theme="d" data-split-stroke="false" data-split-shadow="false">

可以吗？

【问题讨论】：

抱歉，您能澄清一下您的问题吗？您想使用其他图标并且不想在图标上有阴影和白色圆圈笔触（但不使用属性）？

不，我想要相同的图标或默认的 jqm 图标，并且不希望图标上有阴影和白色圆圈笔触...

您需要告诉我什么是 data-split-stroke="false"？是图标周围的白色圆圈吗？

这个...i.imgur.com/eNC1E5d.jpg

那我的例子应该就是它了。请注意，它是为适应您的示例中的列表视图而构建的。因此，如果您有另一个具有不同类或 id 的列表视图，则从我的 css 中删除 .ui-icon-alt 并将其替换为正确的类或 id。

【参考方案1】：

工作示例：http://jsfiddle.net/Gajotres/rQtmC/

CSS：

.ui-icon-alt li .ui-li-link-alt .ui-btn-inner .ui-btn 
    width: 18px !important;
    height: 18px !important;    
    border-width: 0 !important;


.ui-icon-alt li .ui-li-link-alt .ui-btn-inner .ui-btn, .ui-icon-alt li .ui-li-link-alt .ui-btn-inner .ui-btn .ui-btn-inner .ui-icon 
    box-shadow: 0 0 0 !important;