123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title></title>
- <!--框架必需start-->
- <script type="text/javascript" src="../../libs/js/jquery.js"></script>
- <script type="text/javascript" src="../../libs/js/language/cn.js"></script>
- <script type="text/javascript" src="../../libs/js/framework.js"></script>
- <link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
- <link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
- <link rel="stylesheet" type="text/css" id="customSkin"/>
- <!--框架必需end-->
- </head>
- <body>
- <div style="display:none" id="content">这是指定容器的内容。</div>
- <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;">
- <fieldset>
- <legend>1、提示</legend>
- <input type="button" class="button" value="提示信息" onclick='top.Dialog.alert("这里是提示信息|标题",function(){alert("点击确定后的处理")});'/>
- <input type="button" class="button" value="提示自动关闭" onclick='top.Dialog.alert("这里是提示信息",null,null,null,2)'/>
- <input type="button" class="button" value="询问信息" onclick='top.Dialog.confirm("这里是询问信息",function(){top.Dialog.alert("点击了确定")},function(){top.Dialog.alert("点击了取消")});'/>
-
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>2、基本功能</legend>
- 弹出窗口参数见文档。
- <div class="height_10"></div>
- <input type="button" class="button" value="普通窗口" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"普通窗口"});'/>
- <input type="button" class="button" value="自定义宽高 " onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"自定义宽高 ",Width:800,Height:600});'/>
- <input type="button" class="button" value="带说明栏的窗口" onclick='top.Dialog.open({MessageTitle:"这是标题",Message:"这是标题说明文字",Title:"带说明栏窗口",URL:"../../sample_html/popup/window-content1.html"});'/>
- <input type="button" class="button" value="无遮罩窗口" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"无遮罩窗口",Modal:false});'/>
- <input type="button" class="button" value="最大化与最小化" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"最大化与最小化",ShowMaxButton:true,ShowMinButton:true});'/>
- <div class="height_5"></div>
- <input type="button" class="button" value="初始时最大化1" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Width:"100",Height:"100",Title:"全屏窗口"});'/>
- <input type="button" class="button" value="初始时最大化2" onclick='open11()'/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>3、额外功能</legend>
- <input type="button" class="button" value="非iframe弹窗(简单内容)" onclick="openHtml();"/>
- <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:"指定弹出位置"});'/>
- <input type="button" class="button" value="自动关闭" onclick='top.Dialog.open({InnerHtml:"5秒后自动关闭",AutoClose:5,Title:"自动关闭"});'/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>4、事件与方法</legend>
- <input type="button" class="button" value="确定、取消、最大化、最小化、关闭事件" onclick='open1()'/>
- <input type="button" class="button" value="更改按钮" onclick="open3()"/>
- <input type="button" class="button" value="创建新按钮" onclick="open4()"/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>5、父页面刷新</legend>
- 方法1:
- <div class="height_5"></div>
- <input type="button" class="button" value="提交表单并刷新父页" onclick="open5()"/>
- <div class="height_5"></div>
- 此方法适合表单同步提交(页面跳转)的情况。
- <div class="height_20"></div>
- 方法2:使用按钮栏:<input type="button" class="button" value="手动关闭窗口并刷新页面1" onclick="open6()"/>
- <div class="height_20"></div>
- 方法3:不用按钮栏:<input type="button" class="button" value="手动关闭窗口并刷新页面2" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content3.html",Title:"父窗口刷新"});'/>
- <div class="height_5"></div>
- 方法2和方法3适合表单异步提交或者无需表单提交的情况。
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>6、手动关闭窗口</legend>
- 方法1:使用按钮栏
- <div class="height_5"></div>
- <input type="button" class="button" value="手动关闭窗口方法1" onclick="open7()"/>
- <div class="height_20"></div>
- 方法2:不使用按钮栏
- <div class="height_5"></div>
- <input type="button" class="button" value="手动关闭窗口方法2" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content4.html",Title:"手动关闭窗口方法2"});'/>
- <div class="height_20"></div>
- 方法3:参见上面的“父页面刷新”的方法1。
- <div class="height_20"></div>
- 方法4:适合关闭特定的窗口。例如:
- <div class="height_5"></div>
- <input type="button" class="button" value="打开第二个窗口关闭前一个窗口" onclick="open10()"/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>7、传值</legend>
- <input type="button" class="button" value="本页面获取窗口页的值" onclick="open8()"/> <br/> <br/>
- <input type="button" class="button" value="本页面调用窗口页方法" onclick="open9()"/> <br/> <br/>
- <input type="button" class="button" value="窗口将值传给本页" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content9.html",Title:"窗口将值传给页面"});'/> <span id="span1">窗口的值将传到这里</span> <br/> <br/>
- <input type="button" class="button" value="窗口之间进行传值" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content5.html",ID:"a1",Width:400,Height:300,Title:"第一个窗口"});'/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>8、改变窗口样式</legend>
- <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/>
- <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/>
- <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/>
- 完全自定义外观:<br/>
- <input type="button" class="button" value="仿百度贴吧新特性介绍" onclick="open12()"/> <br/>
- </fieldset>
- <div class="height_15"></div>
-
-
- <fieldset>
- <legend>9、任务栏管理</legend>
- <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});'/>
- <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});'/>
- <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});'/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>10、自定义图标</legend>
- <input type="button" class="button" value="与图标库结合" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"与图标库结合",IconClass:"icon_list",Modal:false});'/>
- <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});'/>
- <input type="button" class="button" value="无图标" onclick='top.Dialog.open({URL:"../../sample_html/popup/window-content1.html",Title:"无图标",IconClass:"",Modal:false});'/>
- </fieldset>
- <div class="height_15"></div>
- </div></div></div></div><div class="box_bottomcenter"><div class="box_bottomleft"><div class="box_bottomright"></div></div></div></div>
-
-
- <script type="text/javascript">
- $(function(){
- top.Dialog.close()
- })
- function handler1(){
- top.Dialog.alert("点击了确定")
- }
- function open1(){
- var diag = new top.Dialog();
- diag.Title = "按钮点击事件";
- diag.ShowMaxButton=true;
- diag.ShowMinButton=true;
- diag.OKEvent = function(){
- alert("点击了确定")
- diag.close();
- };
- diag.CancelEvent = function(){
- alert("点击了取消");
- diag.close();
- };
- diag.MaxEvent = function(){
- alert("点击了最大化");
- };
- diag.MinEvent = function(){
- alert("点击了最小化");
- };
- diag.DecreaseEvent = function(){
- alert("点击了还原");
- };
- diag.URL = "../../sample_html/popup/window-content1.html";
- diag.ShowButtonRow=true;
- diag.show();
- }
- function open3(){
- var diag = new top.Dialog();
- diag.Title = "更改按钮";
- diag.URL = "../../sample_html/popup/window-content1.html";
- diag.ShowButtonRow=true;
- diag.OkButtonText=" 提 交 ";
- diag.show();
- }
- function open4(){
- var diag = new top.Dialog();
- diag.Title = "创建其它按钮";
- diag.URL = "../../sample_html/popup/window-content1.html";
- diag.show();
- diag.addButton("next"," 按 钮 ",function(){
- top.Dialog.alert("点击了创建的按钮")
- })
- }
- function open5(){
- var diag = new top.Dialog();
- diag.Title = "提交表单并刷新父页";
- diag.URL = "../../sample_html/popup/window-content2.html";
- diag.show();
- }
- function open6(){
- var diag = new top.Dialog();
- diag.Title = "手动关闭窗口并刷新页面";
- diag.URL = "javascript:void(document.write('点击确定按钮'))";
- diag.ShowButtonRow=true;
- diag.OkButtonText=" 确 定 ";
- diag.OKEvent = function(){
- top.Dialog.alert("成功提交",function(){window.location.reload()})
- diag.close();
- };
- diag.show();
- }
- function open7(){
- var diag = new top.Dialog();
- diag.Title = "手动关闭窗口";
- diag.URL = "../../sample_html/popup/window-content1.html";
- diag.ShowButtonRow=true;
- diag.ShowOkButton=false;
- diag.CancelButtonText=" 关 闭 ";
- diag.show();
- }
-
- function open8(){
- var diag = new top.Dialog();
- diag.Title = "得到输入值";
- diag.URL = "../../sample_html/popup/window-content8.html";
- diag.OKEvent = function(){
- var inputValue = diag.innerFrame.contentWindow.document.getElementById('a').value;
- top.Dialog.alert(inputValue)
- diag.close();
- };
- diag.show();
- }
-
- function open9(){
- var diag = new top.Dialog();
- diag.Title = "调用窗口页方法";
- diag.URL = "../../sample_html/popup/window-content10.html";
- diag.OKEvent = function(){
- var inputValue = diag.innerFrame.contentWindow.mytest();
- diag.close();
- };
- diag.show();
- }
-
- var firstDialog;
- function open10(){
- firstDialog = new top.Dialog();
- firstDialog.Title = "打开第二个窗口关闭本窗口";
- firstDialog.URL = "../../sample_html/popup/window-content11.html";
- firstDialog.show();
- }
- function closeFirstDialog(){
- firstDialog.close();
- }
-
- function open11(){
- var diag = new top.Dialog();
- diag.Title = "初始时最大化";
- diag.URL = "../../sample_html/popup/window-content1.html";
- diag.ShowMaxButton=true;
- diag.ShowMinButton=true;
- diag.show();
- diag.max();
- }
-
- function open12(){
- //打开窗口
- var diag = new Dialog();
- diag.Style="custom";
- diag.InnerHtml= "";
- diag.ID="c2";
- diag.Width=386;
- diag.Height=193;
- diag.show();
-
-
- //构建自定义内容
- var $content=$('<div style="position:relative;"><img src="../../libs/images/demo/popup1.png"/></div>');
- var $next=$('<img src="../../libs/images/icons/click.gif" class="hand" style="width:100px;height:30px;position:absolute;top:140px;left:120px;"/>');
- var $close=$('<img src="../../libs/images/icons/click.gif" class="hand" style="width:30px;height:30px;position:absolute;top:0px;left:280px;"/>');
- $content.prepend($next);
- $content.prepend($close);
- //内容添加到窗口
- var $container=$(document.getElementById("_Container_c2"));
- $container.append($content);
-
- //点击关闭
- $close.click(function(){
- diag.close();
- });
- //点击下一步
- $next.click(function(){
- //关闭当前
- diag.close();
-
- //打开新窗口
- var diag2 = new Dialog();
- diag2.Style="custom";
- diag2.InnerHtml= "";
- diag2.ID="c3";
- diag2.Width=467;
- diag2.Height=399;
- diag2.show();
-
- //构建自定义内容
- var $content2=$('<div style="position:relative;"><img src="../../libs/images/demo/popup2.png"/></div>');
- var $next2=$('<img src="../../libs/images/icons/click.gif" class="hand" style="width:100px;height:30px;position:absolute;top:355px;left:130px;"/>');
- var $close2=$('<img src="../../libs/images/icons/click.gif" class="hand" style="width:30px;height:30px;position:absolute;top:218px;left:310px;"/>');
- $content2.prepend($next2);
- $content2.prepend($close2);
-
- //内容添加到新窗口
- var $container2=$(document.getElementById("_Container_c3"));
- $container2.append($content2);
-
- //点击关闭
- $close2.click(function(){
- diag2.close();
- });
- $next2.click(function(){
- diag2.close();
- });
- });
- }
-
- function openHtml(){
- top.Dialog.open({
- InnerHtml: $("#content").html(),//这里还可以直接写html代码
- Title:"普通窗口"
- });
- }
- var nodes1 = [
- { id:1, parentId:0, name:"中国(默认展开)", open: true},
- { id:11, parentId:1, name:"北京"},
- { id:12, parentId:1, name:"南京"},
- { id:13, parentId:1, name:"湖北"},
- { id:2, parentId:0, name:"美国(折叠)"},
- { id:21, parentId:2, name:"纽约"},
- { id:22, parentId:2, name:"波士顿"},
- { id:23, parentId:2, name:"芝加哥"}
- ];
- var setting1 = {
- callback: {
- onClick: onNodeClick1
- }
- };
- function onNodeClick1(event, treeId, treeNode){
- alert(treeNode.name)
- }
- </script>
- </body>
- </html>
|