如何将链接列表更改为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主题按钮列表？

回答

相关问题