jQuery 간이 시간 축 실현 방법 예시

본 고의 실례 는 jQuery 간이 시간 축 실현 방법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>timeLine</title>
  <style>
    body{
      margin: 0;
      padding: 0;
      background: #e8ffe8;
    }
    #head, #content, #footer{
      width: 1000px;
      margin: 0 auto;
    }
    #head{
      text-align: center;
      height: 100px;
      line-height: 100px;
    }
    #footer{
      clear: both;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
    /*-----   -----*/
    .bigElement{
      clear: both;
      position: relative;
    }
    .bigTitle{
      font-size: 16px;
      font-weight: bold;
      height: 70px;
      line-height: 70px;
      background: #e8ffe8;
      color: #635d5a;
    }
    .bigAction, .bigInfo{
      float: left;
    }
    .bigAction{
      border-right: 3px solid #635d5a;
      text-align: right;
      width: 220px;
    }
    .bigButtonSeeMore{
      float: right;
      width: 70px;
      height: 70px;
      text-align: center;
    }
    .bigButtonSeeMore > a{
      text-decoration: none;
      display: block;
      color: #635d5a;
      outline: none;
      blr: expression(this.onFocus=this.blur());
    }
    .bigButtonSeeMore > a:hover{
      color: #8cdbff;
    }
    .bigContent{
      clear: both;
    }
    /*-----   end-----*/
    /*-----   -----*/
    .smallElement{
      clear: both;
      position: relative;
      height: auto;
      font-size: 16px;
      background: #e8ffe8;
      color: #635d5a;
    }
    .smallTitle{
      text-align: right;
      width: 220px;
    }
    .smallTitle, .smallContent{
      float: left;
    }
    .smallContent{
      border-left: 3px solid #635d5a;
    }
    .smallInfo{
      margin-top: 20px;
      text-indent: 40px;
    }
    /*-----   end-----*/
    /*-----   -----*/
    .bigTitleTrifonIconR{
      border-color: #e8ffe8 #e8ffe8 #e8ffe8 #635d5a;
      border-style: solid;
      border-width: 7px;
      width: 0;
      height: 0;
      font-size: 0;
      position: absolute;
      top: 28px;
      left: 223px;
    }
    .smallTitleTrifonIconL{
      border-color: #e8ffe8 #635d5a #e8ffe8 #e8ffe8;
      border-style: solid;
      border-width: 6px;
      width: 0;
      height: 0;
      font-size: 0;
      position: absolute;
      top: 23px;
      left: 208px;
    }
    /*  */
    .hide{
      display: none;
    }
    /*    */
    .showMore{
      clear: both;
      text-align: center;
      height: 70px;
      line-height: 70px;
    }
    .showMore:hover{
      cursor: pointer;
      background: #FFEFDB;
      color: #8cdbff;
    }
  </style>
</head>
<body>
  <div id='head'>
    <span>     :</span>
    <input type='text' id='txtDoccode' />
  </div>
  <div id='content'>
    <div class='timeLine'></div>
    <div class='showMore'>    </div>
  </div>
  <div id='footer'>footer</div>
  <!--       -->
  <div class='hide' id='bigTitleTpl'>
    <div class='bigElement'>
      <div class='bigTitle'>
        <div class='bigAction'>{bigAction}  </div>
        <div class='bigInfo'>  {bigInfo}</div>
        <div class='bigButtonSeeMore'><a href='javascript:;'>-</a></div>
      </div>
      <div class='bigTitleTrifonIconR'> </div>
      <div class='bigContent'></div>
    </div>
  </div>
  <!--        -->
  <div class='hide' id='bigContentTpl'>
    <div class='smallElement'>
      <div class='smallTitle'>
        <div class='smallTime'><br/>{smallTime}  </div>
      </div>
      <div class='smallTitleTrifonIconL'> </div>
      <div class='smallContent'>
        <div class='smallAction'><br/>  {smallAction}</div>
        <div class='smallInfo'>  {smallInfo}</div>
      </div>
    </div>
  </div>
  <script src="http://libs.baidu.com/jquery/1.8.0/jquery.js"></script>
  <script>
    var index = 0;
    $(function(){
      hqOrderNodeCreate();//    
    })
    //    
    function hqOrderNodeCreate(){
      var bigTitleData = {
        bigAction: '    ',
        bigInfo: ''
      };
      createBigTitle(bigTitleData, index);
    }
    //    
    function baseOrderNodeCreate(){
      var bigTitleData = {
        bigAction: '    ',
        bigInfo: ''
      };
      createBigTitle(bigTitleData, index);
    }
    //    
    function stockNodeCreate(){
      var bigTitleData = {
        bigAction: '    ',
        bigInfo: ''
      };
      createBigTitle(bigTitleData, index);
    }
    //  
    function delNodeCreate(){
      var bigTitleData = {
        bigAction: '  ',
        bigInfo: ''
      };
      createBigTitle(bigTitleData, index);
    }
    //  
    function setNodeCreate(){
      var bigTitleData = {
        bigAction: '  ',
        bigInfo: ''
      };
      createBigTitle(bigTitleData, index);
    }
    //     ,      
    function createBigTitle(bigTitleData, index){
      //     
      $('.timeLine').append($('#bigTitleTpl').html()
        .replace('{bigAction}', bigTitleData.bigAction)
        .replace('{bigInfo}', bigTitleData.bigInfo)
      );
      //           
      var bigContentData = [{
        smallTime: '2010.10.11',
        smallAction: '   ' + index,
        smallInfo: '    : 10:30:55'
      },{
        smallTime: '2010.10.15',
        smallAction: '   ' + index,
        smallInfo: '    : 10:10:55'
      },{
        smallTime: '2010.10.15',
        smallAction: '   ' + index,
        smallInfo: '    : 10:10:55'
      }];
      var bigContentTplStr = $('#bigContentTpl').html();
      var str = '';
      for(var i=0; i< bigContentData.length; i++){
        str += bigContentTplStr.replace('{smallTime}', bigContentData[i].smallTime)
          .replace('{smallAction}', bigContentData[i].smallAction)
          .replace('{smallInfo}', bigContentData[i].smallInfo);
      }
      $('.bigContent:eq(' + index + ')').html(str).hide().slideDown(500);
    }
    //    ,             
    $('.showMore').on('click', function(){
      if($(this).text() === '    '){
        if(index === 0){
          index++;
          baseOrderNodeCreate();//    
        }
        else if(index === 1){
          index++;
          stockNodeCreate();//    
        }
        else if(index === 2){
          index++;
          delNodeCreate();//  
        }
        else if(index === 3){
          index++;
          setNodeCreate();//  
          $(this).text(' →_→      ');
        }
      }
    })
    // + -        
    $(document).on('click', '.bigButtonSeeMore', function(){
      var clickObj = $(this);
      var bigContentObj = clickObj.parent().next().next();
      if(clickObj.text() === '+'){
        bigContentObj.slideDown(500, function(){
          clickObj.html('<a href="javascript:;" rel="external nofollow" rel="external nofollow" ">-</a>');//    
        });
      }
      else if(clickObj.text() === '-'){
        bigContentObj.slideUp(500, function(){
          clickObj.html('<a href="javascript:;" rel="external nofollow" rel="external nofollow" ">+</a>');
        });
      }
    })
  </script>
</body>
</html>

jQuery 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기