<!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">运行&raquo;</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">运行&raquo;</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">运行&raquo;</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">运行&raquo;</button>
          </p>

    <p style="text-align:center"><a href="log.html">查看详细更新与升级注意事项&raquo;</a></p>
  </div>
  <div id="footer"></div>
</div>
<script>_isDemoSkin && window._demoSkin && _demoSkin();</script>
</body>
</html>