jquery_jquery를 기반으로 한 기간 구현 코드
- WBOY원래의
- 2016-05-16 17:51:15995검색
json 문자열:
코드 복사 코드는 다음과 같습니다.
var mcode={"minfo":[ {" 시간":"9:00-10:00","상태":2},{"시간":"10:00-11:00","상태":1},{"시간":" 11: 00-12:00","상태":3},{"시간":"13:00-14:00","상태":1},{"시간":"14:00-15: 00" ,"상태":1},{"시간":"15:00-16:00","상태":1},{"시간":"16:00-17:00","상태" :1 },{"time":"17:00-18:00","status":1}]};
여기서 time은 기간을 나타내고, status는 위치가 1일 때를 나타냅니다. 사용 가능하며, 2이면 만료됨을 나타내고 3시는 선택되었음을 의미합니다.
json 문자열의 데이터 값을 반복합니다.
코드 복사 코드는 다음과 같습니다.
for(var i in mcode.minfo) {
mcode.minfo[i].time mcode.minfo[i].status;
}
현재 기간이 만료되거나 가득 차면 마우스를 해당 기간으로 이동하세요. 현재 기간 해당 정보가 표시되면 프롬프트가 표시됩니다. 프롬프트를 취소하려면 마우스를 멀리 이동하세요.
현재 기간은 주황색으로 표시되어 선택할 수 있습니다.
코드 복사 코드는 다음과 같습니다.
$.each($("#test span") ,function(k,v){
if($(this).hasClass("unspan1")||$(this).hasClass("unspan2")){
$(this). hover(function (){
$(this).find("label").css({"display":"block"});
$(this).find("em").css ({" 디스플레이":"블록"});
}, function(){
$(this).find("label").css({"display":"none"})
$ (this).find("em").css({"display":"none"})
})
}
else{
$(this). click(function (){
$("#result").empty().html("선택한 항목:" $(this).text());
}); >} );
문자열을 연결하여 HTML 구조를 만듭니다.
코드 복사 코드는 다음과 같습니다.
for(var i in mcode.minfo) { if(mcode.minfo[i].status===2){
html ='}
else{
html ='';
}
else{
html ='mspan" >';
}
html =mcode.minfo[i].time;
if(mcode.minfo[i].status===2){
html ='
html ='}
else{
html ='';
}
else{
html ='mspan" >';
}
html =mcode.minfo[i].time;
if(mcode.minfo[i].status===2){
html ='
코드 복사 코드는 다음과 같습니다. :
#test{ 너비: 430px; 패딩: 35px; 테두리: 1px 솔리드 #666666;오버플로: 숨겨진; 여백: 100px 자동 0px;} #테스트 범위{display:block; 배경: #FF6600; 높이: 30px; 텍스트 정렬: 중앙;
_display:inline; 커서: 하단 }
#test .mspan{margin-right: 20px;}
#test .unspan1{배경: #D2E0E6; 커서:기본값}
#test .unspan2{배경: #ffcaca; 커서: 기본값; }
#테스트 라벨{위치: 절대; 왼쪽:-18px; 줄 높이: 20px; 배경: #F3F3F3; 테두리: 1px ;display : none;}
#test em{display: block;border-color: #F3F3F3 transparent transparent transparent;border-style: solid;border-width: 6px 6px 6px 6px
padding: 0;width; : 0 ;높이: 0;
글꼴 크기: 0;줄 높이: 0;
위치: 절대;왼쪽:58px;
_border-top-color: #F3F3F3 ;_border-bottom-color: #F3F3F3;
_filter: 채도( color = #F3F3F3);
}
#result{ margin: 10px auto 0px: center}
예:
_display:inline; 커서: 하단 }
#test .mspan{margin-right: 20px;}
#test .unspan1{배경: #D2E0E6; 커서:기본값}
#test .unspan2{배경: #ffcaca; 커서: 기본값; }
#테스트 라벨{위치: 절대; 왼쪽:-18px; 줄 높이: 20px; 배경: #F3F3F3; 테두리: 1px ;display : none;}
#test em{display: block;border-color: #F3F3F3 transparent transparent transparent;border-style: solid;border-width: 6px 6px 6px 6px
padding: 0;width; : 0 ;높이: 0;
글꼴 크기: 0;줄 높이: 0;
위치: 절대;왼쪽:58px;
_border-top-color: #F3F3F3 ;_border-bottom-color: #F3F3F3;
_filter: 채도( color = #F3F3F3);
}
#result{ margin: 10px auto 0px: center}
예:
코드 복사 코드는 다음과 같습니다.