<!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>artDialog</title> <script> // skin demo (function() { var _skin, _jQuery; var _search = window.location.search; if (_search) { _skin = _search.split('demoSkin=')[1]; _jQuery = _search.indexOf('jQuery=true') !== -1; if (_jQuery) document.write('<scr'+'ipt src="../jquery-1.6.2.min.js"></sc'+'ript>'); }; document.write('<scr'+'ipt src="../artDialog.source.js?skin=' + (_skin || 'default') +'"></sc'+'ript>'); window._isDemoSkin = !!_skin; })(); </script> <script src="../plugins/iframeTools.source.js"></script> <script src="demo.js"></script> <script src="highlight/highlight.pack.js"></script> <script src="highlight/languages/javascript.js"></script> <script> hljs.tabReplace = ' '; hljs.initHighlightingOnLoad(); </script> <link href="demo.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="highlight/styles/magula.css"> </head> <body> <div id="doc"> <div id="header"> <h1 id="logo"><a href="../index.html">artDialog</a></h1> <ul id="nav" class="nav"> <li><a href="../index.html" class="home">首页</a></li> <li><a href="./API.html" class="api">文档</a></li> <li><a href="./down.html" class="down">下载</a></li> <li><a href="./log.html" class="log">更新</a></li> <li><a href="./labs.html" class="labs">实验</a></li> <li><a href="./license.html" class="license">授权</a></li> | <li><a href="#" id="nav-skin">皮肤</a></li> </ul> </div> <div id="main"> <h1 style="font-size:36px; line-height:2.2em; height:2.2em; margin-top:10px; margin-bottom:20px; color:#9DCCB8; font-family:'宋体'">artDialog4 有什么新功能?</h1> <div id="DOMContentWrap"> <h2>支持自定义按钮</h2> <div id="demoCode_button"> <pre><code class="javascript">var dialog = art.dialog({ title: '警告', content: '点击管理按钮将让删除按钮可用', width: '20em', button: [{ name: '管理', callback: function () { this.content('我更改了删除按钮').button({ name: '删除', disabled: false }); return false; }, focus: true }] }); dialog.button( { name: '删除', callback: function () { alert('remove') }, disabled: true } )</code></pre> </div> <p class="buttons"> <button class="runCode" name="demoCode_button">运行»</button> </p> </div> <h2>内容支持传入DOM元素</h2> <p>元素完整移动到对话框中,所以原有的事件与属性都将会保留;如果隐藏元素被传入到对话框,会设置display:block属性显示该元素;对话框关闭的时候元素将恢复到原来在页面的位置,style display属性也将恢复</p> <div id="demoCode_content"> <pre><code class="javascript">var dialog = art.dialog({ content: document.getElementById('DOMContentWrap'), id: 'D345' }); </code></pre> </div> <p class="buttons"> <button class="runCode" name="demoCode_content">运行»</button> </p> <h2>支持百分比位置与尺寸</h2> <p>使用百分比作为参数,浏览器窗口尺寸调整也能执行适应</p> <div id="demoCode_sp"> <pre><code class="javascript">var dialog = art.dialog({ left: '100%', top: '100%', width: 240, height: '100%', fixed: true, resize: false }); </code></pre> </div> <p class="buttons"> <button class="runCode" name="demoCode_sp">运行»</button> </p> <h2>跨框架交换数据</h2> <p>框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情,常规情况下你必须知道框架的名称才能进行数据交换,如果是在复杂的多层框架下操作简直就是噩梦——但在artDialog4中这一切完全被简化,它有一个统一的数据共享接口,可以共享任意类型的数据,任何页面都能使用同一接口获取数据。</p> <div id="demoCode_data"> <pre><code class="javascript">art.dialog.data('test', document.getElementById('demoInput04-3').value); art.dialog.open('./iframeA.html'); // 此时 iframeA.html 页面可以使用 art.dialog.data('test') 获取到数据,如: // document.getElementById('aInput').value = art.dialog.data('test'); </code></pre> </div> <p class="buttons"> <label>请输入测试文字:<input id="demoInput04-3" title="demoInput04-3" type="text" value="精于心,简于形" style="margin-right:10px" /></label> <button class="runCode" name="demoCode_data" title="chrome浏览器不能在本地运行iframe">运行»</button> </p> <p style="text-align:center"><a href="log.html">查看详细更新与升级注意事项»</a></p> </div> <div id="footer"></div> </div> <script>_isDemoSkin && window._demoSkin && _demoSkin();</script> </body> </html>