1 | <!DOCTYPE html> |
---|
2 | <html> |
---|
3 | <head> |
---|
4 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
---|
5 | <title>jQuery UI Example Page</title> |
---|
6 | <link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> |
---|
7 | |
---|
8 | <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> |
---|
9 | |
---|
10 | <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> |
---|
11 | |
---|
12 | <script type="text/javascript"> |
---|
13 | $(function() { |
---|
14 | |
---|
15 | |
---|
16 | // Dialog |
---|
17 | $('#dialog').dialog({ |
---|
18 | autoOpen: false, |
---|
19 | modal: true, |
---|
20 | width: 600, |
---|
21 | buttons: { |
---|
22 | "Ok": function() { |
---|
23 | $(this).dialog("close"); |
---|
24 | }, |
---|
25 | "Cancel": function() { |
---|
26 | $(this).dialog("close"); |
---|
27 | } |
---|
28 | } |
---|
29 | }); |
---|
30 | |
---|
31 | // Dialog Link |
---|
32 | $('#dialog_link').click(function() { |
---|
33 | $('#dialog').dialog('open'); |
---|
34 | return false; |
---|
35 | }); |
---|
36 | |
---|
37 | }); |
---|
38 | </script> |
---|
39 | |
---|
40 | <style type="text/css"> |
---|
41 | /*demo page css*/body |
---|
42 | { |
---|
43 | font: 62.5% "Trebuchet MS" , sans-serif; |
---|
44 | margin: 50px; |
---|
45 | } |
---|
46 | .demoHeaders |
---|
47 | { |
---|
48 | margin-top: 2em; |
---|
49 | } |
---|
50 | #dialog_link |
---|
51 | { |
---|
52 | padding: .4em 1em .4em 20px; |
---|
53 | text-decoration: none; |
---|
54 | position: relative; |
---|
55 | } |
---|
56 | #dialog_link span.ui-icon |
---|
57 | { |
---|
58 | margin: 0 5px 0 0; |
---|
59 | position: absolute; |
---|
60 | left: .2em; |
---|
61 | top: 50%; |
---|
62 | margin-top: -8px; |
---|
63 | } |
---|
64 | ul#icons |
---|
65 | { |
---|
66 | margin: 0; |
---|
67 | padding: 0; |
---|
68 | } |
---|
69 | ul#icons li |
---|
70 | { |
---|
71 | margin: 2px; |
---|
72 | position: relative; |
---|
73 | padding: 4px 0; |
---|
74 | cursor: pointer; |
---|
75 | float: left; |
---|
76 | list-style: none; |
---|
77 | } |
---|
78 | ul#icons span.ui-icon |
---|
79 | { |
---|
80 | float: left; |
---|
81 | margin: 0 4px; |
---|
82 | } |
---|
83 | </style> |
---|
84 | </head> |
---|
85 | <body> |
---|
86 | <h1> |
---|
87 | Welcome to jQuery UI!</h1> |
---|
88 | <p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;"> |
---|
89 | This page demonstrates the widgets you downloaded using the theme you selected in |
---|
90 | the download builder. We've included and linked to minified versions of <a href="js/jquery-1.3.2.min.js"> |
---|
91 | jQuery</a>, your personalized copy of <a href="js/jquery-ui-1.7.2.custom.min.js">jQuery |
---|
92 | UI (js/jquery-ui-1.7.2.custom.min.js)</a>, and <a href="css/smoothness/jquery-ui-1.7.2.custom.css"> |
---|
93 | css/smoothness/jquery-ui-1.7.2.custom.css</a> which imports the entire |
---|
94 | jQuery UI CSS Framework. You can choose to link a subset of the CSS Framework depending |
---|
95 | on your needs. |
---|
96 | </p> |
---|
97 | <p style="font-size: 1.2em; line-height: 1.5; margin: 1em 0; width: 50%;"> |
---|
98 | You've downloaded components and a theme that are compatible with jQuery 1.3+. Please |
---|
99 | make sure you are using jQuery 1.3+ in your production environment. <em>If you need |
---|
100 | jQuery UI components that work with an earlier version of jQuery, you can choose |
---|
101 | an older version in the <a href="http://jqueryui.com/download">jQuery UI download builder</a>.</em></p> |
---|
102 | <p style="font-weight: bold; margin: 2em 0 1em; font-size: 1.3em;"> |
---|
103 | YOUR COMPONENTS:</p> |
---|
104 | |
---|
105 | <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller--> |
---|
106 | <h2 class="demoHeaders"> |
---|
107 | Dialog</h2> |
---|
108 | <p> |
---|
109 | <a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"> |
---|
110 | </span>Open Dialog</a></p> |
---|
111 | |
---|
112 | <!-- ui-dialog --> |
---|
113 | <div id="dialog" title="Dialog Title"> |
---|
114 | <p> |
---|
115 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor |
---|
116 | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud |
---|
117 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
---|
118 | </p> |
---|
119 | <form> |
---|
120 | <input type="radio" id="radio1" name="radio1" value="1" />1 |
---|
121 | <input type="radio" id="radio1" name="radio1" value="2" />2 |
---|
122 | <input type="radio" id="radio1" name="radio1" value="3" />3 |
---|
123 | <br /> |
---|
124 | <input type="checkbox" id="checkbox1" value="1" />1 |
---|
125 | <input type="checkbox" id="checkbox2" value="2" />2 |
---|
126 | <input type="checkbox" id="checkbox3" value="3" />3 |
---|
127 | </form> |
---|
128 | </div> |
---|
129 | </body> |
---|
130 | </html> |
---|