如何使用 jQuery 主题来设计您的网站

发布于 2024-08-22 03:29:43 字数 969 浏览 6 评论 0原文

我一直在尝试使用 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>

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

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

原文

I've been trying to setup a very simple example using jQuery themes. I haven't been able to get it to work. I want to use the same themes to format some links and buttons so that they blend in when I bring dialogs and others. So far I have this very simple example which does not render correctly:

<!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>

I'm using the sunny theme and the rendering produces different fonts for the button and the link. An extra vertical line shows at the right of the button and the icon on the link does not even show inside the box. Don't know what I'm missing.

The hover changes that usually appear over buttons don't work either.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

兮颜 2024-08-29 03:29:43

让按钮和链接在各种不同的平台上具有相同的样式是很困难的，也许是不可能的，除非您愿意接受“接近，但不完全”。我的策略是使用 javascript 将按钮替换为通过 javascript 执行按钮操作的链接，此外还使用 CSS 实现“接近，但不完全”。请查看 Filament Group 的这篇文章，了解如何使用 jQuery 执行此操作。一旦您在尽可能多的浏览器中完成了“接近，但不完全”，然后添加 javascript 以用链接替换按钮，并为启用了 javascript 的人获得完全一致的样式。

回复收藏 0 原文

不乱于心 2024-08-29 03:29:43

  <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'); })

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

try that to fix it

as for the hover question, you need to apply hover manually,

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

回复收藏 0 原文

咽泪装欢 2024-08-29 03:29:43

仅供参考，如果您有自定义主题，则不需要包含 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>

不确定如果您包含顶部有主题的基础会发生什么。

FYI, if you have a custom theme, you don't need to include the base.css or any widget js files.
You only need these three lines:

<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>

Not sure what would happen if you included base with a theme on top.

回复收藏 0 原文

~没有更多了~