`
KissAngle
  • 浏览: 8719 次
  • 性别: Icon_minigender_1
文章分类
社区版块
存档分类
最新评论

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', width:'900', height:'500'});

   //已经没有了直接的iframe属性  通过下面的方式内嵌iframe  第二种效果不佳
   art.dialog.open("http://www.baidu.com", {width: 320, height: 400});
   // art.dialog({title:'dialog内嵌iframe', width:'900px',height:'500px', content:"<iframe align='right' src='http://www.baidu.com' width:'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',width:'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="width: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="width: 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说明!!

 

分享到:
评论

相关推荐

    artDialog.js的demo

    7. **basic** 文件夹 - 可能包含了基础的示例或者基础配置,展示如何实现最简单的对话框功能。 8. **skins** 文件夹 - 通常存放着对话框的皮肤样式,你可以根据项目需求选择不同的视觉风格,或者自定义皮肤来适应...

    artDialog最新版本

    5. **文档支持**:`_doc` 文件夹包含了详细的API文档和使用示例,帮助开发者快速理解和应用`artDialog`。 6. **许可协议**:`license.txt` 文件包含了关于`artDialog` 的许可协议信息,确保合法合规地使用和分发该...

    artDialog弹出模式窗API

    例如,你可以使用以下代码创建一个简单的信息提示框: ```javascript art.dialog({ content: '这是一个基本的弹出对话框', ok: function () { console.log('点击了确定按钮'); } }); ``` 在这个例子中,`...

    jQuery插件artDialog.js使用与关闭方法示例

    下面将详细介绍artDialog.js的使用方法和关闭策略。 ### 一、artDialog.js的引入 在使用artDialog.js之前,首先需要在HTML文件中引入必要的CSS样式表和JavaScript文件。以下是一个基本的引入示例: ```html &lt;!...

    javascript artdialog 4.1.0

    1. `index.html`: 这是示例页面或测试页面,通常包含了一些演示如何使用ArtDialog的代码。 2. `artDialog.source.js`和`jquery.artDialog.source.js`: 这些是源码文件,提供了未压缩和未混淆的JavaScript代码,便于...

    artDialog4.1.5.rar

    1. **易用性**:artDialog的API设计简洁明了,使得开发者能够快速理解和使用,无论是简单的提示信息还是复杂的表单交互,都能轻松实现。 2. **灵活性**:支持自定义样式和内容,可以嵌入HTML、图片、视频等多种元素...

    artDialog4.0.4

    1. **index.html**:这是示例或测试页,展示了artDialog的使用方法和效果。 2. **artDialog.source.js** 和 **jquery.artDialog.source.js**:分别是源代码文件,包含了完整的功能实现,对于开发者调试和理解插件...

    artDialog的js,css与事例

    在"artDialog-master"压缩包中的示例文件,通常会包含各种使用场景的实例,比如简单的提示对话框、确认对话框、自定义内容对话框等,这些都是学习和理解ArtDialog功能的好资源。通过阅读和运行这些示例,开发者可以...

    artDialog弹窗

    1. `index.html`:示例或演示页面,展示了如何在实际项目中使用`artDialog`。 2. `artDialog.min.js`:核心库文件,包含了`artDialog`的主要功能。 3. `jquery.artDialog.min.js`:jQuery版本的`artDialog`,方便...

    artDialog4.1.7

    5. **文档齐全**:`_doc`目录可能包含组件的使用文档和示例,帮助开发者理解和学习如何充分利用artDialog的功能。 6. **源代码**:`artDialog.source.js`和`jquery.artDialog.source.js`是未压缩的源码文件,开发者...

    artDialog对话框

    这种灵活性使得`artDialog`不仅适用于简单的提示信息,还可以用于创建复杂的模态窗口,如表单填写、图片预览等功能。 在提供的压缩包中,我们可以看到以下文件: 1. `index.html`:示例页面,展示了`artDialog`的...

    弹窗插件artDialog4.1.3

    使用artDialog4.1.3通常包括以下几个步骤: 1. 引入必要的JS和CSS文件。 2. 初始化对话框,设置标题、内容、宽高等属性。 3. 添加事件监听,如关闭按钮点击事件等。 4. 可选:使用插件或自定义皮肤改变对话框的外观...

    artDialog插件和API详解

    `artDialog`是一个强大且易于使用的JavaScript对话框插件,它的丰富API和高度定制性使得在网页中创建交互式对话框变得简单。通过熟练掌握`artDialog`,开发者可以提升网页用户体验,实现更加细腻的交互设计。无论是...

    artDialog2.0.6,一个漂亮的可以代替alert()的js特效

    4. **示例丰富**:_demo目录下包含多个示例代码,帮助开发者了解和掌握artDialog的各种用法。 5. **皮肤系统**:skin目录下的皮肤文件,允许开发者轻松更换对话框的外观。 6. **处理IE透明PNG问题**:iepngfix文件...

    artDialog框架

    - `index.html`: 这是示例页面,展示了如何在实际项目中使用`artDialog`。 - `artDialog.js`:未压缩的源代码文件,便于阅读和调试。 - `artDialog.min.js`:压缩后的生产环境版本,体积小,加载速度快。 - `iepng...

    artDialog4.0.5

    5. `demo/`: 示例代码和测试页面,帮助开发者理解和使用artDialog。 6. `docs/`: 文档资料,包括API参考和使用指南。 使用artDialog4.0.5时,开发者首先需要在网页中引入相关的JS和CSS文件,然后通过JavaScript调用...

    ArtDialog4.1.6

    这个版本的API和示例集为开发者提供了详细的功能调用和使用方法,使得在网页应用中创建优雅、可定制化的对话框变得简单易行。 ### ArtDialog核心功能 1. **基本对话框**:ArtDialog提供了一个基础的对话框模板,...

    前端项目-artDialog.zip

    其次,artDialog-master 文件夹包含了项目的源码、文档、示例等资源,帮助开发者更好地理解和使用这个模块。其中,源码部分通常包括JavaScript文件、CSS文件以及可能的图片资源,开发者可以通过阅读源码来深入理解其...

    漂亮的对话框artDialog5 具有10种风格,使用简单

    完善的文档和示例代码可以帮助开发者快速上手,理解并熟练使用 `artDialog5`,提高开发效率。 通过以上介绍,我们可以看出 `artDialog5` 是一个集美观、实用和灵活性于一身的对话框解决方案,适合各种类型的Web...

    artDialog弹出框

    通过使用artDialog,开发者可以大大提高网页交互体验,使用户界面更加友好。 **二、核心特性** 1. **易用性**:artDialog提供了简单直观的API,使得创建和管理弹出框变得非常容易,只需几行代码即可实现基本功能。...

Global site tag (gtag.js) - Google Analytics