jq步骤条 java_JQuery实现步骤条效果(上一步,下一步)
之前做出的步驟條是利用easyui +jquery實現的，但是他在隱藏板塊的時候用到的是display:none,這會使我在板塊中加載的js失效，所以換了一種方式，用Position。把元素脫離文檔流移出視覺區域，添加該屬性后既不會影響布局，又能讓元素保持可以操作。應用該屬性后，主要就是通過控制方向(top,left,right,bottom)，達到一定的值，離開當前可是頁面。
先看效果圖：
代碼展示：
頁面html:
基本信息教育背景工作經歷社交這是基本信息板塊
這是教育背景板塊
這是工作經歷板塊
工作地點
工作內容
這是社交板塊
上一步
下一步
js代碼展示：
$(document).ready(function(){
$("#education").addClass('main-hide');
$("#work").addClass('main-hide');
$("#social").addClass('main-hide');
$('#previous_step').hide();
/*上一步*/
$('#previous_step').bind('click', function () {
index--;
ControlContent(index);
});
/*下一步*/
$('#next_step').bind('click', function () {
index++;
ControlContent(index);
});
});
var index=0;
function ControlContent(index) {
var stepContents = ["basicInfo","education","work","social"];
var key;//數組中元素的索引值
for (key in stepContents) {
var stepContent = stepContents[key];//獲得元素的值
if (key == index) {
if(stepContent=='basicInfo'){
$('#previous_step').hide();
}else{
$('#previous_step').show();
}
if(stepContent=='social'){
$('#next_step').hide();
}else{
$('#next_step').show();
}
$('#'+stepContent).removeClass('main-hide');
$('#point'+key).addClass('c-select');
$('#line'+key).removeClass('b-select');
}else {
$('#'+stepContent).addClass('main-hide');
if(key>index){
$('#point'+key).removeClass('c-select');
$('#line'+key).removeClass('b-select');
}else if(key
$('#point'+key).addClass('c-select');
$('#line'+key).addClass('b-select');
}
}
}
}
css樣式
.processBar{
float: left;
width: 200px;
margin-top: 15px;
}
.processBar .bar{
background: rgb(230, 224, 236);
height: 3px;
position: relative;
width: 185px;
margin-left: 10px;
}
.processBar .b-select{
background: rgb(96, 72, 124);
}
.processBar .bar .c-step{
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgb(230, 224, 236);
left: -12px;
top: 50%;
margin-top: -4px;
}
.processBar .bar .c-select{
width: 10px;
height: 10px;
margin: -5px -1px;
background:rgb(96, 72, 124);
}
.main-hide {
position: absolute;
top: -9999px;
left: -9999px;
}
.poetry{
color: rgb(96, 72, 124);
font-family: KaiTi_GB2312, KaiTi, STKaiti;
font-size: 16px;
background-color: transparent;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
button{
width: 80px;
line-height: 30px;
font-size: 11px;
color: rgb(116, 42, 149);
text-align: center;
border-radius: 6px;
border: 1px solid #e2e2e2;
cursor: pointer;
background-color: #fff;
outline:none;
}
button:hover{
border: 1px solid rgb(179, 161, 200);
}
總結
以上是生活随笔為你收集整理的jq步骤条 java_JQuery实现步骤条效果(上一步,下一步)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java标志清理_JVM内存管理之GC算
- 下一篇： java并发性是指什么_java – 什