基于jQuery试卷自动排版系统

2024-11-27 02:08:15

需求
根据提供的试卷题目（是一个干净的只有“数据”的HTML网页）生成一份多页的试卷，用户能执行翻页、具有答题时间限制，展示给用户的试卷中题目需要占用尽量少的空间（比如选择题中把两条较短的选项由两行合并到一行）、同一道题目不要跨页面显示以方便答题者，管理员能够改变试卷的样式（字体、颜色、行距、页面边距，像字处理软件一样……），题目之间可以插入一些说明性的文字（比如告知答题者作答的须知等等）。题目提干、选择题的选项、说明文字可以包含多媒体信息（文字、图片、列表、表格、视频等等……）。选择题选项数目不限、单选多选不限。翻页要有可订制的动画效果

提供的试卷样板类似如下（Input）：

代码如下:

<ol id="olThePaper">
<div class="Desc">选择题：说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。</div>
<div class="Problem" id="1">
<li>1.你认为怎样的老师是好老师？</li>
<div class="Choices">
<label><input type="radio" name="prob1" value="A" />和学生平等相处，能全面满足学生各种需要</label>
<label><input type="radio" name="prob1" value="B" />所在教学班的成绩优于其他平行班</label>
<label><input type="radio" name="prob1" value="C" />严格管理学生、所带的班级班风良好</label>
<label><input type="radio" name="prob1" value="D" />父母般地关心学生的生活和情绪状态</label>
</div>
</div>
<div class="Problem" id="2">
<li>2.一位有15年教龄的英语教师，教了多年高三，可谓学校的核心骨干。一次接受邀请到外校介绍教学经验，台下有老师发表了观点并问到几个英语教法发面的问题，一下子把她给卡住了。这是因为</li>
<div class="Choices">
<label><input type="radio" name="prob2" value="A" />她最近工作太累，注意力不够集中。</label>
<label><input type="radio" name="prob2" value="B" />提问老师的观点和她的有很大不同。</label>
<label><input type="radio" name="prob2" value="C" />由于长时间在教学一线拼搏，她对教学理论问题的关注度不高。</label>
<label><input type="radio" name="prob2" value="D" />对学科教学的归纳和思考少，一时加工不过来。</label>
</div>
</div>
<div class="Problem" id="3">
<li>3.哪张图片最好看？</li>
<div class="Choices">
<label><input type="radio" name="prob3" value="A" />这一张<img src="img1.png" height="300px" width="400px" alt="img1"/>好看。</label>
<label><input type="radio" name="prob3" value="B" />这一张<img src="img2.png" height="300px" width="400px" alt="img2"/>好看。</label>
<label><input type="radio" name="prob3" value="C" />这一张<img src="img3.png" height="300px" width="400px" alt="img3"/>好看。</label>
<label><input type="radio" name="prob3" value="D" />这一张<img src="img4.png" height="300px" width="400px" alt="img4"/>好看。</label>
<label><input type="radio" name="prob3" value="E" />不知道。</label>
</div>
</div>
<div class="Desc">填空题和选择题：一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。</div>
<div class="Problem" id="4">
<li>4.床前明月光，<input type="text" name="prob4" /></li>
</div>
<div class="Problem" id="5">
<li>5.你认为怎样的老师是好老师？</li>
<div class="Choices">
<label><input type="checkbox" name="prob6" value="D" />和</label>
<label><input type="checkbox" name="prob6" value="A" />所</label>
<label><input type="checkbox" name="prob6" value="B" />严</label>
<label><input type="checkbox" name="prob6" value="C" />父</label>
<label><input type="checkbox" name="prob6" value="E" />和班的成绩班的成绩班的成绩班的成绩班的成绩</label>
<label><input type="checkbox" name="prob6" value="F" />所班的成绩班的成绩班的成绩</label>
<label><input type="checkbox" name="prob6" value="G" />严班的班的成绩班的成绩班的成绩班的成绩</label>
<label><input type="checkbox" name="prob6" value="H" />啊</label>
</div>
</div>
</ol>

思路
面对这种需求该怎么办呢？使用JavaScript了，看来。后来决定用jQuery，Aptana作IDE（虽然jQuery支持库在Windows上死活装不上去，换了个OS就好了，奇怪），格式么就用CSS了。

