|
1 |
| -<!DOCTYPE html> |
2 |
| -<html> |
3 |
| -<head> |
4 |
| - <meta charset="UTF-8" /> |
5 |
| - <title></title> |
6 |
| - <link rel="stylesheet" href="css/dialog.css" /> |
7 |
| - <script src="js/jquery.js"></script> |
8 |
| - <script src="js/dialog.js"></script> |
9 |
| - <script> |
10 |
| - $(function() { |
11 |
| - //dialog.setup({width:600/*, height:400*/}); |
12 |
| - dialog.setup({overlay:false/*, minWidth:500*/}); |
13 |
| - |
14 |
| - /*dialog.ok({title:'新提示', message:'hello, worldddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />'}, function() { |
15 |
| - dialog.tips('callback'); |
16 |
| - });*/ |
17 |
| - |
18 |
| - /*dialog.confirm('确定要刷新页面吗?', function() { |
19 |
| - dialog.tips('Yes Clicked!'); |
20 |
| - }, function() { |
21 |
| - dialog.error('No Clicked!'); |
22 |
| - });*/ |
23 |
| - |
24 |
| - // submit, load, error, beforeSubmit, beforeSerialize, close |
25 |
| - /*dialog.form('form demo', '/html/form.php', function(json) { |
26 |
| - dialog.tips('form submit'); |
27 |
| - //console.info(json); |
28 |
| - }, function() { |
29 |
| - dialog.tips('form load'); |
30 |
| - }, function() { |
31 |
| - dialog.error('form error'); |
32 |
| - }, function() { |
33 |
| - dialog.tips('form beforeSubmit'); |
34 |
| - }, function(beforeSerialize) { |
35 |
| - dialog.tips('form beforeSerialize'); |
36 |
| - }, function() { |
37 |
| - dialog.tips('form close'); |
38 |
| - });*/ |
39 |
| - |
40 |
| - dialog.button({ |
41 |
| - title: '添加成功', |
42 |
| - message: '<a href="http://www.baidu.com/" target="_blank">http://www.baidu.com/</a>' |
43 |
| - }, [{ |
44 |
| - text: '确定', |
45 |
| - callback: function() { |
46 |
| - dialog.tips('hello, world'); |
47 |
| - return false; // prevent close button dialog(default is close) |
48 |
| - } |
49 |
| - }, { |
50 |
| - text: '取消', |
51 |
| - callback: function() { |
52 |
| - dialog.tips('Orz...'); |
53 |
| - } |
54 |
| - }]); |
55 |
| - |
56 |
| - //dialog.show('<img src="http://cn.bing.com/fd/hpk2/TheEx_ZH-CN1218152540.jpg" width="500" />'); |
57 |
| - dialog.show({ |
58 |
| - title: '测试', |
59 |
| - url: '/html/iframe.html', |
60 |
| - width:400, |
61 |
| - height:300 |
62 |
| - }, undefined, undefined, function() { |
63 |
| - dialog.ok('iframe.html close'); |
64 |
| - }); |
65 |
| - dialog.show({ |
66 |
| - title: '百度', |
67 |
| - url: 'http://www.baidu.com', |
68 |
| - width:800, |
69 |
| - height:500 |
70 |
| - }); |
71 |
| - }); |
72 |
| - </script> |
73 |
| -</head> |
74 |
| -<body style="background:#FFF; color:#000; font-size:20em; text-align:center;"> |
75 |
| - <div> |
76 |
| - h |
77 |
| - <select> |
78 |
| - <option>hello</option> |
79 |
| - <option>hello</option> |
80 |
| - <option>hello</option> |
81 |
| - <option>hello</option> |
82 |
| - <option>hello</option> |
83 |
| - <option>hello</option> |
84 |
| - </select> |
85 |
| - hello, world |
86 |
| - </div> |
87 |
| -</body> |
88 |
| -</html> |
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8" /> |
| 5 | + <title>dialog 是一个豆瓣风格的 jQuery 对话框,旨在提供一个轻量、简洁的原生对话框替换工具</title> |
| 6 | + <meta name="description" content="dialog 是一个豆瓣风格的 jQuery 对话框,旨在提供一个轻量、简洁的原生对话框替换工具。" /> |
| 7 | + <meta name="keywords" content="jquery,dialog,javascript,micate,对话框,豆瓣" /> |
| 8 | + <link rel="stylesheet" type="text/css" href="css/dialog.css" /> |
| 9 | + <style type="text/css"> |
| 10 | + * { |
| 11 | + margin: 0; |
| 12 | + padding: 0; |
| 13 | + } |
| 14 | + body { |
| 15 | + background: #FFF; |
| 16 | + font: 12px/162% Arial,Helvetica,sans-serif; |
| 17 | + } |
| 18 | + p { |
| 19 | + margin: 0 0 10px; |
| 20 | + } |
| 21 | + img { |
| 22 | + border: 0; |
| 23 | + } |
| 24 | + .doc { |
| 25 | + width: 650px; |
| 26 | + margin: 100px auto 50px; |
| 27 | + } |
| 28 | + .mod-code pre { |
| 29 | + margin: 15px 0; |
| 30 | + padding: 5px 5px 5px 10px; |
| 31 | + border-left: 5px solid #CCC; |
| 32 | + word-wrap: break-word; |
| 33 | + white-space: pre-wrap; |
| 34 | + } |
| 35 | + .mod-banner { |
| 36 | + position: fixed; |
| 37 | + z-index: 99998; |
| 38 | + _position: absolute; |
| 39 | + width: 100%; |
| 40 | + height: 55px; |
| 41 | + padding-top: 20px; |
| 42 | + left: 0; |
| 43 | + top: 0; |
| 44 | + text-align: center; |
| 45 | + background: #333; |
| 46 | + color: #FFF; |
| 47 | + } |
| 48 | + .mod-banner p { |
| 49 | + margin-top: 5px; |
| 50 | + } |
| 51 | + .doc h2 { |
| 52 | + margin-top: 25px; |
| 53 | + } |
| 54 | + #fork { |
| 55 | + position: fixed; |
| 56 | + _position: absolute; |
| 57 | + right: 0; |
| 58 | + top: 0; |
| 59 | + z-index: 99999; |
| 60 | + } |
| 61 | + </style> |
| 62 | +</head> |
| 63 | +<body> |
| 64 | +<div class="doc"> |
| 65 | + <div class="mod-banner"> |
| 66 | + <h1>dialog</h1> |
| 67 | + <p>dialog 是一个豆瓣风格的 jQuery 对话框,旨在提供一个轻量、简洁的原生对话框替换工具。</p> |
| 68 | + </div> |
| 69 | + |
| 70 | + <h2>演示 Demo</h2> |
| 71 | + <div class="mod-demo"> |
| 72 | + <a href="javascript:;" onclick="dialog.ok('dialog.ok();');">dialog.ok();</a> |
| 73 | + <a href="javascript:;" onclick="dialog.ok('dialog.ok();');">dialog.ok();</a> |
| 74 | + <a href="javascript:;" onclick="dialog.ok('dialog.ok();');">dialog.ok();</a> |
| 75 | + <a href="javascript:;" onclick="dialog.ok('dialog.ok();');">dialog.ok();</a> |
| 76 | + <a href="javascript:;" onclick="dialog.ok('dialog.ok();');">dialog.ok();</a> |
| 77 | + <a href="javascript:;" onclick="dialog.ok('dialog.ok();');">dialog.ok();</a> |
| 78 | + <a href="javascript:;" onclick="dialog.ok('dialog.ok();');">dialog.ok();</a> |
| 79 | + </div> |
| 80 | + |
| 81 | + <h2>载入 Init</h2> |
| 82 | + <div class="mod-code"> |
| 83 | + <pre> |
| 84 | +<link rel="stylesheet" type="text/css" href="css/dialog.css" /> |
| 85 | +<script src="js/jquery.js"></script> |
| 86 | +<script src="js/dialog.js"></script> |
| 87 | + </pre> |
| 88 | + </div> |
| 89 | + |
| 90 | + <h2>配置 Config</h2> |
| 91 | + <div class="mod-code"> |
| 92 | + <pre> |
| 93 | + |
| 94 | + </pre> |
| 95 | + </div> |
| 96 | + |
| 97 | + <h2>用法 Usage</h2> |
| 98 | + <div class="mod-code"> |
| 99 | + <pre> |
| 100 | +$(function() { |
| 101 | + |
| 102 | +//dialog.setup({width:600/*, height:400*/}); |
| 103 | +dialog.setup({overlay:false/*, minWidth:500*/}); |
| 104 | + |
| 105 | +/*dialog.ok({title:'新提示', message:'hello, worldddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />hello, world<br />'}, function() { |
| 106 | + dialog.tips('callback'); |
| 107 | +});*/ |
| 108 | + |
| 109 | +/*dialog.confirm('确定要刷新页面吗?', function() { |
| 110 | + dialog.tips('Yes Clicked!'); |
| 111 | +}, function() { |
| 112 | + dialog.error('No Clicked!'); |
| 113 | +});*/ |
| 114 | + |
| 115 | +// submit, load, error, beforeSubmit, beforeSerialize, close |
| 116 | +/*dialog.form('form demo', 'demo/html/form.php', function(json) { |
| 117 | + dialog.tips('form submit'); |
| 118 | + //console.info(json); |
| 119 | +}, function() { |
| 120 | + dialog.tips('form load'); |
| 121 | +}, function() { |
| 122 | + dialog.error('form error'); |
| 123 | +}, function() { |
| 124 | + dialog.tips('form beforeSubmit'); |
| 125 | +}, function(beforeSerialize) { |
| 126 | + dialog.tips('form beforeSerialize'); |
| 127 | +}, function() { |
| 128 | + dialog.tips('form close'); |
| 129 | +});*/ |
| 130 | + |
| 131 | +dialog.button({ |
| 132 | + title: '添加成功', |
| 133 | + message: '<a href="http://www.baidu.com/" target="_blank">http://www.baidu.com/</a>' |
| 134 | +}, [{ |
| 135 | + text: '确定', |
| 136 | + callback: function() { |
| 137 | + dialog.tips('hello, world'); |
| 138 | + return false; // prevent close button dialog(default is close) |
| 139 | + } |
| 140 | +}, { |
| 141 | + text: '取消', |
| 142 | + callback: function() { |
| 143 | + dialog.tips('Orz...'); |
| 144 | + } |
| 145 | +}]); |
| 146 | + |
| 147 | +//dialog.show('<img src="http://cn.bing.com/fd/hpk2/TheEx_ZH-CN1218152540.jpg" width="500" />'); |
| 148 | +dialog.show({ |
| 149 | + title: '测试', |
| 150 | + url: 'demo/html/iframe.html', |
| 151 | + width:400, |
| 152 | + height:300 |
| 153 | +}, undefined, undefined, function() { |
| 154 | + dialog.ok('iframe.html close'); |
| 155 | +}); |
| 156 | +dialog.show({ |
| 157 | + title: '百度', |
| 158 | + url: 'http://www.baidu.com', |
| 159 | + width:800, |
| 160 | + height:500 |
| 161 | +}); |
| 162 | +}); |
| 163 | + </pre> |
| 164 | + </div> |
| 165 | + |
| 166 | + <h2>下载 Download</h2> |
| 167 | + <p><br /><a href="https://github.com/micate/dialog">代码托管在 Github 上</a>,<a href="https://github.com/micate/dialog/zipball/master">直接下载</a>。如遇到问题欢迎 <a href="https://github.com/micate/dialog/issues">提交 issue</a>。</p> |
| 168 | +</div> |
| 169 | +<a id="fork" href="https://github.com/micate/dialog"> |
| 170 | + <img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"> |
| 171 | +</a> |
| 172 | +<script src="js/jquery.js"></script> |
| 173 | +<script src="js/dialog.js"></script> |
| 174 | + |
| 175 | +<!-- /* analytics code begin --> |
| 176 | +<script type="text/javascript"> |
| 177 | +var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); |
| 178 | +document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffb8afea1e70c3ca0813914e87535eab8' type='text/javascript'%3E%3C/script%3E")); |
| 179 | +</script> |
| 180 | +<script type="text/javascript"> |
| 181 | +var _gaq = _gaq || []; |
| 182 | +_gaq.push(['_setAccount','UA-7715988-5']); |
| 183 | +_gaq.push(['_trackPageview']); |
| 184 | +(function() { |
| 185 | + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
| 186 | + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
| 187 | + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
| 188 | +})(); |
| 189 | +</script> |
| 190 | +<!-- analytics code */ --> |
| 191 | +</body> |
| 192 | +</html> |
0 commit comments