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 基础知识 前 ...
随机推荐
- bzip2 zip 压缩后体积比 0.8:1
1. 对.bz2 后缀文件 跳过不处理 2.逐行同字段的json文件,压缩后大小为原文件的12.81% 测试文件近似认为为逐行json文本数据,没有进行多文件重复测试,没有统计时间: {"u ...
- ONLYstore_name+AdWord
情景描述ONLYstore_name+AdWord 基础表数据表 BASE_TABLEAdWord food drink1w1 1f1 1d12w2 2f_ 2d_3w1 ...
- SET NAMES
High Performance MySQL, Third Editionby Baron Schwartz, Peter Zaitsev, and Vadim Tkachenko Settings ...
- gulp处理错误
Gulp 目前的错误处理方式有点操蛋,一旦发生错误进程就挂了,得手动去重启.虽然开发者预期在 gulp 4 中解决此问题 ,但 gulp 4 什么时候发布并没有明确时间表,在此之前,还是很有必要了解一 ...
- python 基础 内置函数
内置参数 print(all([5,-1,5])) # 非0都是真 true print(all([0,-1,5])) # false print(any([1,0,5])) # 有一个数据为真,就为 ...
- android activity and fragment活动周期
1.状态 /* 每个活动一共有四种状态 *:1.运行状态,就是栈顶的那个 * 2.暂停状态:就是不处于栈顶,但是依然可见,比如对话框下面的界面 * 3.停止状态:不处于栈顶,并且不可见 * 4.销毁状 ...
- [GDAL]写入shp
C#通过Wkt码构建shp,记录写不进去! static void WriteVectorFile() { string strVectorFile = "E:\\"; // 注册 ...
- vertx读取配置文件,获得端口号
1:在src/conf目录下创建conf.json { } 2:创建Verticle, config().getInteger("http.port", 8080),将会读取配置文 ...
- git merge和git rebase
转载于http://blog.csdn.net/wh_19910525/article/details/7554489 git merge是用来合并两个分支的. git merge b # 将b分支合 ...
- NOSQL学习之二：MongoDB
MongoDB是一个高性能,开源,无模式的文档型数据库,它在许多场景下可用于替代传统的关系型数据库或键/值存储方式,是当前NoSQL数据库中比较热门的一种. MongoDB使用C++开发.不支持SQL ...