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 基础知识 前 ...
随机推荐
- YARN架构设计详解
一.YARN基本服务组件 YARN是Hadoop 2.0中的资源管理系统,它的基本设计思想是将MRv1中的JobTracker拆分成了两个独立的服务:一个全局的资源管理器ResourceManager ...
- Image processing in Python
http://scikit-image.org/docs/dev/auto_examples/
- iOS常用基础框架
一,简述 1.1,IOS操作系统的层次架构 iOS为应用程序开发提供了许多可使用的框架,并构成IOS操作系统的层次架构,分为四层,从上到下依次为:Cocoa Touch Layer( ...
- ArcGIS URL 组成
转自帮助文档:http://server.arcgis.com/zh-cn/server/latest/administer/windows/components-of-arcgis-urls.htm ...
- linux系统下添加计划任务执行php文件方法
在web开发过程中,经常需要设定一些定期执行的任务,比如商品定时上下架.我们以php文件为例,讲解linux下的计划任务,来看看吧 在web开发过程中,经常需要设定一些定期执行的任务,比如商品定时 ...
- Python开发【算法】：斐波那契数列两种时间复杂度
斐波那契数列 概述: 斐波那契数列,又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21.34.……在数学上,斐波纳契数列以如下被以递归的方法定义:F(0)=0,F(1)=1, ...
- CentOS7.2配置vsftpd
环境 CentOS7.2 (安装镜像CentOS-7-x86_64-DVD-1611) 本文默认使用root用户操作 目标 实现CentOS7.2上安装vsftpd,使用新创建的ftpuser用户便可 ...
- c#按照指定长度切分字符串
int pageSize=5; var array = new List<string>(); ----------方法1-------------------- var pageCoun ...
- sklearn_SVM
一.用SVM实现二分类: 支持向量机分类器,是在数据空间中找出一个超平面作为决策边界,利用这个决策边界来对数据进行分类,并使分类误差尽量小的模型 ...
- 集成树模型使用自动搜索模块GridSearchCV，stacking
一. GridSearchCV参数介绍 导入模块: from sklearn.model_selection import GridSearchCV GridSearchCV 称为网格搜索交叉验证调参 ...