jQuery简易时光轴实现方法示例


Posted in Javascript onMarch 13, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 #Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 #Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 #Javascript
JS实现直接运行html代码的方法
Mar 13 #Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 #Javascript
jsonp跨域请求实现示例
Mar 13 #Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 #Javascript
You might like
提问的智慧
2006/10/09 PHP
php框架Phpbean说明
2008/01/10 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
JQuery实现自定义对话框的代码
2008/06/15 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python使用pymysql小技巧
2017/06/04 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Java分治归并排序算法实例详解
2017/12/12 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
珍惜资源保护环境的建议书
2014/05/14 职场文书
工会换届选举方案
2014/05/21 职场文书