How to use jQuery themes to style your site_问答_开发者

How to use jQuery themes to style your site

开发者 https://www.devze.com 2022-12-21 05:17 出处：网络

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

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</t开发者_Python百科itle>
  </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.

Getting buttons and links to style the same on various different platforms is difficult, perhaps, impossible unless you're willing to live with "close, but not quite." My strategy is to use javascript to replace buttons with links that perform the button action via javascript, in addition to getting "close, but not quite" with CSS. Check out this article from the Filament Group for ideas on how to do this with jQuery. Once you have "close, but not quite" done in as many browsers as possible, then add the javascript to replace the buttons with links and get completely consistent styling for people who have javascript enabled.

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

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.