First on a screenshot, the effect is good:
First, the introduction of jquery theme Theme
A CSS link referencing a jquery theme in the head http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/base/ JQUERY-UI.CSS also has many other different themes: base, black-tie, Blitzer, Cupertino, Dark-hive, Dot-luv, eggplant, excite-bike, flick, Hot-sneaks, humanity, Le-frog, Mint-choc, Overcast, Pepper-grinder, Redmond, smoothness, South-street, start, sunny, Swan Ky-purse, Trontastic, Ui-darkness, Ui-lightness, Vader. You can switch different topics by replacing the base in the above link with the subject name.
Ii. using the jquery theme theme
Add class to the part you want to decorate, such as: <a class= "Ui-state-default ui-corner-all" href= "#" >nothing ' s Gonna change I love for you</a > represents the default UI, and the Corner-all represents a sleek four-corner.
Third, increase the effect of hover
Here you need to use the jquery script. First, the jquery library is introduced into the head
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" ></ Script>
1.3 represents the latest version in 1.3, now 1.3.2.
then handwriting script;
Copy Code code as follows:
$ (function () {$ ('. Ui-state-default '). Hover (function () {$ (this). addclass (' Ui-state-hover ');},function () {$ (this). Removeclass (' Ui-state-hover ');});
This enables the mouse to move over the top is the effect of changing the style.
Iv. Use theme switcher to replace the theme in the foreground
First introduce the library
Copy Code code as follows:
<script type= "Text/javascript" src= "http://jqueryui.com/themeroller/themeswitchertool/" ></script>
, and then you can add layers <div id= "switcher" > Theme switching features anywhere on the page ... </div>, I am accustomed to this switch wikget into the APDIV layer, easy to move the appropriate location. Finally, the script activates this layer:
$ (' #switcher '). Themeswitcher ();
v. Make the Web page remember your theme
Each time you change the theme, jquery writes cookies, so that the page remembers its theme, only the cookies are extracted and the CSS for the page is refreshed.
Write the script.
Copy Code code as follows:
$ (function () {if (theme==null) updatecss ("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/ Jquery-ui.css "); else Updatecss (" http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/"+theme+"/ Jquery-ui.css ");}
function Updatecss (locstr) {var csslink=$ (' <link href= ' ' +locstr+ ' "type=" Text/css "rel=" Stylesheet "class=" Ui-theme "/>"); $ ("Head"). Append (Csslink); if ($ ("Link.ui-theme"). Size () >3) {$ ("Link.ui-theme:first"). Remove ( );}}
The last page code is probably like this:
Copy Code code as follows:
<?xml version= "1.0" encoding= "UTF-8"?>
<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "UTF-8"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
#switcher {
Position:absolute;
left:564px;
top:20px;
}
</style>
<script src= "Http://www.google.com/jsapi" ></script>
<script type= "Text/javascript" >google.load ("jquery", "1.3.2"); Google.load ("jQueryUI", "1.7.2"); function OnLoad () {$ (' #switcher '). HTML (""); var theme=$.cookie (' Jquery-ui-theme '); $ (function () {if (theme==null) updatecss (" Http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css "); else Updatecss (" http:// Ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/"+theme+"/jquery-ui.css "); $ (function () {$ ('. Ui-state-default '). Hover (function () {$ (this). addclass (' Ui-state-hover ');},function () {$ (this). Removeclass (' Ui-state-hover ');}); $ ("#pic2"). Hide (); $ (' #switcher '). Themeswitcher (); Google.setonloadcallback (OnLoad); function Updatecss (locstr) {var csslink=$ (' <link href= ' ' +locstr+ ' "type=" text/ CSS "rel=" Stylesheet "class=" Ui-theme "/>"); $ ("Head"). Append (Csslink); if ($ ("Link.ui-theme"). Size () >3) {$ (" Link.ui-theme:first "). Remove ();}}
</script>
<script type= "Text/javascript" src= "http://jqueryui.com/themeroller/themeswitchertool/" ></script>
</script>
<title></title>
<body>
<div id= "switcher" > Theme switching function loaded in ...</div>
<p><a class= "Ui-state-default ui-corner-all" href= "http://mee-moo.googlecode.com/svn/trunk/resource/" Music/nothinggcmlfu.mp3 ">nothing ' Gonna Change my love for you</a></p>
</body>
