JavasScript实现调查问卷插件
javasScript实现调查问卷插件
鄙人屌丝程序猿一枚,闲来无事,想尝试攻城师是感觉,于是乎搞了点小玩意.用js实现调查问卷,实现了常规的题型,单选,多选,排序,填空,矩阵等. 遂开源贴出来与各程序员共享,聊以自慰.前台代码如下:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Aim.Examining.Web.SurveyUI.WebForm1" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <title></title> 7 <link href="SurveyRazor/CSS/surveyq.css" rel="stylesheet" type="text/css" /> 8 <link href="SurveyRazor/css/validationEngine.jquery.css" rel="stylesheet" type="text/css" /> 9 <script src="SurveyRazor/jquery-1.6.min.js" type="text/Javascript"></script>10 <script src="SurveyRazor/SurveyRaZor.js" type="text/javascript"></script>11 <script src="JsonData.js" type="text/javascript"></script>12 <script type="text/javascript">13 $(function () {14 15 var desc = "<p style=\"white-space: normal; background-color: rgb(255, 255, 255);\">\16 <span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">親愛的客戶，</span>\17 </p>\18 <p style=\"white-space: normal; background-color: rgb(255, 255, 255);\">\19 <span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">感謝您一直以來的支持與厚愛。</span>\20 </p>\21 <p style=\"white-space: normal; background-color: rgb(255, 255, 255);\">\22 <span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">為了更好地提升我們的服務， 邀請您對我們的服務進行評價。您的評價與意見，將幫助我們提供更加優質的服務！</span>\23 </p>\24 <p style=\"white-space: normal; background-color: rgb(255, 255, 255); text-align: center;\">\25 <span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">請針對2014年第1季度的服務狀況進行評價</span>\26 </p>\27 <p style=\"text-align: center;\">\28 <span style=\"font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 16px;\">請您配合在3月26日前回復,謝謝。收集窗口： </span>\29 </p>";30 SurveyRazor.dataStore.load(data);31 SurveyRazor.surveyRazor.options({32 description: desc, //描述33 haveBgImg: false, //启用背景图片34 surveyTitle: "客戶滿意度調查表"35 }).create().show();36 });37 </script>38 </head>39 <body style="margin: 0 auto; background-image: url(''); width: 700px;">40 </body>41 </html>
Js代码如下:
1 /* 2 *SurveyRazor.js 问卷渲染引擎 3 *Version:RW_1.1 4 *Author:WGM 5 *Data:2014-6-20 6 */ 7 var SurveyRazor = { 8 9 /*html模版*/ 10 htmlTemplate: { 11 //必填 12 mustFill: "<span style=\"color: red;\"> *(必填)</span>", 13 //多选 14 moreSelc: "<span>[多选题]</span>", 15 //问卷大分类 16 questionBigType: "<div class='qType'>" 17 + "<label style=\"display: block; padding-top: 7px;\">{content}</label></div>", 18 //题的Div 19 qustionBody: "<div class=\"div_question\" id=\"{id}\">{content}</div>", 20 //题的题干 21 questionHead: "<div class=\"div_title_question_all\">" 22 + "<div class=\"div_topic_question\"><b>{seq}.</b></div>" 23 + "<div id=\"{id}\" class=\"div_title_question\">" 24 + "{headTitle}{extend}</div>" 25 + "<div style=\"clear: both;\"></div></div>", 26 27 //单选类型,单选项选项补充 28 radio: "<input type=\"radio\" name=\"{name}\" id=\"{id}\" value=\"{value}\" class=\" {validation}\" onclick='{onclick};' /><label for=\"{for}\">{content}</label>", 29 radioAdd: "<input type=\"radio\" name=\"{name}\" id=\"{id}\" value=\"{value}\" class=\" {validation}\" ><label for=\"{for}\" style=\"display: inline-block;\">{content}</label>" 30 + "<input class=\"underline itemExtend\" type=\"text\" value=\"{extendValue}\" rel=\"{rel}\" " 31 + "style=\"color: rgb(153, 153, 153); position: static;\">", 32 itemAppend: "<input class=\"underline itemExtend\" type=\"text\" value=\"{value}\" rel=\"{rel}\" name=\"{name}\" " 33 + "style=\"color: rgb(153, 153, 153); position: static;\">", 34 //多选类型,多选项补充 35 checkbox: "<input id=\"{id}\" type=\"checkbox\" name=\"{name}\" value=\"{value}\" class=\" {validation}\" /><label for=\"{for}\">{content}</label>", 36 checkboxAdd: "<input type=\"checkbox\" name=\"{name}\" id=\"{id}\" value=\"{value}\" class=\" {validation}\" ><label for=\"{for}\" style=\"display: inline-block;\">{content}</label>" 37 + "<input class=\"underline itemExtend\" type=\"text\" value=\"{extendValue}\" rel=\"{rel}\" " 38 + "style=\"color: rgb(153, 153, 153); position: static;\">", 39 //包裹的元素 40 radioOrCheckboxWrap: "<div class=\"div_table_radio_question\" id=\"{id}\">" 41 + "<div class=\"div_table_clear_top\"></div>" 42 + " <ul class=\"ulradiocheck\">{items}<div style=\"clear: both;\"></div></ul>{discuss}</div>", 43 //填空题 44 fillInput: "<div class=\"div_table_radio_question\" id=\"{id}\"><div class=\"div_table_clear_top\"></div>" 45 + "<textarea class=\"inputtext {validation}\" style=\"overflow: auto; width: 62%; height: 22px;\" " 46 + " title='{title}' id=\"{id}\" name=\"{name}\" value='{value}'></textarea>" 47 + "<div class=\"div_table_clear_bottom\"></div></div>", 48 49 fillInputWrap: "<div class=\"div_table_radio_question\" id=\"{id}\"><div class=\"div_table_clear_top\"></div>" 50 + "{content}<div class=\"div_table_clear_bottom\"></div></div>", 51 fillInputItem: "<label>{title}</label>" 52 + "<textarea title=\"{tip}\" style=\"overflow: auto; width: 20%; height: 22px;\" " 53 + " class=\"inputtext {validation}\" value='{value}' id=\"{id}\" name=\"{name}\"></textarea>", 54 55 56 //大填空题 57 bigInput: " <div class=\"div_table_radio_question\" id=\"{id}\"><div class=\"div_table_clear_top\"></div>" 58 + "<textarea class=\"inputtext {validation}\" style=\"overflow: auto; width: 62%;\" rows=\"3\" " 59 + "id='{id}' value='{value}' name='{name}' title='{title}' ></textarea>" 60 + "<div style=\"clear: both;\"></div>" 61 + "<div class=\"div_table_clear_bottom\"></div></div>", 62 //评论框 63 discussInput: "<ul class=\"ulradiocheck\">" 64 + "<div style=\"float: left; padding: 1px; margin-top: 12px; margin-right: 5px; border: 1px solid gray\">" 65 + "<span>评论</span> </div>" 66 + "<textarea style=\"width: 60%\" rows=\"3\" name='{name}' class=\"inputtext {validation}\" id='{id}' for='{for}' ></textarea>" 67 + "<div style=\"clear: both;\"></div>" 68 + "</ul>", 69 //下拉选择题 70