标签归档:SCSS

jQuery.AudioPlayer.js

jQuery.AudioPlayer.js

A audio player of jQuery plugin.

Keystion.github.io/jQuery.AudioPlayer.js/

Demo:Keystion.github.io/jQuery.AudioPlayer.js/test/index.html


How to use

Path Description
jQuery.AudioPlayer.js the script file
jQuery.AudioPlayer.css the stylesheet file

Example:

<!-- jQuery file -->
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>

<!-- jQuery.AudioPlayer.js -->
<link href="../src/theme.default.css" rel="stylesheet">
<script src="../src/jQuery.AudioPlayer.js" type="text/javascript" ></script>

<script type="text/javascript">
    $(function() {
        var player = $.AudioPlayer;
        player.init({
            container: '#audioWrap'
            ,source: 'http://mr3.doubanio.com/70d0968fb8312ade3f04c7e1d1d18d1f/1/fm/song/p1817677_128k.mp4'
            ,imagePath: './image'
            ,debuggers: false
            ,allowSeek: true
        });
    });
</script>

Arguments:

argument value Description
container String The outer Dom ClassName/id, default ‘body’/外部Dom ClassName / id,默认的“body”
source String audio source / 音频源
imagePath String image resources / 图像资源
debuggers Boolean open console log, default close ‘false’ / 打开控制台日志,默认关闭:false
allowSeek Boolean Whether to support drag and drop, the default open: true / 是否支持拖拽,默认开启:true
canplayCallback function After can play TODO / 可以播放之后,做某些事情
onloadstartCallback function After searching for the audio TODO / 开始查找音频之后,做某些事情
onwaitingCallback function When the video because that need to be a frame buffer and stop / 当视频由于需要缓冲下一帧而停止
playCallback function After playback TODO / 播放之后,做某些事情
pauseCallback function After the suspension TODO / 暂停之后,做某些事情
seekedCallback function After the drag, the callback function (allowSeek: false) / 拖动之后,回调函数(allowSeek: false
endedCallback function End of the play TODO / 播放结束之后,做某些事情
mutedCallback function After the mute TODO / 静音之后,做某些事情

The ‘function’ result data.status == true mean success.

function

  • AudioPlayer.init(); initialization / 初始化
  • AudioPlayer.updateSource(); Update the playback of audio file / 更新播放音频文件
  • AudioPlayer.toggleplay(); Switch to suspend began / 切换暂停开始
  • AudioPlayer.play(); Start playing / 开始播放
  • AudioPlayer.pause(); pause / 暂停播放
  • AudioPlayer.muted(); mute / 静音

AudioPlayer.init(); // initialization

Example:

AudioPlayer.init({
    container: '#audioWrap'
    ,source: './Fade.mp3'
    ,debuggers: false
    ,allowSeek: false
    ,canplayCallback: function(){
        // your code
    }
    ,playCallback: function(){
        // your code
    }
    ,pauseCallback: function(){
        // your code
    }
    ,seekedCallback: function(){
        // your code
    }
    ,endedCallback: function(){
        // your code
    }
    ,mutedCallback: function(data){
        // your code
    }
});

AudioPlayer.updateSource();

Update the playback of audio file / 更新播放音频文件

argument / 参数:

  • source: audio file path / 音频文件路径

Example:

jQuery.AudioPlayer.updateSource({
    source: './example.mp3'
});

AudioPlayer.toggleplay(); // Switch to suspend began / 切换暂停开始

AudioPlayer.play(); // Start playing / 开始播放

argument / 参数:

  • function(data){}
    • data.status:true 播放成功

Example:

AudioPlayer.play(function(data){
    if(data.status){
        alert('Say Hello');
    }
});

AudioPlayer.pause(); 暂停播放

argument / 参数:

  • function(data){}
    • data.status:true 暂停成功

Example:

AudioPlayer.play(function(data){
    if(data.status){
        alert('Say Bye');
    }
});

AudioPlayer.muted(); 切换静音

argument / 参数:

  • function(data){}
    • data.status:true 静音成功

Example:

AudioPlayer.play(function(data){
    if(data.status){
        alert('已静音');
    }
});

Change log

2017.01.06

  • Add comments in English
  • Fix the window change audio download progress bar UI has not changed

2017.06.26

  • Add onloadstartCallback function
  • Add onwaitingCallback function

issues

Create a new issues

Some Sass writing standards

// 由于 Node 原生支持模块的作用域,并不需要额外的 wrapper
// "as though the module was wrapped in a function"

var a = require('./a')  // 加载模块(同步加载)
a.doSomething()         // 等上一句执行完才会执行

exports.b = function(){ // 暴露 b 函数接口
  // do something
}

Sass – CSS 预处理器

简介

CSS 预处理器:

定义一种新的语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,开发者可以使用这种语言进行编码工作

Sass背景

Sass是对CSS的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,可以更有效有弹性的写出CSS

Sass已经有了两套语法规则:

  • 一个依旧是用缩进作为分隔符来区分代码块的;
  • 另一套规则和CSS一样采用了大括号作为分隔符。
    后一种语法规则又名Scss。(Scss更常用,以下说得Sass在没有特别指出得情况下,指的都是Scss)。

书写规范

  1. 声明文档的字符编码
  2. 导入引用 @mixinfunction 等等
  3. 文档的简要概述
  4. 嵌套层级不要太深,适当的时候使用 @at-root
  5. 不要忘记写;
@charset "UTF-8";
@import "mixin.scss"; //导入其他文件 
@import "mixin";      //导入其他文件 
/**
 * @fileoverview <%= projectName %>.
 * @author <%= author %> <<%= email %>>
 * @version <+DATE+>
 */

局部文件

名字以下划线开头比如 _reset.scss. 下划线让Sass知道这个文件是一个分部文件,不会为它单独产生一个CSS文件。可以使用@import导入分部文件.

———–_reset.scss———–

html,body,ul,ol {
   margin: 0;
  padding: 0;
}

———base.scss———–

/* base.scss */
@import 'reset'; // 可忽略下划线
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

———编译后———–

/* base.scss */
html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

常见错误

1. 编译后css文件中出现 @at-root
  • @at-root 是Sass3.3版本的新特性
  • 解决方法:升级你的sass版本
    • gem update sass
    • sass -v
    • Ps:升级过程中可能需要当前生产环境下的某个文件夹的读写权限;
    • ERROR: While executing gem … (Gem::FilePermissionError) You don’t have write permissions into the /usr/local/bin directory.
    • 执行命令:sudo chmod -R 777 <-filepath->
    • 关于”chmod“的更多信息,请百度或google学习
2. 忘记设置编码
Error: Invalid US-ASCII character "`\xE4`"
on line 4 of app/assets/scss/_web/topdeals-web.scss
Use --trace for backtrace.
Warning: Exited with error code 65 Use --force to continue.
Syntax error: Invalid GBK character "`\xE5`"

原因:文档没有设置 编码格式
解决方法:文档第一行@charset "UTF-8"; "UTF-8"大写

3. 句末忘记写 “;" 也会报错
@charset "UTF-8"
/**
 * @fileoverview Home Paga Stylesheet
 * @author shang.yantao shang.yantao@topka.cn
 * @copyRight topka.cn
 * @versioon v1.0
 */
body{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

第一行 @charset 句末忘记写 “;”。报错会出现在第8行(也就是错误本身的下一个css主体处,找错应该向上找;):
![](/images/posts2015/02-05/image2014-12-12 15-41-32.png)

gulp-ruby-sass 相关
gulp-ruby-sass: stderr: OptionParser::InvalidOption: invalid option: --sourcemap=none
Use --trace for backtrace.

升级sass> gem update sass

http://sass-lang.com/guide 官方文档

  • Preprocessing(预处理)
  • Variables(变量)
  • Nesting(嵌套)
  • Partials(局部文件)
  • Import(导入文件)
  • Mixins(混合变量)
  • Extend/Inheritance(扩展/继承)
  • Operators(运算符)

Bootstrap Scss 源码解析

Bootstrap Scss 源码解析

  • _bootstrap-compass.scss
  • _bootstrap-mincer.scss
  • _bootstrap-sprockets.scss
  • _bootstrap.scss
  • bootstrap 主体
    • _alerts.scss 警告信息
    • _badges.scss 徽章 消息提示
    • _breadcrumbs.scss 面包屑
    • _button-groups.scss 按钮组
    • _buttons.scss 按钮
    • _carousel.scss 旋转木马
    • _close.scss 关闭Icon
    • _code.scss 代码块
    • _component-animations.scss animations动画
    • _dropdowns.scss 下拉菜单
    • _forms.scss form表单
    • _glyphicons.scss 字体图标
    • _grid.scss 栅格系统
    • _input-groups.scss 输入框相关
    • _jumbotron.scss 巨幕 大块div
    • _labels.scss 标签相关
    • _list-group.scss 列表组
    • _media.scss 响应式相关
    • _mixins.scss mixins 相关
    • _modals.scss 模态框 模式对话框 弹出对话框的形式出现
    • _navbar.scss 导航栏
    • _navs.scss 导航 Tab 切换相关
    • _normalize.scss 处理浏览器之间差异
    • _pager.scss 翻页 上一页下一页
    • _pagination.scss 分页(多页)
    • _panels.scss 面板 标题内容
    • _popovers.scss 弹出框 上下左右弹窗
    • _print.scss 打印样式
    • _progress-bars.scss 进度条
    • _responsive-embed.scss 响应式特性的嵌入内容 iframe video embed obiect
    • _responsive-utilities.scss 响应式相关
    • _scaffolding.scss 脚手架
    • _tables.scss 表格相关
    • _theme.scss 主题
    • _thumbnails.scss 缩略图相关
    • _tooltip.scss 弹出提示条 上下左右
    • _type.scss 印刷相关
    • _utilities.scss 工具类 左右浮动 显示/隐藏
    • _variables.scss 常用变量
    • _wells.scss
    • mixins mixin相关
      • _alerts.scss 警告
      • _background-variant.scss 背景颜色
      • _border-radius.scss 圆角边框
      • _buttons.scss 按钮
      • _center-block.scss 居中对齐的块级元素
      • _clearfix.scss 清除浮动
      • _forms.scss 表单mixin
      • _gradients.scss
        • 水平渐变
        • 水平的三色渐变
        • 垂直渐变
        • 垂直的三色渐变
        • 角度渐变
        • 径向渐变
        • 条纹渐变
      • _grid-framework.scss 网格架构
      • _grid.scss 网格相关 左右边距相关
      • _hide-text.scss CSS图片替换技术 hide div
      • _image.scss 图片 圆角图片
      • _labels.scss 标签
      • _list-group.scss 列表组
      • _nav-divider.scss 分割线 存在导航栏 和 下拉菜单中
      • _nav-vertical-align.scss nav垂直居中
      • _opacity.scss 不透明度
      • _pagination.scss 分页
      • _panels.scss 面板
      • _progress-bar.scss 进度条
      • _reset-filter.scss 重置IE滤镜 filter
      • _resize.scss 是否可由用户调整元素尺寸等
      • _responsive-visibility.scss 响应式之后 显示
      • _size.scss 设置一个块级元素宽和高
      • _tab-focus.scss WebKit-style 风格 焦点效果
      • _table-row.scss 表格背景色
      • _text-emphasis.scss 文字颜色
      • _text-overflow.scss 文本溢出
      • _vendor-prefixes.scss 浏览器前缀 for 新属性