Ticket #4589: dialog_issue.html

File dialog_issue.html, 4.6 KB (added by kharpoh, 11 years ago)
Line 
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>