结构说明
assets
项目资源目录,dev
开发目录,dist
编译输出目录,gulpfile.js
自动化工具API
gulp的使用
安装node环境(自行goole即可)
全局安装gulp
1 | npm install gulp -g |
进入到需要gulp管理的项目路径, 如 /gulp
再安装一遍
1 | npm install gulp --save-dev |
安装gulp插件
1 | npm install --save-dev gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del |
1 | sass的编译 (`gulp-ruby-sass`) |
5.运行task任务1
gulp
监听文档实现实时编译
1 | gulp watch |
gulp的API请查看gulpfile.js文件
scss文件规范以及说明
各个小模块以下划线开头全小写命名
多单词以 -
符号分隔,总模块正常,以该模块文件夹命名,在其中导入需要的小模块(详细规则请查看font-awesome
的scss源码,更多内容google脑补)
例:_path.scss
路径配置文件,_mixins.scss
预编译文件,_variables.scss
变量定义文件,font-awesome.scss
模块导入文件
脚本使用说明
基本组件
error.js
用途:低版本浏览器访问限制
用法:在head
标签中最先引入下列代码1
2
3<!--[if lt IE 9]>
<script src="dist/js/error.min.js"></script>
<![endif]-->
mian.js
用途:javascript入口文件负责渲染数据处理交互
用法:引入即可,涉及模块较多后续完善模块说明
date.js
用途:解析处理日期数据,支持多种日期格式
用法:调用Date
方法1
2
3
4
5
6
7
8
9
10
11
12
13Date.today() // Returns today's date, with time set to 00:00 (start of day).
Date.today().next().friday() // Returns the date of the next Friday.
Date.today().last().monday() // Returns the date of the previous Monday.
new Date().next().march() // Returns the date of the next March.
new Date().last().week() // Returns the date one week ago.
Date.today().is().friday() // Returns true|false if the day-of-week matches.
Date.today().is().fri() // Abbreviated day names.
Date.today().is().november() // Month names.
Date.today().is().nov() // Abbreviated month names.
daterange-picker.js
用途:基于bootstrapt的日期范围选择器
modernizr.custom.js
用途:提供过渡动画支持
jQuery组件
jquery.bootstrap.wizard.js
用途:基于jQuery的Bootstrap向导式插件
jquery.dataTables.js
用途:表格处理插件,包括排序分页,宽度自动处理
用法:引入后,以下结构绘制表格
例:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<table class="table table-bordered" id="dataTable1">
<thead>
<th class="check-header">
<label><input id="checkAll" name="checkAll" type="checkbox"><span></span></label>
</th>
<th>字段1</th>
<th>字段2</th>
<th>字段3</th>
<th>字段4</th>
<th>字段5</th>
<th>字段6</th>
<th></th>
</thead>
<tbody>
...
...
...
</tbody>
</table>
1 | /* |
jquery.easy-pie-chart.js
用途:饼状图绘制工具
用法:引入文件后,按ID初始化DOM元素
传送门:rendro.github.io
例:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26<!-- Donut Charts -->
<div class="col-lg-8">
<div class="widget-container">
<div class="heading">
<i class="fa fa-bar-chart"></i> 优惠券使用率
</div>
<div class="widget-content clearfix">
<div class="col-sm-4">
<div class="pie-chart1 pie-chart pie-number easyPieChart" data-percent="60" style="width: 200px; height: 200px; line-height: 200px;">
60%
<canvas width="200" height="200"></canvas><p class="h6">总使用率</p></div>
</div>
<div class="col-sm-4">
<div class="pie-chart2 pie-chart pie-number easyPieChart" data-percent="86" style="width: 200px; height: 200px; line-height: 200px;">
86%
<canvas width="200" height="200"></canvas><p class="h6">代金券使用率</p></div>
</div>
<div class="col-sm-4">
<div class="pie-chart3 pie-chart pie-number easyPieChart" data-percent="34" style="width: 200px; height: 200px; line-height: 200px;">
34%
<canvas width="200" height="200"></canvas><p class="h6">折扣券使用率</p></div>
</div>
</div>
</div>
</div>
<!-- end Donut Charts -->
1 | /* |
jquery.sparkline.js
用途:canvas图表绘制工具
用法:引入后按ID初始化,ul
部分为横轴坐标,可在style.scss文件中配置宽度
传送门:omnipotent.net
例:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31<div class="widget-container">
<div class="heading">
<i class="fa fa-area-chart"></i> 日活跃用户
</div>
<div class="widget-content padded">
<div class="chart-graph line-chart">
<div id="linechart-2-1"><canvas width="619" height="226" style="display: inline-block; width: 619px; height: 226px; vertical-align: top;"></canvas></div>
<ul class="chart-text-axis day">
<li>
1
</li>
<li>
5
</li>
<li>
10
</li>
<li>
15
</li>
<li>
20
</li>
<li>
25
</li>
</ul>
<!-- end Line Chart -->
</div>
</div>
</div>
1 | (function() { |
jquery.validate.js
用途:表单验证插件
用法:添加DOM元素自定义属性(具体内容见官方API)
传送门:jqueryvalidation.org
例:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10