jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了主菜单上没有链接的jQuery Mobile List项目分割按钮大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我有一个带有一堆< li>的jQuery Mobile网站.带有拆分图标(data-icon =“grid”).

是否可以将列表项的左侧未包含在href中,但是将按钮保留在右侧?

例:http://jsfiddle.net/SSQMB/

我试过了

$(SELEction).contents().unwrap();

这工作,它删除了所请求的链接(并修复了我在下面概述的问题),但它打破了一大堆布局和样式列表项.

我试解决的问题是:

>我有大约100< li>页面上的项目
>每个< li>可能有< SELEct>其中的元素有5-10个选项.
>使用< SELEct>的认jQuery Mobile样式时一切正常
>然而,这对性能有重大影响. iPhone 4S难以滚动,iPad 2几乎不可用(Android实际上更好一次,但仍然不完美)
>在< SELEct>上放置data-role =“none”元素使页面再次快速可行
>但是,它会在桌面浏览器(特别是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; }

然后,设置< 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();

和Voila:http://jsfiddle.net/Zwhs3/2/

大佬总结

以上是大佬教程为你收集整理的主菜单上没有链接的jQuery Mobile List项目分割按钮全部内容,希望文章能够帮你解决主菜单上没有链接的jQuery Mobile List项目分割按钮所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。