侧栏工具条开发

发表于   |     |   阅读次数   |  

课前准备

sass的基础知识
Koala软件：http://koala-app.com/index-zh.html

输出方式：expanded展开

考拉编译时遇到中文报错：

在安装目录下

D:\Program Files (x86)\Koala\rubygems\gems\sass-3.4.9\lib\sass\engine.rb

在所有的require下面添加下面这句话，并保存：

Encoding.default_external = Encoding.find('utf-8')

欧耶，koala不报错了！

RequireJS常用方法

  1. requirejs.config
  2. requirejs
  3. define

main.js

//这个方法是用来定义别名的：
requirejs.config({
  paths: {
    jquery: 'jquery-1.11.3.min'
  }
});

requirejs(['jquery', 'validate'], function($, validate) {
  console.log(validate.isEqual('jenny', 'jenny'));
})

案例实现方式

  1. 使用背景图片的方式
  2. 使用图标字体的方式
  3. 利用before和after伪类的方式

公共mixin(不会被编译)

_mixin.scss

@mixin transition($transition) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

@mixin transform-origin($origin) {
  -webkit-transform-origin: $origin;
  -moz-transform-origin: $origin;
  -ms-transform-origin: $origin;
  -o-transform-origin: $origin;
  transform-origin: $origin;
}

@mixin scale($scale) {
  -webkit-transform: scale($scale);
  -moz-transform: scale($scale);
  -ms-transform: scale($scale);
  -o-transform: scale($scale);
  transform: scale($scale);
}

@mixin opacity($opacity) {
  opacity: $opacity;
  filter: alpha(opacity=$opacity * 100);
}

_toolbar.scss

@mixin toolbar-item($pos, $hoverPos) {
  background-position: 0 $pos;
  &:hover {
    background-position: 0 $hoverPos;
  }
}

1. 使用背景图片的方式

优缺点及兼容性

  1. HTML结构简单
  2. 兼容性良好，可以兼容到IE6
  3. 使用了大量图片，对性能有一定的影响，并且不利于修改

css样式整理-优化-分离和引入
将写好的css样式相同的部分进行整理：
通过@mixin

index.scss

@import "mixin";
@import "toolbar";
$toolbar-size: 52px;
// 1. 使用背景图片的方式

.toolbar {
  position: fixed;
  left: 50%;
  bottom: 5px;
  margin-left: -$toolbar-size / 2;
}

.toolbar-item {
  position: relative;
  display: block;
  width: $toolbar-size;
  height: $toolbar-size;
  background-image: url(../img/toolbar.png);
  background-repeat: no-repeat;
  margin-top: 1px;
  @include transition(background-position 1s);
  &:hover {
    .toolbar-layer {
      @include opacity(1);
      @include scale(1);
    }
  }
}

.toolbar-item-weixin {
  @include toolbar-item(-798px, -860px);
  .toolbar-layer {
    height: 212px;
    background-position: 0 0;
  }
}

.toolbar-item-feedback {
  @include toolbar-item(-426px, -488px);
}

.toolbar-item-app {
  @include toolbar-item(-550px, -612px);
  .toolbar-layer {
    height: 194px;
    background-position: 0 -222px;
  }
}

.toolbar-item-top {
  @include toolbar-item(-674px, -736px);
}

.toolbar-layer {
  position: absolute;
  right: $toolbar-size - 6;
  bottom: -10px;
  width: 172px;
  background-image: url(../img/toolbar.png);
  background-repeat: no-repeat;
  @include opacity(0);
  @include transform-origin(90% 90%);
  @include scale(0.01);
  @include transition(all 1s);
}

// 1. 使用背景图片的方式

2. 使用图标字体的方式

优缺点及兼容性

  1. 避免了图片的使用，节约了性能，并且修改方便
  2. HTML结构稍显复杂
  3. 不兼容IE6和IE7

index.scss

@import "mixin";
@import "toolbar";
@import "iconfont";
$toolbar-size: 52px;
// 2. 使用图标字体的方式

.toolbar-item,
.toolbar-btn,
.toolbar-icon,
.toolbar-text {
  width: $toolbar-size;
  height: $toolbar-size;
}

.toolbar-icon,
.toolbar-text {
  position: absolute;
  left: 0;
  color: #fff;
  text-align: center;
  @include transition(top 1s);
}

.toolbar {
  position: fixed;
  left: 50%;
  bottom: 5px;
  margin-left: -$toolbar-size / 2;
}

.toolbar-item {
  position: relative;
  display: block;
  margin-top: 1px;
  &:hover {
    .toolbar-icon {
      top: -$toolbar-size;
    }
    .toolbar-text {
      top: 0;
    }
    .toolbar-layer {
      @include opacity(1);
      @include scale(1);
    }
  }
}

