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

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/

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