9575338b6e005dc9d9ac9c5fa4432af20af3012e.svn-base 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title></title>
  6. <!--框架必需start-->
  7. <script type="text/javascript" src="../../libs/js/jquery.js"></script>
  8. <script type="text/javascript" src="../../libs/js/language/cn.js"></script>
  9. <script type="text/javascript" src="../../libs/js/framework.js"></script>
  10. <link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
  11. <link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
  12. <link rel="stylesheet" type="text/css" id="customSkin"/>
  13. <!--框架必需end-->
  14. </head>
  15. <body>
  16. <div style="display:none" id="content">这是指定容器的内容。</div>
  17. <div class="box1" style="width: 800px;"><div class="box_topcenter"><div class="box_topleft"><div class="box_topright"></div></div></div><div class="box_middlecenter"><div class="box_middleleft"><div class="box_middleright"><div class="boxContent" style="overflow: visible;">
  18. <fieldset>
  19. <legend>1、提示</legend>
  20. <input type="button" class="button" value="提示信息" onclick='top.Dialog.alert("这里是提示信息|标题",function(){alert("点击确定后的处理")});'/>
  21. <input type="button" class="button" value="提示自动关闭" onclick='top.Dialog.alert("这里是提示信息",null,null,null,2)'/>
  22. <input type="button" class="button" value="询问信息" onclick='top.Dialog.confirm("这里是询问信息",function(){top.Dialog.alert("点击了确定")},function(){top.Dialog.alert("点击了取消")});'/>
  23. </fieldset>
  24. <div class="height_15"></div>
  25. <fieldset>
  26. <legend>2、基本功能</legend>
  27. 弹出窗口参数见文档。
  28. <div class="height_10"></div>
  29. <input type="button" class="button" value="普通窗口" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"普通窗口"});'/>
  30. <input type="button" class="button" value="自定义宽高 " onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"自定义宽高 ",Width:800,Height:600});'/>
  31. <input type="button" class="button" value="带说明栏的窗口" onclick='top.Dialog.open({MessageTitle:"这是标题",Message:"这是标题说明文字",Title:"带说明栏窗口",URL:"../../sample_html/popup/window-content1.html"});'/>
  32. <input type="button" class="button" value="无遮罩窗口" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"无遮罩窗口",Modal:false});'/>
  33. <input type="button" class="button" value="最大化与最小化" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"最大化与最小化",ShowMaxButton:true,ShowMinButton:true});'/>
  34. <div class="height_5"></div>
  35. <input type="button" class="button" value="初始时最大化1" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Width:"100",Height:"100",Title:"全屏窗口"});'/>
  36. <input type="button" class="button" value="初始时最大化2" onclick='open11()'/>
  37. </fieldset>
  38. <div class="height_15"></div>
  39. <fieldset>
  40. <legend>3、额外功能</legend>
  41. <input type="button" class="button" value="非iframe弹窗(简单内容)" onclick="openHtml();"/>
  42. <input type="button" class="button" value="指定弹出位置" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Top:"100%",Left:"100%",Modal:false,Width:240,Height:120,Title:"指定弹出位置"});'/>
  43. <input type="button" class="button" value="自动关闭" onclick='top.Dialog.open({InnerHtml:"5秒后自动关闭",AutoClose:5,Title:"自动关闭"});'/>
  44. </fieldset>
  45. <div class="height_15"></div>
  46. <fieldset>
  47. <legend>4、事件与方法</legend>
  48. <input type="button" class="button" value="确定、取消、最大化、最小化、关闭事件" onclick='open1()'/>
  49. <input type="button" class="button" value="更改按钮" onclick="open3()"/>
  50. <input type="button" class="button" value="创建新按钮" onclick="open4()"/>
  51. </fieldset>
  52. <div class="height_15"></div>
  53. <fieldset>
  54. <legend>5、父页面刷新</legend>
  55. 方法1:
  56. <div class="height_5"></div>
  57. <input type="button" class="button" value="提交表单并刷新父页" onclick="open5()"/>
  58. <div class="height_5"></div>
  59. 此方法适合表单同步提交(页面跳转)的情况。
  60. <div class="height_20"></div>
  61. 方法2:使用按钮栏:<input type="button" class="button" value="手动关闭窗口并刷新页面1" onclick="open6()"/>
  62. <div class="height_20"></div>
  63. 方法3:不用按钮栏:<input type="button" class="button" value="手动关闭窗口并刷新页面2" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content3.html",Title:"父窗口刷新"});'/>
  64. <div class="height_5"></div>
  65. 方法2和方法3适合表单异步提交或者无需表单提交的情况。
  66. </fieldset>
  67. <div class="height_15"></div>
  68. <fieldset>
  69. <legend>6、手动关闭窗口</legend>
  70. 方法1:使用按钮栏
  71. <div class="height_5"></div>
  72. <input type="button" class="button" value="手动关闭窗口方法1" onclick="open7()"/>
  73. <div class="height_20"></div>
  74. 方法2:不使用按钮栏
  75. <div class="height_5"></div>
  76. <input type="button" class="button" value="手动关闭窗口方法2" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content4.html",Title:"手动关闭窗口方法2"});'/>
  77. <div class="height_20"></div>
  78. 方法3:参见上面的“父页面刷新”的方法1。
  79. <div class="height_20"></div>
  80. 方法4:适合关闭特定的窗口。例如:
  81. <div class="height_5"></div>
  82. <input type="button" class="button" value="打开第二个窗口关闭前一个窗口" onclick="open10()"/>
  83. </fieldset>
  84. <div class="height_15"></div>
  85. <fieldset>
  86. <legend>7、传值</legend>
  87. <input type="button" class="button" value="本页面获取窗口页的值" onclick="open8()"/> <br/> <br/>
  88. <input type="button" class="button" value="本页面调用窗口页方法" onclick="open9()"/> <br/> <br/>
  89. <input type="button" class="button" value="窗口将值传给本页" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content9.html",Title:"窗口将值传给页面"});'/> <span id="span1">窗口的值将传到这里</span> <br/> <br/>
  90. <input type="button" class="button" value="窗口之间进行传值" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content5.html",ID:"a1",Width:400,Height:300,Title:"第一个窗口"});'/>
  91. </fieldset>
  92. <div class="height_15"></div>
  93. <fieldset>
  94. <legend>8、改变窗口样式</legend>
  95. <input type="button" class="button" value="简洁风格" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"简洁风格",Style:"simple",Modal:false,Width:350,Height:220});'/> <br/><br/>
  96. <input type="button" class="button" value="简洁提示" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"简洁提示",Style:"simpleTip",Modal:false,Width:350,Height:220});'/> <br/><br/>
  97. <input type="button" class="button" value="阴影提示" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"阴影提示",Style:"shadowTip",Modal:false,Width:330,Height:150,Top:"85%",Left:140});'/>(阴影提示窗口宽度至少要设为330) <br/><br/>
  98. 完全自定义外观:<br/>
  99. <input type="button" class="button" value="仿百度贴吧新特性介绍" onclick="open12()"/> <br/>
  100. </fieldset>
  101. <div class="height_15"></div>
  102. <fieldset>
  103. <legend>9、任务栏管理</legend>
  104. <input type="button" class="button" value="窗口1" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",ID:"window1",Title:"窗口1",ShowMaxButton:true,ShowMinButton:true,MinToTask:true});'/>
  105. <input type="button" class="button" value="窗口2" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",ID:"window2",Title:"窗口2",ShowMaxButton:true,ShowMinButton:true,MinToTask:true});'/>
  106. <input type="button" class="button" value="窗口3" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",ID:"window3",Title:"窗口标题文字非常之长窗口文字非常之长",ShowMaxButton:true,ShowMinButton:true,MinToTask:true});'/>
  107. </fieldset>
  108. <div class="height_15"></div>
  109. <fieldset>
  110. <legend>10、自定义图标</legend>
  111. <input type="button" class="button" value="与图标库结合" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"与图标库结合",IconClass:"icon_list",Modal:false});'/>
  112. <input type="button" class="button" value="自定义图标路径" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"自定义图标路径",IconSrc:"../../libs/images/icons/setting.png",Modal:false});'/>
  113. <input type="button" class="button" value="无图标" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"无图标",IconClass:"",Modal:false});'/>
  114. </fieldset>
  115. <div class="height_15"></div>
  116. </div></div></div></div><div class="box_bottomcenter"><div class="box_bottomleft"><div class="box_bottomright"></div></div></div></div>
  117. <script type="text/javascript">
  118. $(function(){
  119. top.Dialog.close()
  120. })
  121. function handler1(){
  122. top.Dialog.alert("点击了确定")
  123. }
  124. function open1(){
  125. var diag = new top.Dialog();
  126. diag.Title = "按钮点击事件";
  127. diag.ShowMaxButton=true;
  128. diag.ShowMinButton=true;
  129. diag.OKEvent = function(){
  130. alert("点击了确定")
  131. diag.close();
  132. };
  133. diag.CancelEvent = function(){
  134. alert("点击了取消");
  135. diag.close();
  136. };
  137. diag.MaxEvent = function(){
  138. alert("点击了最大化");
  139. };
  140. diag.MinEvent = function(){
  141. alert("点击了最小化");
  142. };
  143. diag.DecreaseEvent = function(){
  144. alert("点击了还原");
  145. };
  146. diag.URL = "../../sample_html/popup/window-content1.html";
  147. diag.ShowButtonRow=true;
  148. diag.show();
  149. }
  150. function open3(){
  151. var diag = new top.Dialog();
  152. diag.Title = "更改按钮";
  153. diag.URL = "../../sample_html/popup/window-content1.html";
  154. diag.ShowButtonRow=true;
  155. diag.OkButtonText=" 提 交 ";
  156. diag.show();
  157. }
  158. function open4(){
  159. var diag = new top.Dialog();
  160. diag.Title = "创建其它按钮";
  161. diag.URL = "../../sample_html/popup/window-content1.html";
  162. diag.show();
  163. diag.addButton("next"," 按 钮 ",function(){
  164. top.Dialog.alert("点击了创建的按钮")
  165. })
  166. }
  167. function open5(){
  168. var diag = new top.Dialog();
  169. diag.Title = "提交表单并刷新父页";
  170. diag.URL = "../../sample_html/popup/window-content2.html";
  171. diag.show();
  172. }
  173. function open6(){
  174. var diag = new top.Dialog();
  175. diag.Title = "手动关闭窗口并刷新页面";
  176. diag.URL = "javascript:void(document.write('点击确定按钮'))";
  177. diag.ShowButtonRow=true;
  178. diag.OkButtonText=" 确 定 ";
  179. diag.OKEvent = function(){
  180. top.Dialog.alert("成功提交",function(){window.location.reload()})
  181. diag.close();
  182. };
  183. diag.show();
  184. }
  185. function open7(){
  186. var diag = new top.Dialog();
  187. diag.Title = "手动关闭窗口";
  188. diag.URL = "../../sample_html/popup/window-content1.html";
  189. diag.ShowButtonRow=true;
  190. diag.ShowOkButton=false;
  191. diag.CancelButtonText=" 关 闭 ";
  192. diag.show();
  193. }
  194. function open8(){
  195. var diag = new top.Dialog();
  196. diag.Title = "得到输入值";
  197. diag.URL = "../../sample_html/popup/window-content8.html";
  198. diag.OKEvent = function(){
  199. var inputValue = diag.innerFrame.contentWindow.document.getElementById('a').value;
  200. top.Dialog.alert(inputValue)
  201. diag.close();
  202. };
  203. diag.show();
  204. }
  205. function open9(){
  206. var diag = new top.Dialog();
  207. diag.Title = "调用窗口页方法";
  208. diag.URL = "../../sample_html/popup/window-content10.html";
  209. diag.OKEvent = function(){
  210. var inputValue = diag.innerFrame.contentWindow.mytest();
  211. diag.close();
  212. };
  213. diag.show();
  214. }
  215. var firstDialog;
  216. function open10(){
  217. firstDialog = new top.Dialog();
  218. firstDialog.Title = "打开第二个窗口关闭本窗口";
  219. firstDialog.URL = "../../sample_html/popup/window-content11.html";
  220. firstDialog.show();
  221. }
  222. function closeFirstDialog(){
  223. firstDialog.close();
  224. }
  225. function open11(){
  226. var diag = new top.Dialog();
  227. diag.Title = "初始时最大化";
  228. diag.URL = "../../sample_html/popup/window-content1.html";
  229. diag.ShowMaxButton=true;
  230. diag.ShowMinButton=true;
  231. diag.show();
  232. diag.max();
  233. }
  234. function open12(){
  235. //打开窗口
  236. var diag = new Dialog();
  237. diag.Style="custom";
  238. diag.InnerHtml= "";
  239. diag.ID="c2";
  240. diag.Width=386;
  241. diag.Height=193;
  242. diag.show();
  243. //构建自定义内容
  244. var $content=$('<div style="position:relative;"><img src="../../libs/images/demo/popup1.png"/></div>');
  245. var $next=$('<img src="../../libs/images/icons/click.gif" class="hand" style="width:100px;height:30px;position:absolute;top:140px;left:120px;"/>');
  246. var $close=$('<img src="../../libs/images/icons/click.gif" class="hand" style="width:30px;height:30px;position:absolute;top:0px;left:280px;"/>');
  247. $content.prepend($next);
  248. $content.prepend($close);
  249. //内容添加到窗口
  250. var $container=$(document.getElementById("_Container_c2"));
  251. $container.append($content);
  252. //点击关闭
  253. $close.click(function(){
  254. diag.close();
  255. });
  256. //点击下一步
  257. $next.click(function(){
  258. //关闭当前
  259. diag.close();
  260. //打开新窗口
  261. var diag2 = new Dialog();
  262. diag2.Style="custom";
  263. diag2.InnerHtml= "";
  264. diag2.ID="c3";
  265. diag2.Width=467;
  266. diag2.Height=399;
  267. diag2.show();
  268. //构建自定义内容
  269. var $content2=$('<div style="position:relative;"><img src="../../libs/images/demo/popup2.png"/></div>');
  270. var $next2=$('<img src="../../libs/images/icons/click.gif" class="hand" style="width:100px;height:30px;position:absolute;top:355px;left:130px;"/>');
  271. var $close2=$('<img src="../../libs/images/icons/click.gif" class="hand" style="width:30px;height:30px;position:absolute;top:218px;left:310px;"/>');
  272. $content2.prepend($next2);
  273. $content2.prepend($close2);
  274. //内容添加到新窗口
  275. var $container2=$(document.getElementById("_Container_c3"));
  276. $container2.append($content2);
  277. //点击关闭
  278. $close2.click(function(){
  279. diag2.close();
  280. });
  281. $next2.click(function(){
  282. diag2.close();
  283. });
  284. });
  285. }
  286. function openHtml(){
  287. top.Dialog.open({
  288. InnerHtml: $("#content").html(),//这里还可以直接写html代码
  289. Title:"普通窗口"
  290. });
  291. }
  292. var nodes1 = [
  293. { id:1, parentId:0, name:"中国(默认展开)", open: true},
  294. { id:11, parentId:1, name:"北京"},
  295. { id:12, parentId:1, name:"南京"},
  296. { id:13, parentId:1, name:"湖北"},
  297. { id:2, parentId:0, name:"美国(折叠)"},
  298. { id:21, parentId:2, name:"纽约"},
  299. { id:22, parentId:2, name:"波士顿"},
  300. { id:23, parentId:2, name:"芝加哥"}
  301. ];
  302. var setting1 = {
  303. callback: {
  304. onClick: onNodeClick1
  305. }
  306. };
  307. function onNodeClick1(event, treeId, treeNode){
  308. alert(treeNode.name)
  309. }
  310. </script>
  311. </body>
  312. </html>