前端代码说明v1.1.0

前端代码说明v1.1.0

1. 目录结构说明

结构

gulp
- - assets
- - - - fonts
- - - - images
- - - - javascript
- - - - stylesheets
- - dev
- - - - stylesheets
- - dist
- - - - css
- - - - fonts
- - - - img
- - - - js
- - gulpfile.js
- - README.md

说明
assets项目资源目录,dev开发目录,dist编译输出目录,gulpfile.js自动化工具API

2. gulp的使用

1.安装node环境(自行goole即可)

2.全局安装gulp

$ npm install gulp -g

3.进入到需要gulp管理的项目路径, 如 /gulp 再安装一遍

$ npm install gulp --save-dev

4.安装gulp插件

$ npm install 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 --save-dev

sass的编译 (gulp-ruby-sass)
自动添加css前缀(gulp-autoprefixer
压缩css(gulp-minify-css
js代码校验(gulp-jshint
合并js文件(gulp-concat
压缩js代码(gulp-uglify
压缩图片(gulp-imagemin
自动刷新页面(gulp-livereload
图片缓存,只有图片替换了才压缩(gulp-cache
更改提醒(gulp-notify
清除文件(del

5.运行task任务

$ gulp

监听文档实现实时编译

$ gulp watch

6.gulp的API请查看gulpfile.js文件

3. scss文件规范以及说明

1.各个小模块以下划线开头全小写命名,多单词以 - 符号分隔,总模块正常,以该模块文件夹命名,在其中导入需要的小模块(详细规则请查看font-awesome的scss源码,更多内容google脑补),例:

font-awesome
- - _animated.scss
- - _bordered-pulled.scss
- - _core.scss
- - _fixed-width.scss
- - _icons.scss
- - _larger.scss
- - _list.scss
- - _mixins.scss
- - _path.scss
- - _rotated-flipped.scss
- - _stacked.scss
- - _variables.scss
- - font-awesome.scss

例:
_path.scss路径配置文件,_mixins.scss预编译文件,_variables.scss变量定义文件,font-awesome.scss模块导入文件

4. 脚本使用说明

基本组件

1.error.js
用途:低版本浏览器访问限制
用法:在head标签中最先引入下列代码

    <!--[if lt IE 9]>
      <script src="dist/js/error.min.js"></script>
    <![endif]-->

2.mian.js
用途:javascript入口文件负责渲染数据处理交互
用法:引入即可,涉及模块较多后续完善模块说明

3.date.js
用途:解析处理日期数据,支持多种日期格式
用法:调用Date方法

Date.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.

4.daterange-picker.js
用途:基于bootstrapt的日期范围选择器

5.modernizr.custom.js
用途:提供过渡动画支持

jQuery组件

1.jquery.bootstrap.wizard.js
用途:基于jQuery的Bootstrap向导式插件

2.jquery.dataTables.js
用途:表格处理插件,包括排序分页,宽度自动处理
用法:引入后,以下结构绘制表格
例:

<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>
/*
    根据ID初始化表格,以下 .table 类用于实现单选和多选
*/
$("#dataTable1").dataTable({
  "sPaginationType": "full_numbers",
  aoColumnDefs: [
    {
      bSortable: false,
      aTargets: [0, -1]
    }
  ]
});
$('.table').each(function() {
  return $(".table #checkAll").click(function() {
    if ($(".table #checkAll").is(":checked")) {
      return $(".table input[type=checkbox]").each(function() {
        return $(this).prop("checked", true);
      });
    } else {
      return $(".table input[type=checkbox]").each(function() {
        return $(this).prop("checked", false);
      });
    }
  });
});

3.jquery.easy-pie-chart.js
用途:饼状图绘制工具
用法:引入文件后,按ID初始化DOM元素
传送门:rendro.github.io
例:

<!-- Donut Charts -->
<div class="col-lg-8">
<div class="widget-container">
  <div class="heading">
    <i class="fa fa-bar-chart"></i>&nbsp;优惠券使用率
  </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 -->
/*
# =============================================================================
#   Easy Pie Chart
# =============================================================================
*/
/*  >60%          #81e970   green
    >=30% & <=60% #fab43b   yellow
    <30%          #f46f50   red

    size        图型大小
    lineWidth   线宽
    lineCap     线类型
    barColor    线颜色
    animate     动画速度
    scaleColor  选择色
*/
$(".pie-chart1").easyPieChart({
  size: 200,
  lineWidth: 12,
  lineCap: "square",
  barColor: "#81e970",
  animate: 800,
  scaleColor: false
});
$(".pie-chart2").easyPieChart({
  size: 200,
  lineWidth: 12,
  lineCap: "square",
  barColor: "#81e970",
  animate: 800,
  scaleColor: false
});
$(".pie-chart3").easyPieChart({
  size: 200,
  lineWidth: 12,
  lineCap: "square",
  barColor: "#f46f50",
  animate: 800,
  scaleColor: false
});

4.jquery.sparkline.js
用途:canvas图表绘制工具
用法:引入后按ID初始化,ul部分为横轴坐标,可在style.scss文件中配置宽度
传送门:omnipotent.net
例:

<div class="widget-container">
  <div class="heading">
    <i class="fa fa-area-chart"></i>&nbsp;日活跃用户
  </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>
(function() {
  var linechartResize;
  /*
    $(id).sparkline([number1, number2, ... ...],{
        options
    })


    type:                       线类型
    width:                      宽度
    height:                     高度
    lineColor:                  线颜色
    fillColor:                  填充色
    lineWidth:                  线宽
    spotColor:                  点色
    minSpotColor:               最小点色
    maxSpotColor:               最大点色
    highlightSpotColor:         高亮点色
    highlightLineColor:         高亮线色
    spotRadius:                 点半径
    chartRangeMin:              图最小范围
  */
  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, 200, 220, 350, 230, 200, 280, 380, 70], {
      type: "line",
      width: "100%",
      height: "226",
      lineColor: "#a5e1ff",
      fillColor: "rgba(241, 251, 255, 0.9)",
      lineWidth: 2,
      spotColor: "#a5e1ff",
      minSpotColor: "#bee3f6",
      maxSpotColor: "#a5e1ff",
      highlightSpotColor: "#80cff4",
      highlightLineColor: "#cccccc",
      spotRadius: 6,
      chartRangeMin: 0
    });
})

5.jquery.validate.js
用途:表单验证插件
用法:添加DOM元素自定义属性(具体内容见官方API)
传送门:jqueryvalidation.org
例:

(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

Bootstrap组件

HTML5开发精要与实例详解(完整版源代码说明文档)内容分为两大部分:第一部分通过一系列中大型案例全方位对html 5的各个重要知识点进行了详细的讲解,每个案例包含案例概述、页面效果展示、案例所涉及主要知识点(精要)、源代码剖析4个部分,读者既能根据书中的步骤动手实践,又能重点学习案例中用到的核心理论知识,同时还能领会源代码的设计思路和方法;第二部分讲解了jwebsocket、rgraph、webgl等3个重要框架和技术的详细使用方法。 《html 5开发精要与实例详解》一共12章:第1章分别用2个案例演示了如何利用html 5中的结构元素来构建一个博客网站和企业门户网站;第2章用2个案例讲解了表单在html 5中的使用;第3章用6个案例讲解了如何利用canvas元素来绘制图形、图像和制作动画;第4章用2个案例介绍了文件apt和拖放api的使用方法; 第5章用4个案例讲解了如何打造自己的网页视频播放器、网页音频播放器,以及实现视频实时回放和视频截图等多媒体功能;第6章用6个案例全面讲解了html 5中的本地存储技术;第7章用单点登录和获取批量数据这2个案例讲解了html 5中的跨文档的消息传输技术;第8章用2个案例讲解了如何利用web workers实现多线程处理;第9章用1个案例讲解了如何利用geolocation api来获取地理位置信息;第10~13章分别讲解了socket通信框架jwebsocket、统计图制作插件rgraph、三维web开发技术webgl的详细使用方法,并辅之以丰富的案例。 《html 5开发精要与实例详解》所有案例的源代码都是作者亲自编写并调试和运行成功的。读者可以利用这些代码进行实战练习,也可以根据需要对这些代码进行修改,以观察不同的效果,从而加深对案例代码和书中知识点的理解。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值