JQUERY+HTML5+CSS3 make support response layout time Axis plug-in _jquery

jquery Timeline Plug-in effect chart preview

(Figure I)

(Figure II)

Note Notes :

Figure one is the browser width pixel greater than 560px display effect, figure two is in the browser width pixel less than 560px under the display effect. Uses the effect of the CSS3 media query implementation.
In addition, the circles, corners, and triangles of the page also use the special style of CSS3. These basic styles and effects in this article will not repeat, do not understand the children's shoes can be online search learning, very simple.
The display content of each time node on the page provides three kinds of display styles, the display style of many pictures, the display style of single picture and the display style without pictures. These can be changed according to their own needs.

Analyze page Layout Ideas

The layout of the page is essentially the use of relative positioning of the outer container, the elements within the container using absolute positioning can be. For specific analysis, please look at the image below

According to the analysis on the picture can achieve the Timeline plug-in layout display effect.

Once the layout is ready, we can add what we need to show. For the page to be less monotonous, you can use the jquery animate function to add some effects, such as the left side of the node from the left side of the page slide into the page, the right node from the right side of the page slide into the page. The code is simple and will be posted later.

Adding a rolling trigger event mechanism to dynamically load time nodes

In the case of more time nodes, under normal circumstances, such as a company's development process and major events are unlikely to have only 三、五条 information, as time goes by, the more worthy of record of the big event will be. If you want all the information to be displayed on the page at once may affect the display efficiency of the page, the user experience will not be very good.
Therefore, you can use the trigger rolling event mechanism to load a fixed number of bars at a time. This is the same as implementing the paging effect. But our trigger condition is a rolling trigger.

Precautions:
1. When the number of fixed bars is loaded for the first time, assuming that 5 records are loaded, if the scroll bar does not appear after the first load of 5, you should call the Query method again and continue loading until the scroll bar appears (otherwise the scroll bar will not be triggered after the first load of 5). Nature will not be able to continue the query after the record).
2. Trigger scrolling events, can not be triggered as long as scrolling, otherwise the program has been triggering the loading record method, the page may not be able to send requests because of frequent response. Workaround, you can then trigger the load logging method when the scroll bar scrolls to the bottom of the page.
Please see the code for the specific decision

CSS Code

. timeline-container{width:100%;
  /*height:auto;*/}. timeline{width:100%;
  Margin:auto;
  position:relative;
  Height:auto;
padding:30px 0px 0px 0px; }. Timeline > timeline-block{width:50%}. Timeline-block >. popover{max-width:70%; timeline >. timeli ne-block-odd{float:left; timeline > timeline-block-even{float:right; timeline-block-odd>.timeline-conte
  nt{Display:block;
  position:relative;
  Float:right;
margin-right:50px;
  }. timeline-block-even>.timeline-content{Display:block;
  Float:left;
  position:relative;
margin-left:50px;
  }. timeline-content > arrow{top:20px!important;
Background: #f7f7f7;
  }. timeline-content > popover-content{max-height:240px;
  Overflow-y: auto;
  Color: #696969;
font-size:11px;
  }. timeline-content>.popover-footer{padding:8px 14px;
  margin:0px;
  font-size:11px;
  border-top:1px dotted #b9b9b9;
  Color: #4b4b4b;
Background: #F2F2F2; }. Timeline img{border:1px solid #dddddd;
padding:2px;
  }. timeline-img{width:50px;
  height:50px;
  -webkit-border-radius:25px;
  -moz-border-radius:25px;
  -o-border-radius:25px;
  border-radius:25px;
  BORDER:3PX solid #A3E3E8;
  Margin:auto;
  Background: #ffffff;
  Position:absolute;
  Z-index:9;
  left:50%;
  margin-left:-25px; Background:url (.. /..
  /indeximg/greeneye.jpg);
Background-size:cover;
  }. timeline-line{width:4px;
  height:100%;
  Background: #aef0f5;
  Position:absolute;
  Z-index:8;
  left:50%;
  border-left:1px solid #aef0f5;
  border-right:1px solid #ffffff;
  Margin-left: -2px;
margin-top:-30px;
  }. timeline-block-odd>.popover.left>.arrow:after {right:2px;
Border-left-color: #F7F7F7;
  }. timeline-block-even>.popover.right>.arrow:after {left:2px;
Border-right-color: #F7F7F7;
    /** mediaquery Query style **/@media screen and (max-width:560px) {. timeline{width:100%;
    position:relative;
    Height:auto;
  padding:30px 0px 0px 0px; }. Timeline > timeline-block{width:100%;
  }. Timeline > timeline-block-odd{float:right;
    }. timeline-block-odd>.timeline-content{Display:block;
    position:relative;
    Float:left;
  margin-left:75px;
    }. timeline-block-even>.timeline-content{Display:block;
    position:relative;
    Float:left;
  margin-left:75px;
    }. Timeline-block-odd>.popover>.arrow, timeline-block-odd>.popover>.arrow:after {position:absolute;
    Display:block;
    width:0;
    height:0;
    Border-color:transparent;
  Border-style:solid;
    }. Timeline-block-odd>.popover.left>.arrow {left: -21px;
    Bottom: -10px;
    Content: "";
    border-left-width:0;
    Border-right-color: #999;
  border-width:10px;
    }. timeline-block-odd>.popover.left>.arrow:after {left:1px;
    right:1px;
    Bottom: -10px;
    Content: "";
    border-left-width:0;
  Border-right-color: #fff; }. Timeline-block-odd>.popoveR>.arrow:after {content: "";
  border-width:10px;
    }. timeline-img{width:50px;
    height:50px;
    Margin:auto;
    Background: #ffffff;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    -o-border-radius:25px;
    border-radius:25px;
    BORDER:3PX solid #8e8e8e;
    Position:absolute;
    Z-index:9;
    left:0;
  margin-left:0px;
    }. timeline-line{width:4px;
    height:100%;
    Background: #d0d0d0;
    border-left:1px solid #ececec;
    border-right:1px solid #ececec;
    Position:absolute;
    Z-index:8;
    left:0;
    margin-left:24px;
  margin-top:-30px;

 }


}

jquery Code

$ (function () {var _timeline_row_ = $ ("<div></div>"). AddClass ("Row");
  $ (". Timeline-container"). Append (_timeline_row_); var loaddata=function () {$.getjson ("Timeline.json", function (data) {$.each (data, function (I, TL) {VA
        R _timeline_ = $ ("<div></div>"). AddClass ("timeline");

        _timeline_row_.append (_timeline_);
        var _time_block_ = $ ("<div></div>"). AddClass ("Timeline-block");
        var _time_content_ = $ ("<div></div>"). AddClass ("PopOver timeline-content");
        _time_block_.append (_TIME_CONTENT_); /** * Set display content/var _popover_title_ = $ (" 

To sum up:
1. This paper focuses on the analysis of the layout of the time axis, mainly through the relative positioning of the outer container and the absolute positioning of the inner elements to achieve the layout effect.
2. Trigger the rolling event mechanism to achieve a similar paging load effect. The trigger scrolling event is to ensure the rigor of the logic.

A long time ago to write the demo, the jquery plug-in is not very good, and CSS style mixed together, nor will it be extracted separately. But it's OK to use it as a sharing study. When the formal development, do not like me to write JS.
Finally, it is still a thank you reading.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.