jQuery基于mui框架手机端答题系统代码



73 288 97



特效描述:jQuery 基于mui框架 手机端答题系统,jQuery基于mui框架手机端答题系统代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="fonts/iconfont.css">
<link rel="stylesheet" href="css/font.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mui.css">

2. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/TouchSlide.1.1.js"></script>
<script src="js/mui.min.js"></script>

3. HTML代码

<header>
	<div class="titlebar reverse" >
	   <div >
			<i class="iconfont">&#xe639;</i>
			<i style="color:#ffffff;font-size:20px;font-weight:bold;margin-left:10px;">左右滑动翻题</i>
	   </div>
	</div>
</header>
<article style="padding-bottom:44px;padding-top:44px;" id="leftTabBox">
<div class="bd" id="bd12">
	<div class="test" style="margin-top:10px;">
	   <div class="test_con">
		  <div class="item">
			 <div class="tit">
				<span>1</span>
				<input type="hidden" id="1" value="1"></input>题目内容
			 </div>
			 <div class="item_con">
				<div class="answ">
				   <input type='hidden' name='QuestionA1' class='answ' id='QuestionA1' value='' />
				   <ul> 
					  <li class='options' ids='1' val='答案A'><i>答案A</i></li>
					  <li class='options' ids='1' val='答案B'><i>答案B</i></li>
					  <li class='options' ids='1' val='答案C'><i>答案C</i></li>
					  <li class='options' ids='1' val='答案D'><i>答案D</i></li>
					</ul>
				</div>
			</div><!--item_con结束-->
		</div><!--item结束-->
	 </div><!--test_con结束-->
  </div><!--test结束-->
  <div class="test" style="margin-top:10px;">
	   <div class="test_con">
		  <div class="item">
			 <div class="tit">
				<span>2</span>
				<input type="hidden" id="2" value='2'></input>题目内容
			 </div>
			 <div class="item_con">
				<div class="answ">
				   <input type='hidden' name='QuestionA2' class='answ' id='QuestionA2' value='' />
				   <ul> 
					  <li class='options' ids='2' val='答案A'><i>答案A</i></li>
					  <li class='options' ids='2' val='答案B'><i>答案B</i></li>
					  <li class='options' ids='2' val='答案C'><i>答案C</i></li>
					  <li class='options' ids='2' val='答案D'><i>答案D</i></li>
					</ul>
				</div>
			</div><!--item_con结束-->
		</div><!--item结束-->
	 </div><!--test_con结束-->
  </div><!--test结束-->
  <div class="test" style="margin-top:10px;">
	   <div class="test_con">
		  <div class="item">
			 <div class="tit">
				<span>3</span>
				<input type="hidden" id="3" value="3"></input>题目内容
			 </div>
			 <div class="item_con">
				<div class="answ">
				   <input type='hidden' name='QuestionA3' class='answ' id='QuestionA3' value='' />
				   <ul> 
					  <li class='options' ids='3' val='答案A'><i>答案A</i></li>
					  <li class='options' ids='3' val='答案B'><i>答案B</i></li>
					  <li class='options' ids='3' val='答案C'><i>答案C</i></li>
					  <li class='options' ids='3' val='答案D'><i>答案D</i></li>
					</ul>
				</div>
			</div><!--item_con结束-->
		</div><!--item结束-->
	 </div><!--test_con结束-->
  </div><!--test结束-->
  <div class="test" style="margin-top:10px;">
	   <div class="test_con">
		  <div class="item">
			 <div class="tit">
				<span>4</span>
				<input type="hidden" id="4" value="4"></input>题目内容
			 </div>
			 <div class="item_con">
				<div class="answ">
				   <input type='hidden' name='QuestionA4' class='answ' id='QuestionA4' value='' />
				   <ul> 
					  <li class='options' ids='4' val='答案A'><i>答案A</i></li>
					  <li class='options' ids='4' val='答案B'><i>答案B</i></li>
					  <li class='options' ids='4' val='答案C'><i>答案C</i></li>
					  <li class='options' ids='4' val='答案D'><i>答案D</i></li>
					</ul>
				</div>
			</div><!--item_con结束-->
		</div><!--item结束-->
	 </div><!--test_con结束-->
  </div><!--test结束-->
  <div class="test" style="margin-top:10px;">
	   <div class="test_con">
		  <div class="item">
			 <div class="tit">
				<span>5</span>
				<input type="hidden" id="5" value="5"></input>题目内容
			 </div>
			 <div class="item_con">
				<div class="answ">
				   <input type='hidden' name='QuestionA5' class='answ' id='QuestionA5' value='' />
				   <ul> 
					  <li class='options' ids='5' val='答案A'><i>答案A</i></li>
					  <li class='options' ids='5' val='答案B'><i>答案B</i></li>
					  <li class='options' ids='5' val='答案C'><i>答案C</i></li>
					  <li class='options' ids='5' val='答案D'><i>答案D</i></li>
					</ul>
				</div>
			</div><!--item_con结束-->
		</div><!--item结束-->
	 </div><!--test_con结束-->
  </div><!--test结束-->
  <div class="test" style="margin-top:10px;">
	   <div class="test_con">
		  <div class="item">
			 <div class="tit">
				<span>6</span>
				<input type="hidden" id="6" value="6"></input>题目内容
			 </div>
			 <div class="item_con">
				<div class="answ">
				   <input type='hidden' name='QuestionA6' class='answ' id='QuestionA6' value='' />
				   <ul> 
					  <li class='options' ids='6' val='答案A'><i>答案A</i></li>
					  <li class='options' ids='6' val='答案B'><i>答案B</i></li>
					  <li class='options' ids='6' val='答案C'><i>答案C</i></li>
					  <li class='options' ids='6' val='答案D'><i>答案D</i></li>
					</ul>
				</div>
			</div><!--item_con结束-->
		</div><!--item结束-->
	 </div><!--test_con结束-->
  </div><!--test结束-->
   <div class="test" style="margin-top:10px;">
	   <div class="test_con">
		  <div class="item">
			 <div class="tit">
				<span>7</span>
				<input type="hidden" id="7" value="7"></input>题目内容
			 </div>
			 <div class="item_con">
				<div class="answ">
				   <input type='hidden' name='QuestionA7' class='answ' id='QuestionA7' value='' />
				   <ul> 
					  <li class='options' ids='7' val='答案A'><i>答案A</i></li>
					  <li class='options' ids='7' val='答案B'><i>答案B</i></li>
					  <li class='options' ids='7' val='答案C'><i>答案C</i></li>
					  <li class='options' ids='7' val='答案D'><i>答案D</i></li>
					</ul>
				</div>
			</div><!--item_con结束-->
		</div><!--item结束-->
	 </div><!--test_con结束-->
  </div><!--test结束-->
  <div class="test" style="margin-top:10px;">
	   <div class="test_con">
		  <div class="item">
			 <div class="tit">
				<span>8</span>
				<input type="hidden" id="8" value="8"></input>题目内容
			 </div>
			 <div class="item_con">
				<div class="answ">
				   <input type='hidden' name='QuestionA8' class='answ' id='QuestionA8' value='' />
				   <ul> 
					  <li class='options' ids='8' val='答案A'><i>答案A</i></li>
					  <li class='options' ids='8' val='答案B'><i>答案B</i></li>
					  <li class='options' ids='8' val='答案C'><i>答案C</i></li>
					  <li class='options' ids='8' val='答案D'><i>答案D</i></li>
					</ul>
				</div>
			</div><!--item_con结束-->
		</div><!--item结束-->
	 </div><!--test_con结束-->
  </div><!--test结束-->
  <div class="test" style="margin-top:10px;">
	   <div class="test_con">
		  <div class="item">
			 <div class="tit">
				<span>9</span>
				<input type="hidden" id="9" value="9"></input>题目内容
			 </div>
			 <div class="item_con">
				<div class="answ">
				   <input type='hidden' name='QuestionA9' class='answ' id='QuestionA9' value='' />
				   <ul> 
					  <li class='options' ids='9' val='答案A'><i>答案A</i></li>
					  <li class='options' ids='9' val='答案B'><i>答案B</i></li>
					  <li class='options' ids='9' val='答案C'><i>答案C</i></li>
					  <li class='options' ids='9' val='答案D'><i>答案D</i></li>
					</ul>
				</div>
			</div><!--item_con结束-->
		</div><!--item结束-->
	 </div><!--test_con结束-->
  </div><!--test结束-->
   <div class="test" style="margin-top:10px;">
	   <div class="test_con">
		  <div class="item">
			 <div class="tit">
				<span>10</span>
				<input type="hidden" id="10" value="10"></input>题目内容
			 </div>
			 <div class="item_con">
				<div class="answ">
				   <input type='hidden' name='QuestionA10' class='answ' id='QuestionA10' value='' />
				   <ul> 
					  <li class='options' ids='10' val='答案A'><i>答案A</i></li>
					  <li class='options' ids='10' val='答案B'><i>答案B</i></li>
					  <li class='options' ids='10' val='答案C'><i>答案C</i></li>
					  <li class='options' ids='10' val='答案D'><i>答案D</i></li>
					</ul>
				</div>
			</div><!--item_con结束-->
		</div><!--item结束-->
	 </div><!--test_con结束-->
  </div><!--test结束-->
</div><!--bd结束-->
<div class="clear"></div>
</article>
<script type="text/javascript"> 
TouchSlide({slideCell:"#leftTabBox"});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动星星打分 其他 图片滑动 图片滑块 答题

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到