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 的文件