最近做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 的文件