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