zoukankan      html  css  js  c++  java
  • ArtDialog简单使用示例

     像dojo一样,artdialog也是在网上无意间搜出来的,可惜后来发现它和dojo冲突(最后都是用的dojo的dialog),没办法只有忍痛割爱了。今天花了些时间把http://code.google.com/p/artdialog/downloads/list上的demo整理了一下,把demo.js里的代码都抽出来加到jsp代码中了,这样更直观。代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>art</title>
        <link id="artDialogSkin" href="skins/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="artDialog.js"></script>
    <script type="text/javascript" src="artDialog.iframeTools.js"></script> <!-- 对iframe的新工具 -->

    </head>
    <body >
    <script type="text/javascript">
        function a(){     
                   art.dialog({content:'hello world!历史'})
                  }
        function b(){  
           art.dialog(
            {
                content:'欢迎你来到对话框世界!',
                lock:true,
                style:'succeed noClose'
            },
            function(){
                alert('你点了确定'); //不管点了确定还是取消默认都会关闭artdialog,除非在这里面返回false
            },
            function(){
                alert('你点了取消');
            }
                     );
                   }
        function c(){
        art.dialog(
        {
        title:'图片查看',
        fixed:true,
          content:'<img width="817" height="479" src="butterfly.jpg" />'
                     });
        //return false;
       };
        function d(){
       // art.dialog({title:'dialog内嵌iframe', iframe:'http://www.baidu.com', '900', height:'500'});

       //已经没有了直接的iframe属性  通过下面的方式内嵌iframe  第二种效果不佳
       art.dialog.open("http://www.baidu.com", { 320, height: 400});
       // art.dialog({title:'dialog内嵌iframe', '900px',height:'500px', content:"<iframe align='right' src='http://www.baidu.com' '100%' height:'100%' />"});
        return false;
       };
        function e(){
        art.dialog(
        {
        title:'动画',
        fixed:true,
          content:'<embed src="ddd.rm" type="audio/x-pn-realaudio-plugin" autostart="true" width="420" height="363"></embed>'
                     });
       
       }; //播放avi总是只有声音,没有画面,哎!
    function f(){
        art.dialog({content:'你人品稳定么?', fixed:true, yesText:'我很稳定', style:'confirm', id:'bnt4_test'},
        function(){
               art.dialog({id:'bnt4_test'}).content('你骗人!');
              return false;//这样对话框才不会关闭
            },
         function(){alert('你是坏人');}//按右上角的叉关闭对话框也会执行这个函数
         );
       };
       function g(){
        art.dialog({mouse:true, id:'dg_test34243', content:'您收到 <strong>2</strong> 条消息',left:'right','15em', top:'bottom', fixed:true});
       };
       function h(){
        art.dialog({id:'dg_test34243'}).close();
       };
       function i(){
              var _this = document.getElementById('btn7');
              if (document.getElementById('menu_4834783')) {//如果已经打开了对话框,按这个按钮还能把它关闭
                                                            art.dialog({id:'menu_4834783'}).close();
                                                            _this.innerHTML = '弹出菜单'; //button上显示的内容
                                                            return;
                                                           };
        art.dialog({id:'menu_4834783', title:'菜单', content:'请输入:<input style="200px;" id="M_dfd" type="text" value="hello world!" />',
                   button:[{name:'确定',callback:function(){  
                                                          var a=document.getElementById('M_dfd').value;
                                                          art.dialog({content:a, lock:true, time:1});
                                                         }
                            },
                           {name:'关闭我',callback:function(){_this.innerHTML = '弹出菜单';}}
                           ]
                  }
                  );  
        _this.innerHTML = '关闭菜单';
        return false;
        };                      
        </script>
    <input type="button" style=" 100px" onClick="a()" value="最简单的对话框"/><br/>
    <button id="btn0" onClick="b()">基本示例</button><br/>
    <button id="btn1" onClick="c()">显示图片</button><br/>
    <button id="btn2" onClick="d()">外部页面</button><br/>
    <button id="btn3" onClick="e()">视频</button><br/>
    <button id="btn4" onClick="f()">询问</button><br/>
    <button id="btn5" onClick="g()">广告</button>
    <button id="btn6" onClick="h()">关闭</button><br/>
    <button id="btn7" onClick="i()">弹出菜单</button><br/>
    </body>
    </html>

    上面没有用的特性art.dialog({id:'testDialog'}).data.iframe.document.getElementById('test'),也就是说如果在dialog里面嵌入的iframe,parent页面可以通过这种方式取到里面的控件。PS:iframe支持已经改变,没细研究。

    在对话框里添加视频的时候,avi格式的总是只有声音没有画面,气死我了!基本上典型应用都有了,以后看一下就会用了,这就是目的,哈哈。还有,artDialg的属性如下(也就是Demo网页上的那几个):

    content: {消息内容,支持HTML}

    title: {标题.默认:'提示'}iframe: {嵌入外部页面. 存在content参数时候,此参数无效}yesText: {确定按钮文本. 默认:'确定'}noText: {取消按钮文本. 默认:'取消'}

    width: {宽度,支持em等单位. 默认:'auto'}

    height: {高度,支持em等单位. 默认:'auto'}
    left: {x坐标,可以使用关键字,如:'left'、'right'. 默认:居中}
    top: {y坐标,可以使用关键字,如:'top'、'bottom'. 默认:居中(注: 小对话框采用黄金比例垂直居中)}
    menuBtn: {让对话框在指定元素附近弹出, 存在menuBtn参数则让left、top参数失效}
    fixed: {是否启用静止定位. 默认:false}
    style: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
    lock: {是否锁定屏幕, 中断用户操作页面. 默认:false}
    id: {给对话框定义唯一标识id名称. 可以防止重复弹出对话框}
    time: {多少秒自动关闭}

    上面的属性有些已经不支持,属性已经改变更新了好多,详细参见最新下载的doc说明!!

  • 相关阅读:
    一步一步配置 Dell OME 监控 Dell 服务器硬件报警
    比较详细的介绍zabbix监控tomcat
    Docker-03 docker 加速器--DaoCloud 1.0
    Docker-02 无人值守安装 docker
    Docker-01 无人值守升级 CentOS 6.x 系统内核到 3.10.x 长期支持版
    一个awk if 嵌套 if 的脚本
    CentOS 安装 JDK
    zTree默认勾选指定ID并执行事件
    数据库游标的使用
    js进度条实现
  • 原文地址:https://www.cnblogs.com/guozhe/p/3382695.html
Copyright © 2011-2022 走看看