具体步骤：

导入试卷题目HTML
对所有选择题进行排版，把一行划分为四个位置，使选项尽量适应一个位置、两个位置或四个位置（也就是一行四项、一行两项或者一行一项的效果）
对所有题目进行分页
思路还是清晰的，但是由于浏览器众多，还是比较麻烦的，并且我是新手，没接触过jQuery之前……

实现
页面文件（和例子不同，但是格式一样的）

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>No title...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" src="lib/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script language="JavaScript" src="lib/countdown/jquery.countdown.pack.js" type="text/javascript"></script>
<script language="JavaScript" src="TestPaperProcessor.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divToolbar">
<div id="divPrev">PrevPage</div>
<div id="divNext">NextPage</div>
<div id="divPageInfo">Loading the test...</div>
<div id="divTimer"></div>
</div>
<form id="formPaper" action="demo.html" method="post" accept-charset="utf-8">
<ul>
<div class="Display" id="divLeft">
left
</div>
<div class="Display" id="divRight">
right
</div>
</ul>
<ol id="olThePaper">
<div class="Desc">选择题：说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。</div>
<div class="Problem" id="1">
<li>1你认为怎样的老师是好老师？</li>
<div class="Choices">
<label>
<input type="radio" name="prob1" value="D" />和学生平等相处，能全面满足学生各种需要
</label>
<label>
<input type="radio" name="prob1" value="A" />所在教学班的成绩优于其他平行班
</label>
<label>
<input type="radio" name="prob1" value="B" />严格管理学生/所带的班级班风良好
</label>
<label>
<input type="radio" name="prob1" value="C" />父母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class="Problem" id="2">
<li>2你认为怎样的老师是好老师？</li>
<div class="Choices">
<label>
<input type="radio" name="prob2" value="D" />和学生平jlsdjklsdf生各种需要
</label>
<label>
<input type="radio" name="prob2" value="A" />所
</label>
<label>
<input type="radio" name="prob2" value="B" />严格好
</label>
<label>
<input type="radio" name="prob2" value="C" />父母关心学生的生活和情绪状态
</label>
</div>
</div>
<div class="Problem" id="3">
<li>3你认为怎样的老师是好老师？</li>
<div class="Choices">
<label>
<input type="radio" name="prob3" value="D" />和学生平等相处，能全面满足学生各种需要
</label>
<label>
<input type="radio" name="prob3" value="A" />所在教学班的成绩优于其他平行班
</label>
<label>
<input type="radio" name="prob3" value="B" />严格管理学生/所带的班级班风良好
</label>
<label>
<input type="radio" name="prob3" value="C" />父母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class="Problem" id="4">
<li>4你认为怎样的老师是好老师？</li>
<div class="Choices">
<label>
<input type="radio" name="prob4" value="D" />和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学生各种需要
</label>
<label>
<input type="radio" name="prob4" value="A" />所在教学班的成绩优于其他平行班
</label>
<label>
<input type="radio" name="prob4" value="B" />严格管理学生/所带的班级班风良好
</label>
<label>
<input type="radio" name="prob4" value="C" />父母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class="Desc">还是选择题：一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。</div>
<div class="Problem" id="10">
<li>5你认为怎样的老师是好老师？</li>
<div class="Choices">
<label>
<input type="radio" name="prob5" value="D" />和10学生平等相处，能全面满足学生各种需要
</label>
<label>
<input type="radio" name="prob5" value="A" />所10在教学班的成绩优于其他平行班
</label>
<label>
<input type="radio" name="prob5" value="B" />严10jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj格管文字
</label>
<label>
<input type="radio" name="prob5" value="C" />父10母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class="Problem" id="5">
<li>5你认为怎样的老师是好老师？</li>
<div class="Choices">
<label>
<input type="radio" name="prob5" value="D" />和学生平等相处，能全面满足学生各种需要
</label>
<label>
<input type="radio" name="prob5" value="A" />所在教学班的成绩优于其他平行班
</label>
<label>
<input type="radio" name="prob5" value="B" />严jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj格管<img src="aaaa9.jpg" height="300px" width="400px" alt="pic"/>文字
</label>
<label>
<input type="radio" name="prob5" value="C" />父母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class="Problem" id="6">
<li>6你认为怎样的老师是好老师？</li>
<div class="Choices">
<label>
<input type="radio" name="prob6" value="D" />和
</label>
<label>
<input type="radio" name="prob6" value="A" />所
</label>
<label>
<input type="radio" name="prob6" value="B" />严
</label>
<label>
<input type="radio" name="prob6" value="C" />父
</label>
<label>
<input type="radio" name="prob6" value="E" />和班的成绩班的成绩班的成绩班的成绩班的成绩
</label>
<label>
<input type="radio" name="prob6" value="F" />所班的成绩班的成绩班的成绩
</label>
<label>
<input type="radio" name="prob6" value="G" />严班的班的成绩班的成绩班的成绩班的成绩
</label>
<label>
<input type="radio" name="prob6" value="H" />父
</label>
</div>
</div>
</ol>
</form>
</body>
</html>

