http://jqueryui.com/demos/dialog/#modal-form
1. when downloading the zip archive, you can select a theme from the gallery, or design yourself version.
After unziping, you will find three folders and one html file:
And all stuff under development-bundle is for development and test, there are also manuals for the libiary, but in this case, I don't need them. So I created a new folder named 'jqui' under my web document root, and copied js and css and index.html into it.
2. When I open the html in my browser through my Appache, I can't see the new theme. Anyway, I goto the demo page of JQueryUI:http://jqueryui.com/demos/dialog/modal-form.html, and saved it to 'jqui'. And browse it in my browser, still couldn't see the theme that supposed to do, in fact, that is right, due to the linkages to the CSS files are wrong.
There are two link tags:
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.5.1.js"></script>
<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<script src="../../ui/jquery.effects.core.js"></script>
<link rel="stylesheet" href="../demos.css">
<style> remove the first one, and change the second one to:
<link rel="stylesheet" href="css/redmond/jquery-ui-1.8.14.custom.css">And then, it showed the correct theme:
3. But still not perfect, the font was a little bit scary. Use Google Chrome its build-in function 'inspect element' to see the font applied at the JQueryUI website,
Open the CSS file-jquery-ui-1.8.14.custom.css, and change the line:
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1em; }to
.ui-widget { font-family: Verdana, Arial, sans-serif; font-size: 1.1em; }Finally and eventually, we see what we wanna to see.
references:
4726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
