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列表項目拆分按鈕主要項目上沒有鏈接

回答

相關問題