样式文件（CSS）

代码如下:

/* YahooUI CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; }
ol,ul { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
q:before,q:after { content:''; }
abbr,acronym { border: 0;}

label { padding: 0; margin: 0; }

/* My css */
.Choices { line-height: 150%; margin: 5px 0; }
.Page { height: 500px; border: solid 1px gray; }
#olThePaper, .Display { padding: 0; width: 500px; }
/* NOTICE: the width of .Display and #olThePaper should be the SAME. */
.Display { float: left; }

#divToolbar { height: 35px; }
#divPrev, #divNext { float: left; width: 100px; height: 30px; border: solid 1px green; background-color: #999999; }
#divPageInfo { float: left; width: 100px; height: 30px; }
#divTimer { float: left; width: 500px; height: 30px; }

/*for debugging... perhaps for non-IE only*/
/**label { outline: dotted 1px red; background-color: gray; }**/
/**div {outline: dashed 1px blue;}**/

下面是重点，TTestPaperProcessor.js：

代码如下:

/**
*
* @param {String} PaperOlId the id value of the ol tags indicating pages.
* @param {String} ProblemClass the css class name for problem area.
* @param {String} DescClass the css class name for description area.
* @param {String} ChoicesClass the css class name for choices area.
* @param {String} LeftPageId the id of the left page.
* @param {String} RightPageId the id of the right page.
* @author ExSystem<exsystemchina@gmail.com>
*/
function TTestPaperProcessor(PaperOlId, ProblemClass, DescClass, ChoicesClass, LeftPageId, RightPageId) {
this.FPaperOlId = PaperOlId;
this.FProblemClass = ProblemClass;
this.FDescClass = DescClass;
this.FChoicesClass = ChoicesClass;
this.FLeftPageId = LeftPageId;
this.FRightPageId =RightPageId;
$('#' + this.FLeftPageId).html('');
$('#' + this.FRightPageId).html('');
this._FormatProblemOptions();
this._DivideIntoPages();
this.setCurrPage(1);
}

