`
bz5811
  • 浏览: 33013 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

artDialog js弹出插件的使用心得

阅读更多

最近做html5的项目,主要是模仿surveyMonkey做一个跨设备的简单调查问卷系统出来。在寻找弹出插件的时候,发现了artDialog。感觉还是不错的,但是上手的时候发现略有困难,特记录于此。

 

首先放上下载地址(其中版本4.0.0已经不在更新,5.0.0采用了ajax局部更新,抛弃了iframe):

4.0:http://www.planeart.cn/demo/artDialog/

5.0:http://code.google.com/p/artdialog/downloads/list

 

1.部署

5.0的使用很简单,只需要将相应的js和css文件放到项目文件中,添加以下三条语句即可:

<script src="js/artDialog.min.js"></script>
<script src="js/artDialog.plugins.min.js"></script>
<link href="skins/default.css" rel="stylesheet" />

 4.0因为有个皮肤的问题,所以比较麻烦一点,不要理会文档中的内容,只需参照5.0的使用方法即可。即不使用js/artDialog.js?default的形式。

 

 

2.使用方法

使用方法简单的文档中都有,贴一个比较复杂的。

 

<script type="text/javascript">
    	function a(){     
        	art.dialog({id: 'Add question',
						title: 'Question',
						content: '<form class="formee" name="addQuestionForm" method="post" action="addQuestion.do"> Question title: </br><input id="questionTitle" type="text" name="questionTitle" /> </br> Question type: </br> <select id="questionType" onChange="display(this.value)"> <option value="0">Multiple choice(only one answer)</option> <option value="1">Multiple choice(multiple answer)</option> <option value="2">Comment/Essay box</option> </select></br>  Answer Option: </br> <textarea name="answerOption" rows="3" cols="30"> </textarea> </form>',
						initialize: function () {
        					document.getElementById('questionTitle').focus();
						},
						lock: true,
						fixed: true,
						width: 600,
						height: 200,
						ok: function () {
							document.addQuestionForm.submit();
						}
						
						
				});
       	}
</script>
<form class="formee" method="post" action="">
        <fieldset>
        <legend>Design Questionnaire</legend>
        <input type="button" style="width: 100px" onClick="a()" value="Add question"/><br/>
         </fieldset>
</form>

 

 

3.备份

为了以防意外,附件中是5.0版本artDialog 的文件

 

 

1
1
分享到:
评论

相关推荐

    artDialog弹出层插件

    **artDialog弹出层插件**是一个常用的JavaScript插件,用于在网页中创建各种弹出对话框。这个插件的设计目标是提供一个高度可定制、轻量级且易于使用的解决方案,帮助开发者快速实现诸如提示、确认、警告以及复杂的...

    基于jQuery的artDialog 弹出窗插件效果 4.1.7.zip

    jQuery的artDialog插件就是一款强大的、易于使用的弹出对话框解决方案,它为开发者提供了丰富的定制功能和优雅的用户体验。本文将深入探讨基于jQuery的artDialog插件4.1.7版本的相关知识点,帮助开发者更好地理解和...

    artDialog弹出框效果

    总结起来,artDialog是一个强大的JavaScript弹出框解决方案,它的自动收缩和自定义样式功能提升了用户体验,而IFrame支持和丰富的API则为开发者提供了更多可能性。理解和掌握artDialog的使用,可以帮助我们创建更具...

    不错的JS弹出对话框插件 artDialog

    **JS弹出对话框插件 artDialog** **一、artDialog简介** `artDialog` 是一个功能强大的JavaScript弹出对话框插件,以其简洁的API和丰富的自定义选项深受前端开发者喜爱。它允许开发者轻松创建各种类型的对话框,如...

    artDialog 弹出层插件(4星级)

    `artDialog`是一款在前端开发中广泛使用的弹出层插件,它以其高度可定制性、优雅的设计和良好的用户体验赢得了4星级的评价。本文将深入探讨`artDialog`的核心特性、使用方法以及常见应用场景,帮助开发者更好地理解...

    artdialog弹出层

    **artDialog弹出层**是一种常用的前端对话框插件,它在网页中提供了一种优雅的方式来展示信息、警告、确认或获取用户输入。这个插件以其丰富的定制选项、良好的可扩展性和高性能而受到开发者的青睐。`artDialog` 的...

    最新artDialog精美弹出层

    artDialog是一款基于JavaScript的开源弹出层插件,以其优雅的设计和强大的功能备受开发者喜爱。本篇文章将深入探讨artDialog的特性、使用方法以及常见应用场景。 1. **artDialog简介** artDialog是一个轻量级的...

    jquery 弹出框插件artDialog

    **jQuery弹出框插件——ArtDialog** ArtDialog是一款基于jQuery的高级对话框插件,它为网页开发者提供了丰富的弹出框解决方案。ArtDialog不仅功能强大,还具有良好的易用性和可扩展性,使得在网页中创建各种类型的...

    js弹出框插件

    在本文中,我们将深入探讨js弹出框插件,特别是artDialog,以及其与jQuery的结合使用。 首先,让我们了解什么是JavaScript弹出框。在传统的HTML中,我们有alert(), prompt()和confirm()三种内置的弹出框,但它们...

    artDialog弹出框

    3. **调用函数**:使用`$.dialog()`或`artDialog()`函数创建并显示弹出框,或者通过`.show()`、`.close()`等方法控制弹出框的状态。 4. **事件绑定**:可以为弹出框的按钮或其他元素绑定事件,实现更复杂的交互逻辑...

    artdialog 弹出窗口

    artdialog 弹出窗口 调用参考 ; height:450px; visibility:hidden;"&gt;$info['content']?&gt; &lt;script type="text/javascript" src="public/editor/editor.js" charset="utf-8"&gt; &lt;script language="javascript"&gt; ...

    artDialog弹出模式窗API

    `artDialog弹出模式窗API`是一款在Web开发中广泛应用的JavaScript库,它为开发者提供了丰富而强大的对话框功能。这个API允许你创建各种类型的弹出窗口,包括但不限于提示、确认、询问等,使得网页交互更加直观且美观...

    artDialog 2 漂亮的网页弹出框插件升级版

    **artDialog 2 网页弹出框插件详解** `artDialog 2` 是一个功能强大且美观的网页对话框插件,专为提升网页用户体验而设计。这款插件以其优雅的界面和丰富的定制选项深受开发者喜爱,是前端开发中的得力工具。在本文...

    弹出层(artdialog)

    使用ArtDialog时,开发者需要引入相关的CSS和JS文件,并通过JavaScript调用其API来创建弹出层。例如,简单的用法是: ```javascript var dialog = art.dialog({ title: '标题', content: '这里是弹出层内容', ok...

    artDialog页面弹出框

    artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。

    artDialog.js的demo

    **artDialog.js** 是一个流行的JavaScript对话框插件,它为网页应用提供了强大的弹出框功能。这个"artDialog.js的demo"包含了4.15版本的资源,旨在帮助开发者了解和使用artDialog的各种功能。 在提供的文件列表中,...

    弹窗插件artDialog4.1.3

    artDialog4.1.3是一款优秀的JavaScript弹窗插件,广泛应用于网页交互设计中,提供了一种高效、灵活的方式来创建各种类型的对话框。它具备良好的浏览器兼容性,支持IE6及以上的版本,以及Firefox、Chrome、Safari和...

    弹出框artDialog4.1.6.zip

    《深入解析:jQuery弹出框插件artDialog4.1.6》 在网页开发中,弹出框是一种常见的交互元素,用于展示重要的信息、获取用户输入或进行一系列操作。artDialog是一个强大的jQuery插件,它以其优雅的样式、丰富的功能...

    asp.net表单验证及artDialog弹出框

    **artDialog弹出框**是JavaScript的一个插件,用于创建可自定义的模态和非模态对话框。它具有丰富的样式和功能,可以轻松地集成到ASP.NET项目中。在ASP.NET中使用artDialog,你需要: 1. **引入资源**:下载...

Global site tag (gtag.js) - Google Analytics