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扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

(0)

相关推荐

  • 利用jquery去掉时光轴头尾部线条的方法实例

    前言 以前做类似时光轴的结构,几乎都是一条灰色线飞流直下,没有尽头.今天这个线条是从第一个圆点到最后一个圆点,那么问题来了,内容的高度还不是固定的,线条的长度怎么确定?怎么就能刚刚好从第一个点到最后一个点首尾相连呢?这就是下面所要做的. 先看效果,如下图: 思路: 1.写一个div包住整个内容,就能知道所有列表的总高度: 2.写一条细线定位到右边,对,高度100%,内容多高,细线就多高: 3.开始的小点距离顶部多高,细线就距离顶部多高: 4.使用js设置细线的高度 = 总高度 - 最后一个列表的

  • 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: 100

  • jquery showModelDialog的使用方法示例详解

    前两天接到这样一个任务:在用户上传附件,需要校验用户上传附件中身份证信息,如果存在错误信息需要将所有的错误信息展示出来.这个需求我一开始考虑得就是使用jQuery Dialog.但是看到这个项目没有使用而是使用showModelDialog,所以为了统一,也需要使用showModelDialog. window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性.使用方法:varretur

  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 复制代码 代码如下: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName("深蓝"); jQuery.extend()除了可以创建插件外,还可以用

  • jQuery简易图片放大特效示例代码

    DEMO点击圆形图片,图片方法,将水的图片放置与下层,鼠标移上去的时候,图片高与宽同比增大,并且图片向左上移动 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

  • jquery sortable的拖动方法示例详解

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left} ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left} ui.item - 表示当前拖拽的元素 ui.placeholder - 占位符(如果有定义的话) ui.sender - 当前拖拽元素的所属

  • jQuery中ajax - post() 方法实例详解

    在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

  • 使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

    这是一个示例: <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").cl

  • jQuery编程动画的基本方法示例详解

    目录 一.动画 .show() .hide() .fadeIn() .fadeOut() .animate() .slideDown() .slideUp() .delay() .clearQueue() .fadeTo() 一.动画 jQuery提供了一些列的动画基本方法,同时也提供了自定动画方案.animate(). .show() 当提供一个 duration(持续时间)参数,.show()成为一个动画方法..show()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画操作. 持续

  • jquery each的几种常用的使用方法示例

    jQuery源码里自己也有很多用到each方法.其实jQuery里的each方法是通过js里的call方法来实现的.下面简单介绍一下call方法. call这个方法很奇妙,其实官方的说明是:"调用一个对象的一个方法,以另一个对象替换当前对象."网上更多的解释是变换上下文环境,也有说是改变上下文this指针. 复制代码 代码如下: call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 参数 thisObj  可选项.将被用作当前对象的对象.arg1,

  • jQuery on()方法示例及jquery on()方法的优点

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() $("p").bind("click",function(){ alert("The paragraph was clicked."); }); $("p").on("click",func

随机推荐