Bug Tracker

Ticket #2654: ui.dialog.html

File ui.dialog.html, 2.7 KB (added by anmic, 14 years ago)
Line 
1<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4<head>
5<meta http-equiv="Content-Language" content="en" />
6<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7<title>Dialog Demo</title>
8<link rel="stylesheet" href="../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
9<link rel="stylesheet" href="css/style.css" type="text/css" />
10
11<script src="../jquery-1.2.3.min.js" type="text/javascript"></script>
12<script type="text/javascript" src="../jquery.dimensions.js"></script>
13<script type="text/javascript" src="../ui.dialog.js"></script>
14<script type="text/javascript" src="../ui.mouse.js"></script>
15<script type="text/javascript" src="../ui.resizable.js"></script>
16<script type="text/javascript" src="../ui.draggable.js"></script>
17
18<style type="text/css">
19.hover { background: #000; }
20//#example1, #example2, #example3 { display: none; }
21</style>
22</head>
23<body class="flora">
24
25<h2>1. Default, no options</h2>
26<div class="playground">
27        <div id="example1">Hello, World!</div>
28        <br />
29        <button onclick="$('#example1').dialog();$(this).hide().next().show();">Create Dialog</button>
30        <button onclick="$('#example1').dialog('open')" style="display:none;">Open</button>
31        <button onclick="$('#example1').dialog('close')">Close</button>
32</div>
33
34<h2>2. Title, Width &amp; Height</h2>
35<div class="playground">
36        <div id="example2" title="dialog title">I have a title and I'm big</div>
37        <br />
38        <button onclick="$('#example2').dialog({width: 600, height: 300});$(this).hide().next().show();">Create Dialog</button>
39        <button onclick="$('#example2').dialog('open')" style="display:none;">Open</button>
40        <button onclick="$('#example2').dialog('close')">Close</button>
41</div>
42
43<h2>3. Buttons</h2>
44<div class="playground">
45        <div id="example3">Please select an option below.</div>
46        <br />
47        <button onclick="$('#example3').dialog({
48                title: 'Are you sure?',
49                modal: true,
50                overlay: {
51      'backgroundColor': 'black',
52      'opacity': 0.7
53    }
54                buttons: {
55                        'Yes': function() { $(this).dialog('close'); alert('You clicked \'Yes\''); },
56                        'No': function() { $(this).dialog('close'); alert('You clicked \'No\''); }
57                },
58                draggable: true,
59                resizable: true
60        });$(this).hide().next().show();">Create Dialog</button>
61        <button onclick="$('#example3').dialog('open')" style="display:none;">Open</button>
62        <button onclick="$('#example3').dialog('close')">Close</button>
63</div>
64
65<script type="text/javascript">
66if(!window.console) {
67        window.console = {
68                log: function() {
69                        alert(arguments[0]);   
70                }
71        }       
72}
73
74</script>
75</body>
76</html>