jquery插件--问题类（新增&&删除）简易版
HTML:
<!doctype html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="jQuery.question.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var qst = new $.question($(".box"));
qst.initialize();
})
</script>
<link href="question.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="box">
<div class="question" qId="1">
<span class="title"><i class="red">*</i>Question<b class="num">1</b>：</span>
<input class="textInput" type="text"/>
<a class="add" title="Add">+</a>
<a class="del" title="Delete"> -</a>
</div>
<div class="question-type">
<span class="title"><i class="red">*</i>Question Type：</span>
<span class="single"><input rel="singleSel" type="radio" checked="checked"/><label rel="singleSel">Single Choice</label></span>
<span class="multiple"><input rel="multipleSel" type="radio" /><label rel="multipleSel">Multiple Choice</label></span>
<span class="subjective"><input rel="subjective" type="radio" /><label rel="subjective">Subjective Item</label></span>
</div>
<div class="answer-group">
<div class="answer singleSel">
<p class="item" aId="A">
Single Choice Answer<b class="num">A</b>：
<input class="textInput" />
<a class="add" title="Add">+</a>
<span class="del" title="Delete">-</span>
</p>
<p class="item" aId="B">
Single Choice Answer<b class="num">B</b>：
<input class="textInput" />
<a class="add" title="Add">+</a>
<a class="del" title="Delete">-</a>
</p>
</div>
<div class="answer multipleSel"style="display:none;">
<p class="item" aId="A">
Multiple Choice Answer<b class="num">A</b>：
<input class="textInput" />
<a class="add" title="Add">+</a>
<span class="del" title="Delete">-</span>
</p>
<p class="item" aId="B">
Multiple Choice Answer<b class="num">B</b>：
<input class="textInput" />
<a class="add" title="Add">+</a>
<a class="del" title="Delete">-</a>
</p>
</div>
<div class="answer subjective" style="display:none;">
<p class="item" aId="A">
Subjective Item Answer<b class="num">A</b>：
<input class="textInput" />
<a class="add" title="Add">+</a>
<span class="del" title="Delete">-</span>
</p>
<p class="item" aId="B">
Subjective Item Answer<b class="num">B</b>：
<input class="textInput" />
<a class="add" title="Add">+</a>
<a class="del" title="Delete">-</a>
</p>
</div>
</div>
</div>
</body>
</html>
question.css
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,selectth,td{margin:;padding:;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var,i{font-style:normal;}
code,kbd,pre,samp,del{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;outline:none;-moz-transition: all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img,textarea,select{border:;outline:none}
textarea{resize:none}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:;}
.cf:after{content:'\0020';clear:both;display:block;height:;}
.cf{*zoom:;}
.fl{display:inline;float:left;}
.fr{display:inline;float:right;}
.box{
padding:30px;
}
.box .add,
.box .del{
cursor:pointer;
display:inline-block;
font-size:18px;
margin-left:5px;
}
.box .textInput{
border:1px solid #ccc;
padding:5px;
line-height:14px;
}
.question-type{
margin-top:10px;
}
.box .title .red{
color:#c00;
}
.box .answer{
padding-left:30px;
margin-top:10px;
}
.box .single,.box .multiple,.box .subjective{
margin-right:10px;
}
.box .single input,.box .multiple input,.box .subjective input{
margin-right:5px;
vertical-align:middle;
vertical-align:-3px\0;
}
.box .item{
margin-bottom:10px;
}
.box a{
text-decoration:none;
}
jQuery.question.js
/**
*-----------
@Version: 1.0
@Author Qadir.Du, Qadir.du@gmail.com
@Created: 26.10.2013
@Describe Add and delete question,Add and delete answer
*-----------
***/ (function($,undefined){
'use strict';
var
//save question number
cacheQ = [1], //deleted question number array
deletedQuestionNumArr =[]; $.question = function(container){
this.container = container;
}
$.question.prototype ={
initialize:function(){
this.addQuestion();
this.deleteQuestion();
this.changeQuestionType();
this.addAnswer();
this.deleteAnswer();
},
//add question
addQuestion:function(){
var _self = this; //bind the click event of add
_self.container.delegate('.question .add','click',clickAdd);
function clickAdd(){
var qId = $(this).parents(".question").attr("qId"); //reassign into this.container
_self.container = $(this).parents('.box'); var addQid = _self._addQuestionId(),
clone = _self.container.clone(true);
clone.find('.question').attr('qId',addQid);
clone.find('.question .title .num').html(addQid); //add the elements of new question
_self.container.after(clone.css({'opacity':0}));
if(!clone.is(":animated")) clone.animate({'opacity':'1'},300);
} },
//delete question
deleteQuestion:function(){
var _self = this; //bind the click event of delete
_self.container.delegate('.question .del','click',clickDel); function clickDel(){
var qId = $(this).parents(".question").attr("qId"); //reassign into this.container
_self.container = $(this).parents('.box'); if(cacheQ.length<=1){
alert("手下留情噢，仅有的一个问题咯！");
}else{
if(!_self.container.is(":animated"))
_self.container.animate({'opacity':0},300,function(){
_self.container.remove();
});
}
_self._deleteQuestionId(qId); } }, //return question number of to be added
_addQuestionId:function(){
if(deletedQuestionNumArr.length===0){
var maxValue = this._max(cacheQ);
cacheQ.push(maxValue+1);
return maxValue+1;
}else{
deletedQuestionNumArr =this._uniq(deletedQuestionNumArr);
this._sort(deletedQuestionNumArr);
var dns = deletedQuestionNumArr.shift();
cacheQ.push(dns);
return dns;
}
},
//Delete the specified number from cacheQ ，then push the deleted number to deletedNumArr
_deleteQuestionId:function(qId){
for(var i=0;i<cacheQ.length;i++){
if(cacheQ[i]===parseInt(qId)&&cacheQ.length !== 1){
deletedQuestionNumArr.push(cacheQ[i]);
//Delete the specified number from cacheQ
cacheQ.splice(i,1);
break;
}
} },
//remove duplicate array elements
_uniq:function(arr){
var newArr=[],obj={};
for(var i=0,len=arr.length;i<len;i++){
if(obj[typeof(arr[i]) + arr[i]]!=='undefined'){
newArr.push(arr[i]);
obj[typeof(arr[i])+arr[i]]='undefined';
}
}
return newArr;
},
//sort ascending
_sort:function(arr){
arr.sort(function(a,b){
return a>b;
})
},
//get max value of Array
_max : function(arr){
return Math.max.apply(Math,arr);
},
//change question type
changeQuestionType:function(){
this.container.delegate(".question-type input[type='radio'],.question-type label",'click',changeClick);
function changeClick(){
var rel = $(this).attr("rel"),
$parentsType =$(this).parents(".question-type");
$(this).parent().siblings().find("input[type='radio']").removeAttr("checked");
$(this).parent().find("input[type='radio']").attr("checked","checked");
$parentsType.next(".answer-group").find(".answer").hide();
$parentsType.next(".answer-group").find(".answer").filter("."+rel).show();
}
},
//add answer
addAnswer:function(){
var _self = this; //bind the click event of add
_self.container.delegate('.answer-group .add','click',clickAdd);
function clickAdd(){ var arr =[],
$parent = $(this).parent('.item'),
$parents = $(this).parents('.answer').find(".item"),
clone =$parent.clone(true);
$parents.each(function(){
arr.push($(this).attr('aId'));
})
if(arr.length >=26){
alert("26个答案够您用的!");
}else{
var addAid = _self._addAnswerId(arr); clone.attr('aId',addAid); clone.find('.num').html(addAid); //add the elements of new question
$parent.after(clone.css({'opacity':0}));
if(!clone.is(":animated")) clone.animate({'opacity':'1'},300);
}
}
},
//delete answer
deleteAnswer:function(){
var _self = this; //bind the click event of delete
_self.container.delegate('.answer-group .del','click',clickDel); function clickDel(){
var $parent = $(this).parent('.item'),
$parents = $(this).parents('.answer').find(".item"),
len = $parents.length;
if(len<=1){
alert("只有一个答案了,so easy!");
}else{
if(!$parent.is(":animated"))
$parent.animate({'opacity':0},300,function(){
$parent.remove();
});
} }
}, //return answer number of to be added
_addAnswerId:function(arr){
//answer correlation array
var tempArr = ['A','B','C','D','E',
'F','G','H','I','J','K','L','M','N','O','P',
'Q','R','S','T','U','V','W','X','Y','Z'],
aId='';
for(var i=0;i<arr.length;i++){
for(var j=0;j<tempArr.length;j++){
if(arr[i]==tempArr[j]){
tempArr.splice(j,1);
break;
} }
}
aId = tempArr[0];
tempArr= null;
return aId; }
} })(jQuery)
DEMO:http://jsfiddle.net/seamar/Z7QFA/2/
jquery插件--问题类（新增&&删除）简易版的更多相关文章
- 【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- 简易版jquery
最近写了一个简易版的jquery github地址:https://github.com/jiangzhenfei/Easy-Jquery 完成的方法: 1.$('#id') 2.extend扩展 ...
- JQuery插件ajaxFileUpload 异步上传文件（PHP版）
太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...
- 基于jquery的提示框JavaScript 插件，类Bootstrap
目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...
- jQuery插件实例五：手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
- 简易jQuery插件
之前写过jQuery插件的笔记 如何用jQuery封装插件 我一直觉得前面讲了一大堆闭包和三种插件封装模式有点冗余,那篇笔记我直到记录到后面才发现这事情很简单,想来想去还是觉得网上的一些文章把事情搞复 ...
- 第7章 jQuery插件的使用和写法
第7章 jQuery插件的使用和写法 插件又称扩展,是一种遵循一定规范的应用程序接口写出来的程序. 插件的编写思想基于面向对象. 获取最新的插件可以查看jquery官网:http://plugins. ...
- jQuery插件之validation插件
前面的话 最常使用javascript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件——Validation.Validation是历史最悠久 ...
- 学生管理系统（SSM简易版）总结
之前用 Servlet + JSP 实现了一个简易版的学生管理系统,在学习了 SSM 框架之后,我们来对之前写过的项目重构一下! 技术准备 为了完成这个项目,需要掌握如下技术: Java 基础知识 前 ...
随机推荐
- ArcGIS API for javascript开发笔记（五）——GP服务调用之GP模型的发布及使用详解
感谢一路走来默默陪伴和支持的你~~~ ----------------欢迎来访,拒绝转载---------------- 关于GP模型的制作请点我! 一.GP发布 ArcGIS Desktop可以作为 ...
- JIRA licence and vulnarability,jenkins,devops
http://blog.itpub.net/13651903/viewspace-1079918/ http://www.freebuf.com/articles/web/34051.html JIR ...
- postgreSQL 自增需要使用序列
postgreSQL 自增需要使用序列 1.使用SERIAL CREATE TABLE users ( id SERIAL4 primary key , name character varying, ...
- 数据库级别DDL操作监控审计、数据库触发器/服务器触发器
关键词:数据库触发器/服务器触发器 ,数据库级别DDL操作监控审计,禁止修改登录名密码 [1]数据库级别DDL操作监控审计 转自2012示例库,只能数据库级别,不能实例级别 use database ...
- phpsocketclient以及server样例
一个菜鸟朋友,突然问了我这个问题...如今稍稍有点时间,就写了一个简单的样例给他,顺便贴上来 server端: <? php /** * @author 邹颢 zouhao619@gmail.c ...
- 007-Redi-命令-脚本命令、链接命令、服务器命令、事务、HyperLogLog
Redis 脚本命令 下表列出了 redis 脚本常用命令: 序号 命令及描述 1 EVAL script numkeys key [key ...] arg [arg ...] 执行 Lua 脚本. ...
- Git、bower 安装
1>下载并安装nodejs .老师分享的nodejs版本“node-v8.9.4-x64” 下载页面http://nodejs.cn/download/ 一直无脑下一步操作即可安装完毕 ...
- HTML5-Canvas 初认识
1. 理解canvas canvas其实是HTML5中一个新增加的标签,对于canvas标签本身并没有什么非常强大的属性(width.height.id.class.style),仅仅作为一个画布存在 ...
- [py]监控内存并出图
监控内存出图 先将内存数据搞到数据库 已使用内存算法 used = int(total) - int(free) - int(butffers) - int(cache) pymysql模块使用 db ...
- jquery closest & parent比较
.closest() .parents() 从当前元素开始 从父元素开始 沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止. 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加 ...