집 >웹 프론트엔드 >JS 튜토리얼 >jquery_jquery를 기반으로 한 기간 구현 코드

jquery_jquery를 기반으로 한 기간 구현 코드

WBOY원래의: 2016-05-16 17:51:151017검색

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 ='만료됨' 
} 
else if(mcode.minfo[i].status===3){ 
html ='전체 선택됨' 
 } 
if(mcode.minfo[i].status!==1){ 
html ='' 
} 
html ="} 

 
css 스타일: 

코드 복사 코드는 다음과 같습니다. :

#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} 
 
 
예: 

코드 복사 코드는 다음과 같습니다.

<머리>
<제목>

<본문>