Question

我正在使用jquery-ui。按钮支持看起来不错，程式化按钮很好。唯一的缺点是看起来按钮的渲染是在javascript中完成的，所以有时在页面加载时会有一个暂停，你会看到所有按钮从原生按钮变为jquery-ui样式按钮。

是否有任何“按钮制造商”可以为按钮生成css，我可以将其应用于div以获得相同的效果？想到也许我自己做了按钮样式，浏览器会在页面显示给用户之前做好准备，避免那种尴尬的停顿。

由于

Answer 1

一些事情 - 首先，如果您只是这样做来创建静态按钮（读取：不是复选框或单选按钮的替换），您始终可以使用JavaScript生成的HTML而无需实际调用它们上的.button函数。在调用button函数之后检查元素时，您会注意到HTML已稍微更改，并且元素中添加了几个类：

<a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="#" role="button">
    <span class="ui-button-text">Button Content</span>
</a>

不幸的是，生成的jQuery UI CSS不包含:hover和:active伪类，但我们可以轻松解决这个问题。在CSS中搜索ui-state-hover和ui-state-active，并手动添加适当的伪类。

或者，您也可以自己滚动，例如我在下面的示例中所做的事情。它复制了在应用jQuery UI样式时删除的类中原始按钮的字体和背景颜色：

http://www.jsfiddle.net/ZkWP8/

在该示例中，我们使用了一个themeroller jQuery UI主题，而没有上面提到的CSS修改。执行.button延迟几秒钟，以模拟加载脚本和图像时的网络延迟。

Answer 2

这称为无格式内容Flash（FOUC）。可以通过将display:none;添加到按钮所在的元素，然后在.show()上使用$(document).ready()来解决此问题。这将确保您的按钮始终显示样式。

有一个缺点，那就是如果用户禁用javascript，您的网站不会优雅地降级。

Answer 3

jQuery UI在元素中添加了一个“ui-button”类（或者在复选框和单选按钮的情况下添加了元素的标签）。所以你可以使用它在jQuery UI作用于它之前用CSS隐藏元素，并在脚本运行后显示它。

示例，如果您的按钮有一个“按钮”类：

.button {
    display: none;
}

.button.ui-button {
    display: inline-block;
}

Answer 4

我有同样的问题，我通过找到执行jquery按钮样式的东西的最佳位置来解决 - 而不是在现成的处理程序中。最佳位置我的意思是在按钮之后和产生延迟的东西之前的html代码中的位置，当然还没有准备好（所以确实在准备好的事件之前，与时间点有关，而不是html地方）。

下面是我们通常作为准备处理程序放置的代码，但现在我们把它放在最佳位置

<script type="text/javascript">
$("input[type=submit], a, input[type=button], button").button();
    });
</script>

除了确保一切都将正确设置（其他按钮放置在后面以及我们忘记了）之外，我们也可以准备好执行它。

Answer 5

我使用div覆盖整个身体，直到应用所有样式。事情是jquery-ui-ified之后，我隐藏了div。 See here.

覆盖身体的div使用以下样式：

.load-mask 
{
    position:absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 10000;
    background-color: #DFE8F6;
    display:block;
}

Answer 6

对此的答案已经过时了，所以我想我会分享我的更新解决方案。

它是专为jQuery 1.10.4设计的（默认布局可能会在未来版本中更改）
它支持：悬停和：活动效果，这样可以在没有任何javascript的情况下实现相同的效果

不透明的背景： http://jsfiddle.net/spinal007/FntBG/

.button{
    cursor:pointer;
    display:inline-block;

    line-height:1.4;
    margin: 0 0.1em 0 0;
    padding: 0.3em 1em 0.4em;
    border: 1px solid #ccc;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 0 1px #FFF inset;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 0 1px #FFFFFF inset;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 0 1px #FFF inset;

    color: #666;
    background: #EFEFEF;

    text-decoration: none;
    text-align: center;
    font-family: Segoe UI, Trebuchet MS, Tahoma, Arial, sans-serif;
    font-size:1.1em;
}
.button:hover{
    background-color:#f9f9f9;   
    border-color:#999999;
    color: #212121;
}
.button:active{
    background-color:#71B800;   
    border-color:#64A300;
    color: #ffffff;
}

这是CSS3 Gradient背景的另一种选择： http://jsfiddle.net/spinal007/pVVs3/ （你可能想要这个，取决于你的主题！）

jquery-ui按钮有时候渲染速度慢，css替代？

6 个答案: