如何將鏈接列表更改爲jQuery UI主題按鈕列表？

我有一個這樣的名單：如何將鏈接列表更改爲jQuery UI主題按鈕列表？

<ul id="linkList"> 
    <li> 
    <a href="/C2D">NotesA</a> 
    </li 
    <li> 
    <a href="/C2E">NotesB</a> 
    </li> 
    <li> 
    <a href="/C2F">NotesC</a> 
    </li> 
</ul>

我想要做的就是轉變成三個jQuery UI的主題按鈕，但我想的按鈕是鏈接，所以希望不高的按鈕。此外，我不想列出每個新李旁邊的小圓圈。

喜歡的東西，你可以在這裏看到在菜單的例子：

Filament group menu example

我怎麼能做到這一點，仍然使按鈕像使用jQuery UI的聯繫？

來源

2012-02-27 Jessica

我想什麼做的是轉變成三個jQuery UI的這個主題按鈕

$(".linkList").find("a").button();

上面的代碼應該加載頁面後執行，有可能到$(document).ready()回調：

$(document).ready(function() { 
    $(".linkList").find("a").button(); 
});

但我想按鈕是鏈接，所以希望不高的埠ttons

你不需要做任何額外的事情，它們被保留爲常規鏈接。按鈕高度由jQueryUI的樣式定義：打開樣式表（通常它的名字是jQuery的UI-1.8.17.custom.css），並找到如下定義：

/*button text element */ 
.ui-button .ui-button-text { display: block; line-height: 1.4; } 
.ui-button-text-only .ui-button-text { padding: .4em 1em; }

減少行高度和垂直填充（目前.4em），使其不那麼高。不建議更改jQueryUI樣式表，因此請將已更改的定義置於您的自定義樣式表中，並使用!important聲明。

此外，我想不顯示與每個新鋰的旁邊的小圓圈名單。

投入到CSS文件：

.linkList { list-style-type: none; }

來源

2012-02-27 07:31:13

由於阿爾喬姆。你的代碼運行良好。但按鈕非常高，它們之間沒有垂直空間。如果可能的話，我會喜歡與我展示的鏈接幾乎相同的尺寸。有沒有一種好方法可以讓按鈕不那麼高，並在兩者之間增加一些空的空間？ – Jessica 2012-02-27 07:42:48

添加到您的CSS：'.linkedList a.ui-button {margin-bottom：10px;高度：自動}' – jgauffin 2012-02-27 07:47:45

請檢查更新 – 2012-02-27 07:49:02

如何將鏈接列表更改爲jQuery UI主題按鈕列表？

回答

相關問題