查看“通用侧边导航开发”的源代码
←
通用侧边导航开发
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==侧边栏网页== 新建网页view /layout/nav-side.html 打开View/index.html 在<%= require('html-loader!./layout/header.html') %>下面添加 添加: <nowiki><div class="page-wrap w"> <%= require('html-loader!./layout/nav-side.html') %> <div class="content with-nav">test</div> </div></nowiki> 03:08 在view /layout/nav-side.html添加: <nowiki><ul class="nav-side"> <li class="nav-item"> <a class="link" href="">个人中心</a> </li> <li class="nav-item"> <a class="link" href="">我的订单</a> </li> <li class="nav-item"> <a class="link" href="">关于mmall</a> </li> </ul></nowiki> ==创建js和css文件== 4:22 common/nav-side/index.js和index.css common/nav-side/index.js添加: <nowiki>'use strict'; require('./index.css'); var _mm = require('util/mm.js'); // 侧边导航 var navSide = { init : function(){ } }; module.exports = navSide.init();</nowiki> 05:24 page/index/index.js 添加: <nowiki>require('page/common/nav-side/index.js');</nowiki> ==编辑CSS== 06:26 为nav-side/index.css添加内容 <nowiki>/* 导航主体 */ .nav-side{ float: left; width: 130px; min-height: 100px; } .nav-side .nav-item{ line-height: 25px; font-size: 13px; } .nav-side .nav-item .link{ color: #888; } .nav-side .nav-item.active .link{ color: #c60023; } /* 右侧内容区 */ .content.with-nav{ float: left; width: 950px; } </nowiki> 08:33 view/layout/nav-side.html做如下改动: <li class="nav-item active"> <a class="link" href="">我的订单</a> </li> ==创建网页模板== 16:21 把nav-side.html改成这样: <nowiki><ul class="nav-side"> </ul></nowiki> 18:05 创建模板:page/nav-side/index.string <nowiki>{{#navList}} {{#isActive}} <li class="nav-item active"> {{/isActive}} {{^isActive}} <li class="nav-item"> {{/isActive}} <a class="link" href="{{href}}">{{desc}}</a> </li> {{/navList}}</nowiki> 18:27 在nav-side/index.js中引用这个模板: <nowiki>'use strict'; require('./index.css'); var _mm = require('util/mm.js'); var templateIndex = require('./index.string');</nowiki> 09:13 nav-side 下index.js添加内容: <nowiki>/* * @Author: Rosen * @Date: 2017-05-19 17:39:14 * @Last Modified by: Rosen * @Last Modified time: 2017-05-24 16:46:02 */ 'use strict'; require('./index.css'); var _mm = require('util/mm.js'); var templateIndex = require('./index.string'); // 侧边导航 var navSide = { option : { name : '', navList : [ {name : 'user-center', desc : '个人中心', href: './user-center.html'}, {name : 'order-list', desc : '我的订单', href: './order-list.html'}, {name : 'user-pass-update', desc : '修改密码', href: './user-pass-update.html'}, {name : 'about', desc : '关于MMall', href: './about.html'} ] }, init : function(option){ // 合并选项 $.extend(this.option, option); this.renderNav(); }, // 渲染导航菜单 renderNav : function(){ // 计算active数据 for(var i = 0, iLength = this.option.navList.length; i < iLength; i++){ if(this.option.navList[i].name === this.option.name){ this.option.navList[i].isActive = true; } }; // 渲染list数据 var navHtml = _mm.renderHtml(templateIndex, { navList : this.option.navList }); // 把html放入容器 $('.nav-side').html(navHtml); } }; module.exports = navSide;</nowiki> ==修改webpack.config.js文件== 20:21 修改webpack.config.js文件 <nowiki>module: { loaders: [ { test: /\.css$/,loader:Ex.extract('style-loader', 'css-loader') }, { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,loader:'url-loader?limit=100&name=resource/[name].[ext]' }, { test: /\.string$/,loader:'html-loader' } ] },</nowiki> 执行npm run dev 试验: 21:15 page/index/index.js改为: <nowiki>'use strict'; require('page/common/nav/index.js'); require('page/common/header/index.js'); var navSide =require('page/common/nav-side/index.js'); var _mm = require('util/mm.js'); navSide.init({ name:'user-center' });</nowiki>
返回至
通用侧边导航开发
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息