.toolbar-btn {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

.toolbar-icon {
  top: 0;
  background-color: #d0d6d9;
  font-size: 30px;
  line-height: $toolbar-size;
}

.toolbar-text {
  top: $toolbar-size;
  background-color: #98a1a6;
  padding-top: 12px;
  font-size: 12px;
  line-height: 1.2;
}

.toolbar-layer {
  position: absolute;
  right: $toolbar-size - 6;
  bottom: -10px;
  width: 172px;
  background-image: url(../img/toolbar_img.png);
  background-repeat: no-repeat;
  @include opacity(0);
  @include transform-origin(90% 90%);
  @include scale(0.01);
  @include transition(all 1s);
}

.toolbar-layer-weixin {
  height: 212px;
  background-position: 0 0;
}

.toolbar-layer-app {
  height: 194px;
  background-position: 0 -222px;
}

// 2. 使用图标字体的方式

3. 利用before和after伪类的方式

优缺点及兼容性

  1. 避免了图片的使用，节约了性能，并且修改方便
  2. HTML结构简单，但css稍显复杂
  3. 不兼容IE6和IE7

这里要将下载下来的字体文件重新保存一份scss文件，否则koala会报错。

iconfont.scss

@font-face {
  font-family: "iconfont";
  src: url('font/iconfont.eot?t=1485250077902');
  /* IE9*/
  /* IE6-IE8 */
  /* chrome, firefox */
  /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  src: url('font/iconfont.eot?t=1485250077902#iefix') format('embedded-opentype'), url('font/iconfont.woff?t=1485250077902') format('woff'), url('font/iconfont.ttf?t=1485250077902') format('truetype'), url('font/iconfont.svg?t=1485250077902#iconfont') format('svg');
  /*
 iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-weixin:before {
  content: "\e603";
}

.icon-xiaoxi:before {
  content: "\e613";
}

.icon-top:before {
  content: "\e688";
}

.icon-app1:before {
  content: "\e602";
}

body {
  font-family: '微软雅黑';
}

index.scss

@import "mixin";
@import "toolbar";
@import "iconfont";
$toolbar-size: 52px;
// 3. 利用before和after伪类的方式
.toolbar {
  position: fixed;
  left: 50%;
  bottom: 5px;
  margin-left: -$toolbar-size / 2;
}

.toolbar-item {
  position: relative;
  display: block;
  width: $toolbar-size;
  height: $toolbar-size;
  margin-top: 1px;
  &:hover {
    .toolbar-btn {
      &:before {
        top: -$toolbar-size;
      }
      &:after {
        top: 0;
      }
    }
    &:after {
      @include opacity(1);
      @include scale(1);
    }
  }
  &:after {
    content: '';
    position: absolute;
    right: $toolbar-size - 6;
    bottom: -10px;
    width: 172px;
    background-image: url(../img/toolbar_img.png);
    background-repeat: no-repeat;
    @include opacity(0);
    @include transform-origin(90% 90%);
    @include scale(0.01);
    @include transition(all 1s);
  }
}

.toolbar-btn {
  &,
  &:before,
  &:after {
    width: $toolbar-size;
    height: $toolbar-size;
    position: absolute;
    left: 0;
  }
  &:before,
  &:after {
    content: '';
    color: #fff;
    text-align: center;
    @include transition(top 1s);
  }
  top: 0;
  overflow: hidden;
  @extend .iconfont;
  &:before {
    //icon
    top: 0;
    background-color: #d0d6d9;
    font-size: 30px;
    line-height: $toolbar-size;
  }
  &:after {
    //text
    top: $toolbar-size;
    background-color: #98a1a6;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 12px;
    white-space: pre-wrap; //content内文字换行
  }
}

.toolbar-item-weixin {
  &:after {
    content: '';
    height: 212px;
    background-position: 0 0;
  }
  .toolbar-btn {
    /* &:before {
      content: "\e603";
    } */
    @extend .icon-weixin;
    &:after {
      content: '公众\A账号';
    }
  }
}

.toolbar-item-feedback {
  .toolbar-btn {
    /* &:before {
      content: "\e613";
    } */
    @extend .icon-xiaoxi;
    &:after {
      content: '意见\A反馈';
    }
  }
}

.toolbar-item-app {
  .toolbar-btn {
    /* &:before {
      content: "\e602";
    } */
    @extend .icon-top;
    &:after {
      content: 'APP\A下载';
    }
  }
  &:after {
    content: '';
    height: 194px;
    background-position: 0 -222px;
  }
}

.toolbar-item-top {
  .toolbar-btn {
    /* &:before {
      content: "\e688";
    } */
    @extend .icon-top;
    &:after {
      content: '返回\A顶部';
    }
  }
}

// 3. 利用before和after伪类的方式

JS实现返回顶部按钮功能

1.基本功能实现

main.js

requirejs.config({
  paths: {
    jquery: 'jquery-1.11.3.min'
  }
});

requirejs(['jquery'], function($) {
  checkPosition($(window).height());

  //$('#backTop').on('click', move);//缓慢运动到达顶部
  $('#backTop').on('click', go); //没有动画过程，直接到达顶部
  $(window).on('scroll', function() {
    checkPosition($(window).height());
  });

  function move() {
    $('html, body').animation({
      'scrollTop': 0
    }, 800);
  }

  function go() {
    $('html, body').scrollTop(0);
  }

  function checkPosition(pos) {
    if ($(window).scrollTop() > pos) {
      console.log('fadeIn')
      $('#backTop').fadeIn();

    } else {
      console.log('fadeOut')
      $('#backTop').fadeOut();
    }
  }
});

2.将功能抽象成模块

scrollTo.js

define(['jquery'], function($) {
  function ScrollTo(opts) {
    this.opts = $.extend({}, ScrollTo.DEFAULTS, opts);
    this.$el = $('html,body');
  }
  ScrollTo.prototype.move = function() {
    console.log(this);
    var opts = this.opts,
      dest = opts.dest;
    if ($(window).scrollTop() != dest && !this.$el.is(':animated')) {
      this.$el.animate({
        scrollTop: dest
      }, opts.speed);
    }

  };
  ScrollTo.prototype.go = function() {
    var dest = this.opts.dest;
    if ($(window).scrollTop() != dest) {
      this.$el.scrollTop(dest);
    }

  };
  ScrollTo.DEFAULTS = {
    dest: 0,
    speed: 800
  }
  return {
    ScrollTo: ScrollTo
  }
});

main.js

requirejs(['jquery', 'scrollTo'], function($, scrollto) {
  // var scroll = new scrollto.ScrollTo({});
  var scroll = new scrollto.ScrollTo({
    dest: 50,
    speed: 2000
  });
  checkPosition($(window).height());

  $('#backTop').on('click', $.proxy(scroll.move, scroll)); //缓慢运动到达顶部
  //$('#backTop').on('click', scroll.go); //没有动画过程，直接到达顶部
  $(window).on('scroll', function() {
    checkPosition($(window).height());
  });

  function checkPosition(pos) {
    if ($(window).scrollTop() > pos) {
      $('#backTop').fadeIn();

    } else {
      $('#backTop').fadeOut();
    }
  }
});

3.封闭成工具条模块

backtop.js

define(['jquery', 'scrollto'], function($, scrollto) {
  function BackTop(el, opts) {
    this.opts = $.extend({}, BackTop.DEFAULTS, opts);
    this.$el = $(el);
    this.scroll = new scrollto.ScrollTo({
      dest: 0,
      speed: this.opts.speed
    });

    if (this.opts.mode == 'move') {
      this.$el.on('click', $.proxy(this._move, this));
    } else {
      this.$el.on('click', $.proxy(this._go, this));
    }

    $(window).on('scroll', $.proxy(this._checkPosition, this));
  }
  BackTop.prototype._move = function() {
    this.scroll.move();
  };
  BackTop.prototype._go = function() {
    this.scroll.go();
  };
  BackTop.prototype._checkPosition = function() {
    var $el = this.$el;
    if ($(window).scrollTop() > this.opts.pos) {
      $el.fadeIn();
    } else {
      $el.fadeOut();
    }
  };
  BackTop.DEFAULTS = {
      mode: 'move',
      pos: $(window).height(),
      speed: 800
    }
    // 插件的写法
  $.fn.extend({
    backtop: function() {

      return this.each(function() {
        new BackTop(this, opts);
      });
    }
  })

  return {
    BackTop: BackTop
  }
});

main.js

requirejs(['jquery', 'backtop'], function($, backtop) {
  new backtop.BackTop($('#backTop'), {
    mode: 'move',
    pos: 100,
    speed: 2000
  });
});

4.模块注册成jQuery插件

main.js

requirejs(['jquery', 'backtop'], function($, backtop) {
  $('#backTop').BackTop({
    mode: 'move',
    pos: 100,
    speed: 2000
  });
});

backtop.js

……
BackTop.DEFAULTS = {
      mode: 'move',
      pos: $(window).height(),
      speed: 800
    }
    // 插件的写法
  $.fn.extend({
    backtop: function() {

      return this.each(function() {
        new BackTop(this, opts);
      });
    }
  })

  return {
    BackTop: BackTop
  }

热评文章