前端代码说明v1.1.0

1、v1.1.0前端代码说明v1.1.01.录结构说明结构- - assets- - - - css- - - - js- - gulpfile.js- - README.md说明项资源录，开发录，编译输出录，动化具APIgulpfile.jsassetsdevdist2.gulp的使1.安装node环境(goole即可)2.全局安装gulp1$ npm install gulp -g3.进到需要gulp管理的项路径,如再安装遍/gulp1$ npm install gulp -save-dev4.安装gulp插件12$ npm install gulp-ruby-sass gulp-autopr

2、efixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereloadsass的编译 ()gulp-ruby-sass动添加css前缀（）gulp-autoprefixer压缩css（）gulp-minify-cssjs代码校验（合并js件（压缩js代码（）gulp-uglify压缩图（）gulp-imagemin动刷新页（）图缓存，只有图替换了才压缩（）gulp-cache更改提醒（清除件（）gulp-notify）del5.运task任务

3、1$ gulp监听档实现实时编译1$ gulp watch6.gulp的API请查看gulpfile.js件3.件规范以及说明1.各个模块以下划线开头全写命名，多单词以 符号分隔，总模块正常，以该模块件夹命名，在其中导需要的模块(详细规则请-查看的scss源码，更多内容google脑补)，例：font-awesomefont-awesome- - _larger.scss- - _list.scss- - _mixins.scss- - _path.scss- - _rotated-flipped.scss- - _stacked.scss- - _variables.scss- - font

4、-awesome.scss例：路径配置件，预编译件，变量定义件，模块导件font-awesome.scss_path.scss_mixins.scss_variables.scss4.脚本使说明基本组件1.error.js途：低版本浏览器访问限制法：在标签中最先引下列代码head1232.mian.js途：javascript件负责渲染数据处理交互法：引即可，涉及模块较多后续完善模块说明3.date.js途：解析处理期数据，持多种期格式法：调 法Date12/ Returns todays date, with time set to 00:00 (start of day)./ Return

5、s the date of the next Friday.3456789/ Returns true|false if the day-of-week matches.10111213Date.today().is().november()Date.today().is().nov()/ Abbreviated month names.4.daterange-picker.js途：基于bootstrapt的期范围选择器5.modernizr.custom.js途：提供过渡动画持组件1.jquery.bootstrap.wizard.js途：基于jQuery的向导式插件2.jquery.dat

6、aTables.js途：表格处理插件，包括排序分页，宽度动处理法：引后，以下结构绘制表格例：12table classtable table-bordered iddataTable1thead3th classcheck-header4labelinput idcheckAll namecheckAll typecheckboxspanspanlabel5678910111213141516171819tbody.12/*/345678910111213141516171819202122232425return $(this).prop(checked, true););););3.jqu

7、ery.easy-pie-chart.js途：饼状图绘制具法：引件后，按ID初始化DOM元素传送门：例：12div classcol-lg-83div classwidget-container4div classheading5i classfa fa-bar-chart优惠券使率67div classwidget-content clearfix8div classcol-sm-49div classpie-chart1 pie-chart pie-number easyPieChart data-percent60 stylewidth: 200px; height: 200px; li

8、ne-height: 200px; 101112131415161718192021222324252660%canvas width200 height200canvasp classh6div classcol-sm-4div classpie-chart2 pie-chart pie-number easyPieChart data-percent86 stylewidth: 200px; height: 200px; line-height: 200px; 86%canvas width200 height200canvasp classh6div classcol-sm-4div c

9、lasspie-chart3 pie-chart pie-number easyPieChart data-percent34 stylewidth: 200px; height: 200px; line-height: 200px; 34%canvas width200 height200canvasp classh612/*# =34# =*/567834567div idlinechart-2-1canvas width619 height226 styledisplay: inline-block; width: 619px; height: 226px; vertical-align

10、: top; canvas891011121314151617181920212223242526272829303115123/*456789type:101112131415161718192021222324252627282930313233343536373839height:度线颜填充线宽fillColor:点最点*/linechartResize = function() $(#linechart-1).sparkline(160, 240, 120, 200, 230, 180, 350, 230, 200, 280, 380, 400, 360, 300, 220, 200, 150, 40, 70, 180, 110,200, 160, 200height: 226,spotColor: #a5e1ff,minSpotColor: #bee3f6,maxSpotColor: #