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 相关文章推荐
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
python访问纯真IP数据库的代码
2011/05/19 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
ORACLE第二个十问
2013/12/14 面试题
.NET常见笔试题集
2012/12/01 面试题
雪山饭庄的创业计划书范文
2014/01/18 职场文书
食品安全检查制度
2014/02/03 职场文书
工作鉴定评语
2014/05/04 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
单位同意报考证明
2015/06/17 职场文书
企业催款函范本
2015/06/24 职场文书