假设我有一个 jQuery Mobile 网站,其中有一堆 <li>带有分割图标 ( data-icon="grid" )。
列表项的左侧是否可以不包含在 href 中但将按钮保留在右侧?
我已经尝试过:
$(selection).contents().unwrap();
这有效,它按要求删除了链接(并修复了我在下面概述的问题),但它破坏了列表项上的一大堆布局和样式。
我试图解决的问题是:
- 我有大约 100
<li>页面上的项目 - 每个
<li>可能有<select>其中包含 5-10 个选项的元素。 - 使用
<select>的默认 jQuery Mobile 样式时一切正常 - 但是,这会对性能造成重大影响。 iPhone 4S 很难滚动,而 iPad 2 几乎无法使用(Android 实际上曾经更好,但仍然不完美)
- 推杆
data-role="none"关于<select>元素使页面再次快速且可用 - 但是,它在桌面浏览器(尤其是 Firefox)上会崩溃,因为当您单击
<select>中的项目时,它会崩溃。 ,后面的链接<select>被触发并且<select>盒子已取消
有什么想法吗?
请您参考如下方法:
好的,在研究了现有的 jQuery Mobile CSS 后,我找到了确定 <li> 格式的样式。 。我将它们复制到一个单独的样式表中,并将它们应用于 <span>而不是<a> :
.ui-li .ui-btn-text span.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.ui-li .ui-btn-inner span.ui-link-inherit { padding: .7em 15px .7em 15px; display: block; }
Then, set up the <li> as such:
<li data-icon="grid">
<a href="#" onclick="return false;" class="leftLink">
<span class="ui-link-inherit">
.... content ....
</span>
</a><a href="#"> ... </a>
</li>
然后是一些 jQuery:
$('.leftLink').parent().parent().parent().removeClass('ui-btn');
$('.leftLink').contents().unwrap();
