zoukankan      html  css  js  c++  java
  • jquery tmpl生成导航

    引入
    <script src="jquery.tmpl.min.js"></script>
    html
    <ul class="nav" id="side-menu">
    </ul>

    tmpl
    <script id="tmpl-box" type="text/x-jquery-tmpl">
    {{if $data.eq < 4}}
    <li class="sidebar{{= $data.eq}}-li" data-memu="true">
    <a href="{{= $data.url}}"><i class="icon icon{{= $data.eq}}" ></i></a>
    <ul class="nav nav-second-level collapse collapseUl">
    <li style="border-bottom: 0px !important">
    <div class="bubble_diailog size_1">{{= $data.name}}
    <i class="l"></i>
    <b class="l"></b>
    </div>
    </li>
    </ul>
    </li>
    {{else}}
    <li class="sidebar{{= $data.eq}}-li" data-memu="true">
    <a href="javascript:;"><i class="icon icon{{= $data.eq}}"></i></a>
    <ul class="nav nav-second-level">
    <li><a href="javascript:;" class="null-active">{{= $data.name}}</a></li>
    {{each(i,obj) $data.children}}
    <li><a href="{{= url}}">{{= name}}</a></li>
    {{/each}}
    </ul>
    </li>
    {{/if}}
    </script>
    //生成导航栏
    tree = [
      {"eq":1,"name":"工作台","url":"/main"},
      {"eq":2,"name":"待办事项","url":"/calendar/event/main"},
      {"eq":3,"name":"客户管理","url":"/client/client/main"},
      {"eq":4,"name":"统计分析",
        "children":[
          {"name":"业务员统计","url":"/sys/statistics/client"},
          {"name":"客户行业统计","url":"/sys/statistics/client?type=profession"},
          {"name":"优化师统计","url":"/sys/statistics/client?type=sem"},
          {"name":"客户分类统计","url":"/sys/statistics/client?type=level"},
          {"name":"客户状态统计","url":"/sys/statistics/client?type=status"},
          {"name":"客户联系统计","url":"/sys/statistics/client?type=contact"},
          {"name":"客户建档时间统计","url":"/sys/statistics/client?type=increment"},
          {"name":"优化师服务记录查询","url":"/sys/statistics/client?type=serviceRecord"},
          {"name":"业务员联系记录查询","url":"/sys/statistics/client?type=contactRecord"}
        ]
      },
      {"eq":5,"name":"系统设置",
        "children":[
          {"name":"部门信息","url":"/sys/department/main"},
          {"name":"员工设置","url":"/sys/user/main"},
          {"name":"业务设置","url":"/sys/busi/main"},
          {"name":"角色设置","url":"/sys/role/main"},
          {"name":"客户共享","url":"/client/clientShare/main"},
          {"name":"客户移交","url":"/client/clientTransfer/main"},
          {"name":"其他设置","url":"/sys/setting/main"}
        ]
      }
    ]
    $("#side-menu").empty();
    $("#tmpl-box").tmpl(tree).appendTo("#side-menu");
     
     
  • 相关阅读:
    Http请求头和相应头分析
    linux扩充容量经典篇
    Redis持久化以及其原理
    redis简单应用
    Python Requests库使用2:请求方法
    加快访问GitHub的速度
    GET和POST两种基本请求方法的区别
    Python Requests库介绍
    Python urllib、urllib2、urllib3用法及区别
    Django中操作cookie和session
  • 原文地址:https://www.cnblogs.com/xue-wejie/p/7299234.html
Copyright © 2011-2022 走看看