日期:2014-05-16  浏览次数:20358 次

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

?

?