最近做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 的文件
相关推荐
**artDialog弹出层插件**是一个常用的JavaScript插件,用于在网页中创建各种弹出对话框。这个插件的设计目标是提供一个高度可定制、轻量级且易于使用的解决方案,帮助开发者快速实现诸如提示、确认、警告以及复杂的...
jQuery的artDialog插件就是一款强大的、易于使用的弹出对话框解决方案,它为开发者提供了丰富的定制功能和优雅的用户体验。本文将深入探讨基于jQuery的artDialog插件4.1.7版本的相关知识点,帮助开发者更好地理解和...
总结起来,artDialog是一个强大的JavaScript弹出框解决方案,它的自动收缩和自定义样式功能提升了用户体验,而IFrame支持和丰富的API则为开发者提供了更多可能性。理解和掌握artDialog的使用,可以帮助我们创建更具...
**JS弹出对话框插件 artDialog** **一、artDialog简介** `artDialog` 是一个功能强大的JavaScript弹出对话框插件,以其简洁的API和丰富的自定义选项深受前端开发者喜爱。它允许开发者轻松创建各种类型的对话框,如...
`artDialog`是一款在前端开发中广泛使用的弹出层插件,它以其高度可定制性、优雅的设计和良好的用户体验赢得了4星级的评价。本文将深入探讨`artDialog`的核心特性、使用方法以及常见应用场景,帮助开发者更好地理解...
**artDialog弹出层**是一种常用的前端对话框插件,它在网页中提供了一种优雅的方式来展示信息、警告、确认或获取用户输入。这个插件以其丰富的定制选项、良好的可扩展性和高性能而受到开发者的青睐。`artDialog` 的...
artDialog是一款基于JavaScript的开源弹出层插件,以其优雅的设计和强大的功能备受开发者喜爱。本篇文章将深入探讨artDialog的特性、使用方法以及常见应用场景。 1. **artDialog简介** artDialog是一个轻量级的...
**jQuery弹出框插件——ArtDialog** ArtDialog是一款基于jQuery的高级对话框插件,它为网页开发者提供了丰富的弹出框解决方案。ArtDialog不仅功能强大,还具有良好的易用性和可扩展性,使得在网页中创建各种类型的...
在本文中,我们将深入探讨js弹出框插件,特别是artDialog,以及其与jQuery的结合使用。 首先,让我们了解什么是JavaScript弹出框。在传统的HTML中,我们有alert(), prompt()和confirm()三种内置的弹出框,但它们...
3. **调用函数**:使用`$.dialog()`或`artDialog()`函数创建并显示弹出框,或者通过`.show()`、`.close()`等方法控制弹出框的状态。 4. **事件绑定**:可以为弹出框的按钮或其他元素绑定事件,实现更复杂的交互逻辑...
artdialog 弹出窗口 调用参考 ; height:450px; visibility:hidden;">$info['content']?> <script type="text/javascript" src="public/editor/editor.js" charset="utf-8"> <script language="javascript"> ...
`artDialog弹出模式窗API`是一款在Web开发中广泛应用的JavaScript库,它为开发者提供了丰富而强大的对话框功能。这个API允许你创建各种类型的弹出窗口,包括但不限于提示、确认、询问等,使得网页交互更加直观且美观...
**artDialog 2 网页弹出框插件详解** `artDialog 2` 是一个功能强大且美观的网页对话框插件,专为提升网页用户体验而设计。这款插件以其优雅的界面和丰富的定制选项深受开发者喜爱,是前端开发中的得力工具。在本文...
使用ArtDialog时,开发者需要引入相关的CSS和JS文件,并通过JavaScript调用其API来创建弹出层。例如,简单的用法是: ```javascript var dialog = art.dialog({ title: '标题', content: '这里是弹出层内容', ok...
artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。
**artDialog.js** 是一个流行的JavaScript对话框插件,它为网页应用提供了强大的弹出框功能。这个"artDialog.js的demo"包含了4.15版本的资源,旨在帮助开发者了解和使用artDialog的各种功能。 在提供的文件列表中,...
artDialog4.1.3是一款优秀的JavaScript弹窗插件,广泛应用于网页交互设计中,提供了一种高效、灵活的方式来创建各种类型的对话框。它具备良好的浏览器兼容性,支持IE6及以上的版本,以及Firefox、Chrome、Safari和...
《深入解析:jQuery弹出框插件artDialog4.1.6》 在网页开发中,弹出框是一种常见的交互元素,用于展示重要的信息、获取用户输入或进行一系列操作。artDialog是一个强大的jQuery插件,它以其优雅的样式、丰富的功能...
**artDialog弹出框**是JavaScript的一个插件,用于创建可自定义的模态和非模态对话框。它具有丰富的样式和功能,可以轻松地集成到ASP.NET项目中。在ASP.NET中使用artDialog,你需要: 1. **引入资源**:下载...