jQuery Mobile列表项目拆分按钮主要项目上没有链接

比方说，我有一个具有分割图标（data-icon="grid"）的一堆<li>的jQuery Mobile网站。jQuery Mobile列表项目拆分按钮主要项目上没有链接

是否有可能让列表项的左侧不包含在href中，但将按钮保留在右侧？

enter image description here

我曾尝试：

$(selection).contents().unwrap();

而这个工作，它会删除所要求的链接（和修复我下面列出的问题），但它会在列表项上打破一大堆布局和样式。

我试图解决的问题是这样的：

我有一个页面
每个<li>大约100 <li>商品可能已在它<select>元素5-10选项。
当使用默认的jQuery Mobile样式的<select>一切工作正常
但是，这有一个主要的性能影响。一个iPhone 4S的斗争中滚动，一个iPad 2几乎是unusuable（Android是一次真正好转，但还不够完善）
在<select>元素把data-role="none"使得页面快速，可行的再次
然而，它打破在桌面浏览器（Firefox特别），因为当您单击以选择在<select>从<select>后面的链接项，被触发，<select>箱被取消

任何想法？

来源

2012-05-30 Mark Henderson

嗯，我试图找出一些东西，但不幸的是找不到替代方式，除非你写你自己的HTML-jQuery-css代码只是为了这个.. – 2012-05-30 12:35:56

@Efthimis-谢谢:)如果我找到解决方案，我会发布在这里。我怀疑复制CSS样式可能是唯一的解决方案。 –

@Efthimis - 我找到了一个办法。这不是太优雅，但它的工作原理。在下面发布答案。 –

好的，在钻研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; }

然后，设置了<li>这样：

<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();

and Voila：http://jsfiddle.net/Zwhs3/2/

来源

2012-05-31 03:05:08

我也尝试过类似的CSS样式，但失败了）无论如何都不错。：d – 2012-05-31 06:28:07

jQuery Mobile列表项目拆分按钮主要项目上没有链接

回答

相关问题