TTestPaperProcessor.prototype = {
FPaperOlId: '', //the id property of the ol tag contains the whole test paper.
FProblemClass: '', //the css class name for problem area.
FDescClass: '', //the css class name for description area.
FChoicesClass: '', //the css class name for choices area.
FLeftPageId: '', //the left page.
FRightPageId: '', //the right page.
CPageClass: 'Page',
FIsDisplayTableSupported: null, //whether the browser is the EVIL M$IE6,7 that does not support display: table(-cell).
FCurrPage: 0, //start from 1, 0 for no page has been displayed yet.
FPageCount: 0, //page count.
// /**
// * Get external css stylesheet info.
// * @param {String} Selector The selector in the css style sheet.
// * @param {String} Property The property name.
// * @return {String} The value of the property, or null for undefined property.
// */
// _GetCssInfo: function(Selector, Property) {
// var mCss = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
// for (var mIndex = 0; mIndex < mCss.length; ++mIndex) {
// if (mCss[mIndex].selectorText.toLowerCase() == Selector) {
// return mCss[mIndex].style[Property];
// }
// }
// return null;
// },

/**
* @return {Boolean}
*/
_IsDisplayTableSupported: function() {
if (this.FIsDisplayTableSupported != null) {
return this.FIsDisplayTableSupported;
}

this.FIsDisplayTableSupported = !(jQuery.browser.msie && jQuery.browser.version < 8.0);
return this.FIsDisplayTableSupported;
},

/**
* Formats radios and checkboxes for the Choices quiz.
*/
_FormatProblemOptions: function() {
var mThis = this;
var mSelector = '.' + this.FProblemClass + ' .' + this.FChoicesClass;
$(mSelector).each(function() {
//Rearrange the options for each problem ordered by offsetWidth of the label tag.
var mLabels = new Array();
mLabels = jQuery.makeArray($('label', this));
mLabels.sort(function(First, Second) {
return $(Second).outerWidth(true) > $(First).outerWidth(true);
});
$(mLabels).appendTo(this);

//Layout the options into the appropreate form.
var mSlots = -1; //Force to create a new row, inside the while() loop.
var mSlotWidth = $(mSelector).width() / 4.0;
var mCellSize = 0;
if (mThis._IsDisplayTableSupported()) {
while (mLabels.length > 0) {
//alert($(mLabels[0]).outerWidth(true) + '::' + $(mLabels[0]).outerHeight(true) + '::' + $(mLabels[0]).html());
if (mSlots <= 0) { //If no empty slot, create a new row.
mCurrRow = $('<div class="___table" style="display: table;"></div>');
mCurrRow.appendTo(this);
mSlots = 4;
mCellSize = 0;

/**
* Create a new page, and add it to the paper.
* @return {jQuery} the new page.
*/
_CreateNewPage: function() {
++this.FPageCount;

mPage = $('<div class="' + this.CPageClass + '" id="___page_' + this.FPageCount + '"></div>');
mPage.appendTo($('#' + this.FPaperOlId));

return mPage;
},

/**
*
* @param {Number} PageNumber
* @return {jQuery}
*/
_GetPage: function(PageNumber) {
if (PageNumber < 1 || PageNumber > this.FPageCount) {
throw new Error('invalid page number: ' + PageNumber + '.');
}
return $('#___page_' + PageNumber);
},

/**
*
*/
_DivideIntoPages: function() {
var mProblems = $('.' + this.FProblemClass + ', .' + this.FDescClass);
var mProblemsCount = mProblems.length;
var mCurrPage = this._CreateNewPage();
//var mPageHeight = mCurrPage.attr('offsetHeight'); chrome: sometimes 0. safari: always 0, IF PUTTED IN $(window).ready().
var mPageHeight = mCurrPage.outerHeight(true); //the same as the code above. FIX: PUT IT INTO $(window).load().
var mUsedPageHeight = 0;
for (var mCurrProblem = 0; mCurrProblem < mProblemsCount; ++mCurrProblem) {
if (mUsedPageHeight + $(mProblems[mCurrProblem]).outerHeight(true) > mPageHeight) {
mCurrPage.hide();
mCurrPage = this._CreateNewPage();
mPageHeight = mCurrPage.outerHeight(true);
mUsedPageHeight = 0;
}
$(mProblems[mCurrProblem]).appendTo(mCurrPage);
mUsedPageHeight += $(mProblems[mCurrProblem]).outerHeight(true);
}
mCurrPage.hide();
},
/**
* Get the current page of the left side, started from 1.
* @return {Number} The current page.
*/
getCurrPage: function() {
if (this.FPageCount == 0) {
throw new Error('No page has been created yet.');
}
return this.FCurrPage;
},
/**
* Trun to a specific page in the left side.
* @param {Number} Value The page number.
*/
setCurrPage: function(Value) {
if (Value < 1 || Value > this.FPageCount) {
throw new Error('No such page: ' + Value + '.');
}
this.FCurrPage = parseInt(Value / 2) * 2 + 1; // to get an odd number.
$('#' + this.FLeftPageId + ' .' + this.CPageClass).hide();
$('#' + this.FRightPageId + ' .' + this.CPageClass).hide();
if (this.FCurrPage >= 0) {
$('#___page_' + this.FCurrPage).appendTo($('#' + this.FLeftPageId));
$('#___page_' + this.FCurrPage).show('fast');
if (this.FCurrPage < this.FPageCount) {
++this.FCurrPage;
$('#___page_' + this.FCurrPage).appendTo($('#' + this.FRightPageId));
$('#___page_' + this.FCurrPage).show('fast');
--this.FCurrPage;
}
}
},
/**
* @retrun {Number}
*/
getPageCount: function() {
return this.FPageCount;
},
/**
*
*/
Prev: function() {
this.setCurrPage(this.FCurrPage - 2);
},
/**
*
*/
Next: function() {
this.setCurrPage(this.FCurrPage + 2);
}
};

//client code goes here...
$(window).load(function() {
var obj = new TTestPaperProcessor('olThePaper', 'Problem', 'Desc', 'Choices', 'divLeft', 'divRight');
$('#divPrev').click(function() {
try {
obj.Prev();
$('#divPageInfo').text(obj.getCurrPage() + ' of ' + obj.getPageCount());
}
catch (e) {
alert('No such page!');
}
});
$('#divNext').click(function() {
try {
obj.Next();
$('#divPageInfo').text(obj.getCurrPage() + ' of ' + obj.getPageCount());
}
catch (e) {
alert('No such page!');
}
});
//USAGE: http://keith-wood.name/countdown.html
function TimeUp() {
$('#formPaper').submit();
}
$('#divTimer').countdown({
until: '+90m',
compact: true,
format: 'HMS',
description: '',
onExpiry: TimeUp
});
$('#divPageInfo').text(obj.getCurrPage() + ' of ' + obj.getPageCount());
});

嘿嘿，其实这是一个俺们学校一位博导老师的项目的一部分～～托给我做了。马上要出门了，回来放源文件下载，就可以看到效果了～～昨天回来太晚了，现在放出源代码文件下载：点击此处
/201007/yuanma/TestPaperProcessor.rar

网页颜色搭配技巧文字字体、字号、字体排版等

对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但是,浏览一下大型的商业网站,你会发现他们更多运用的是白色.蓝色.黄色等,使得网页显得典雅,大方和温馨.更重要的是,这样可以大大加快浏览者打开网页的速度. 一般来说,网页的背景色应该柔和一些.素一些.淡一些,再配上深色的文字,使人看起来自然.舒畅.而为了追求醒目的视觉效果,可以为标题使用较深的颜色.下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可以做标题的底色,再搭配不同的
基于jQuery的试卷自动排版系统实现代码

根据提供的试卷题目(是一个干净的只有"数据"的HTML网页)生成一份多页的试卷,用户能执行翻页.具有答题时间限制,展示给用户的试卷中题目需要占用尽量少的空间(比如选择题中把两条较短的选项由两行合并到一行).同一道题目不要跨页面显示以方便答题者,管理员能够改变试卷的样式(字体.颜色.行距.页面边距,像字处理软件一样--),题目之间可以插入一些说明性的文字(比如告知答题者作答的须知等等).题目提干.选择题的选项.说明文字可以包含多媒体信息(文字.图片.列表.表格.视频等等--).选择题选项
Android实现文本排版

在项目中有一个小功能需要实现,就是对多行文本进行排版布局,每一行的内容又分为两部分,左边为标题,右边为描述,左边内容长度不确定,右边的内容需要对齐,如有换行也需要对齐右边的文本. 一.效果图可以看到内容分成了两部分,左边的颜色与右边不一致,右边的描述文案统一对齐. 二.实现方案以上功能,由于输入内容输入行数不确定,并且左边的文案长度也不确定,因此不能直接在布局中实现,基于此这里主要实现了以下6种方式方案1 采用自定义控件的方式,继承TextView,重新onDraw函数,实现如下: /**
Android重写TextView实现文字整齐排版的方法(附demo源码下载)

本文实例讲述了Android重写TextView实现文字整齐排版的方法.分享给大家供大家参考,具体如下: XRTextView类 package rong.android.test; import org.json.JSONArray; import org.json.JSONException; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; impor
div+css排版的样例

div+css排版的样例 Div布局 body{text-align:center;margin:0;padding:0} /*text-align:center是ie中必须要有的*/ div { height:200px; color:red; } .title { margin:0 auto; width:776px; background-color:#abcdef; } .middle { margin:0 auto; width:776px; } .left { float:left;
文本左右对齐排版的批处理

如1.txt内容如下.复制内容到剪贴板代码: 111111111111111111111 98912 张三 222222222222222222 150020 李四四 333333333333333333333 360000 王五 444444444444444444 2332 赵六六 555555555555555555 222 田七 666666666666666666666 999999 舞吧通过批处理输出为:复制内容到剪贴板代码: 111111111111111111111 98912
PHP 中英文混合排版中处理字符串常用的函数

# 判断某个位置是中文字符的左还是右半部分,或不是中文 # 返回值 -1 左 0 不是中文字符 1 右 # 用法 /* $a = 'this is 中文'; print is_chinese($a, 1); // 0 print is_chinese($a,8); // -1 print is_chinese($a,9); // 1 */ function is_chinese(&$str, $location) { $ch = true; $i = $location;
11个用于提高排版水平的基于jquery的文字效果插件

排版是在网页设计当中的一个重要的元素,实现一个高层次的排版风格可以让你的网页设计看起来更令人叹为观止,当你看到一些非同寻常的排版样式,你很好奇这些绚丽的色彩文字搭配效果是如何实现的,往往我们第一印象是使用CSS实现的,可是对于自己来说感到又有一定的难度,如今的瀑布流效果,大背景缩略图效果,我们其中只关注了图片绚丽的布局,其实还有一个细节就是文字色彩排版的实现,这个其实是主要的,有一些专门用于这些效果的jQuery插件,你可以实现卓越的排版设计在您的网站上.我们都知道,在传统的排版当中使用DIV+
基于Jquery制作图片文字排版预览效果附源码下载

基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree
基于jQuery试卷自动排版系统

需求根据提供的试卷题目(是一个干净的只有"数据"的HTML网页)生成一份多页的试卷,用户能执行翻页.具有答题时间限制,展示给用户的试卷中题目需要占用尽量少的空间(比如选择题中把两条较短的选项由两行合并到一行).同一道题目不要跨页面显示以方便答题者,管理员能够改变试卷的样式(字体.颜色.行距.页面边距,像字处理软件一样--),题目之间可以插入一些说明性的文字(比如告知答题者作答的须知等等).题目提干.选择题的选项.说明文字可以包含多媒体信息(文字.图片.列表.表格.视频等等--).选择
基于jQuery的自动完成插件

下面是html测试代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title&
招聘网站基于jQuery实现自动刷新简历

将代码中res_id_encode参数的值,如5830549229E3096684665改成自己猎聘账户相关的ID即可.如何查看自己的ID,只要打开F12,点一下猎聘网个人中心的刷新简历,在network里面就能看到类似代码中的get请求了,把该请求的参数复制出来即可,替换res_id_encode的值后,将代码复制到console里运行. function refreshResume() { $.post('/resume/refreshresume/','res_id_encode=5830
基于jQuery实现搜索关键字自动匹配功能

今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut
基于jquery实现的自动补全功能

本文实例讲述了基于jquery实现的自动补全功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: $(function() { // 自动补全 var maxcount = 0;// 表示他最大的值 var thisCount =0;// 初始化他框的位置 $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; pos
基于cobbler 实现自动安装linux系统

1.安装个组件 yum install epel-rpm-macros.noarch -y #安装epel源 yum install -y cobbler cobbler-web dhcp tftp-server pykickstart httpd rsync xinetd cobbler \ ##安装cobbler\ cobbler-web \ ##提供web管理 dhcp \ ##地址分配服务 tftp-server \ ##放压缩和引导文件 pykickstart \ ##Python开发
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理

在线编辑内容的时候,那些基于 JavaScript 的编辑器帮了我们大忙,这些所见即所得(WYSIWYG)编辑器,给我们提供了类似 Office?的操作体验.如今,任何网站内容管理系统(CMS)和博客系统都需要一个这样的编辑器.本文精选了5个基于 JavaScript?的编辑器,5个基于 jQuery 框架的编辑器. MarkitUp – jQuery Official Website | Demo markItUp! 它不是一个"全功能,乱用"的编辑器.相反,它是一个非常轻量级的,可
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

情景目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #

基于jQuery试卷自动排版系统

相关推荐

随机推荐