首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

继续去踢波

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
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
软件测试工程师面试题(53) C#面试题(90) .NET面试题(131) Android面试题(6) C++面试题(199) 网络工程师面试题(96) DB面试题(126) Oracle面试题(81) JAVA面试题(401) LINUX面试题(83)
You might like
php array_merge下进行数组合并的代码
2008/07/22 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
phpwind放自动注册方法
2006/12/02 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
JavaScript实现答题评分功能页面
2020/06/24 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
Python中的列表知识点汇总
2015/04/14 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
python利用faker库批量生成测试数据
2020/10/15 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
Craghoppers德国官网：户外和旅行服装
2020/02/14 全球购物
党章学习思想汇报
2014/01/14 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
员工工作表扬信
2015/05/05 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
初中语文教学研修日志
2015/11/13 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS