Question

我一直在尝试使用jQuery主题设置一个非常简单的示例。我无法让它发挥作用。我想使用相同的主题来格式化一些链接和按钮，以便在我带来对话框和其他时将它们融合在一起。到目前为止，我有一个非常简单的例子，它无法正确呈现：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/base/ui.base.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/sunny/jquery-ui-1.7.2.custom.css" type="text/css" media="all">
    <title>jQuery Themes</title>
  </head>
  <body>
    <button type="button" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Submit</button> 
    <a href="#" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Submit</a>
  </body>
</html>

我正在使用阳光明媚的主题，渲染会为按钮和链接生成不同的字体。按钮右侧显示一条额外的垂直线，链接上的图标甚至不显示在框内。不知道我错过了什么。

通常出现在按钮上的悬停更改也不起作用。

Answer 1

在各种不同平台上获取相同样式的按钮和链接很难，也许是不可能的，除非你愿意接近“接近但不完全”。我的策略是使用javascript替换按钮，通过javascript执行按钮操作的链接，以及使用CSS“接近但不完全”。查看来自Filament Group的article，了解如何使用jQuery执行此操作。一旦你在尽可能多的浏览器中“关闭，但不完全”完成，然后添加javascript以用链接替换按钮，并为启用了javascript的人获得完全一致的样式。

Answer 2

  <a href="#" style="display: block;" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Submit</a>

尝试修复它

关于悬停问题，您需要手动应用悬停

$('.ui-state-default').live('mouseover',function () { $(this).addClass('ui-state-hover'); }).live('mouseout',function () { $(this).removeClass('ui-state-hover'); })

Answer 3

仅供参考，如果您有自定义主题，则不需要包含base.css或任何小部件js文件。你只需要这三行：

<link type="text/css" href="css/themename/jquery-ui-1.8.7.custom.css" rel="Stylesheet"/>    
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>

不确定如果你将基础主题放在最上面会发生什么。

如何使用jQuery主题来设置您的网站样式

3 个答案: