yjxf8285@qq.com

Plugins/Tools

浏览器文本复制到剪贴板

Posted By 刘晓帆 | 408 views

github上面的这个复制功能如何实现的呢?

1

 

 

 

解决方案: clipboardjs插件

插件官网:https://clipboardjs.com/

使用方法:
HTML

<div className="testtitle copy-btn btn" data-clipboard-text="http://www.baidu.com">copy</div>

JS

var clipboard = new Clipboard('.btn');
clipboard.on('success', function (e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    e.clearSelection();
});
Read More

OS

win10下磁盘100%的解决方案

Posted By 刘晓帆 | 249 views

升级到win10后发现系统经常会有卡顿的感觉,原因主要是以下2点
1 oneDrive
2 家庭组

上面两个功能会十分频繁的读写硬盘,所以还得禁用掉比较。

1 oneDrive的禁用方法比较简单,直接右键图标退出即可。
2 家庭组需要禁用掉系统服务,步骤如下:
进入计算机管理-服务,找到“HomeGoup Listener”与“HomeGroup Provider”两项服务,右键单击进入“属性”,停止运行后设置启动类型为“禁用”。

Read More
  • win10下磁盘100%的解决方案已关闭评论
  • 3 months ago

Plugins/Tools

Material Design在线配色工具

Posted By 刘晓帆 | 448 views

工具地址:http://www.materialpalette.com/

之前对比过很多配色工具,Material Design提供的方案还是很漂亮的,非常喜欢这种风格。

Material Design 的一些重要功能包括 系统字体Roboto的升级版本 ,同时颜色更鲜艳,动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新框架也于今天在 google.com/design 公开发布。谷歌的想法是让谷歌平台上的开发者掌握这个新框架,从而让所有应用就有统一的外观,就像是苹果向开发者提出的设计原则一样。谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计,包括安卓和网页端的Gmail和Calendar。大家可能还会记得,看到过有关这些变动的文章, 有些博客 已经掌握了外泄截屏,显示经过了重新设计的Gmail,界面更干净、更简约。在安卓平台上,这种新界面被称为Material,支持各种新动画效果,具有内置的实时UI阴影,以及可在不同屏幕之间切换的hero元素。

Read More
  • Material Design在线配色工具已关闭评论
  • 5 months ago

Plugins/Tools

HTML to JSX 转换工具

Posted By 刘晓帆 | 708 views

提供一个html转jsx的在线工具。
地址:http://liuxiaofan.com/tojsx/

说明:
场景,进行react代码重构的时候,要把之前写好大量的html代码复制到js文件里面。因为jsx的一些语法规则导致了要修改很多HTML标签属性名称,诸如class变成className之类的。这时候你可能会想,如果有一个能够一键转换的工具就好了。把普通的html代码复制到左边的框框里面,然后右边的窗口就会出现转译好的jsx代码……

Read More

Plugins/Tools

HTML5 Sortable – jQuery拖放排序插件使用方法

Posted By 刘晓帆 | 475 views

插件下载地址:http://liuxiaofan.com/download/html5sortable.tar.gz

特点

  • 很轻量,压缩后体积小于1KB
  • 基于HTML5原生的darg和dorp方法
  • 支持列表和网格风格布局2种布局
  • 文档类似于jQuery UI的sortable插件
  • 兼容IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+, and Opera 12+

如何使用?

基本的DOM结构和运行脚本。

<ul class="sortable">
 <li>Item 1
 <li>Item 2
 <li>Item 3
 <li>Item 4
</ul>
<script src="jquery.sortable.js"></script>
<script>
 $('.sortable').sortable();
</script>

使用了2种样式用于区别拖拽中.sortable-dragging和拖放占位.sortable-placeholder。

使用 sortupdate 事件,触发条件为排序发生了变化。

$('.sortable').sortable().bind('sortupdate', function() {
   //当用户的dom位置改变后和排序完成之后触发
});

使用items选项用来指定哪些项目可以被拖放

$('.sortable').sortable({
    items: ':not(.disabled)'
});

使用handle选项指定一个可拖拽的小把手

$('.sortable').sortable({
    handle: '.handle'
});

使用connectWith选项,创建一个有关联的列表

$('#sortable1, #sortable2').sortable({
    connectWith: '.connected'
});

销毁方法

$('.sortable').sortable('destroy');

使其无效化方法

$('.sortable').sortable('disable');

使其有效化方法

$('.sortable').sortable('enable');
Read More
  • HTML5 Sortable – jQuery拖放排序插件使用方法已关闭评论
  • 5 months ago

JavaScript

直接事件和委托事件

Posted By 刘晓帆 | 1,010 views

有人问过我一个问题,如下

$('ul li').on('click', function () {
   //todo 
});
$('ul').on('click','li', function () {
    //todo 
});

上面这2段代码的区别是什么?

其实jquery的官网文档中有详细的解释,第1段的意思是把事件直接绑定在li上面,如果有1000个li,那么就相当于绑定了1000次li。而且只能绑定到文档中已经存在的Li上面,后续添加的li是绑定不上的,比如通过ajax添加进去的新的li。 这就是直接事件绑定。
第2段是委托事件,也叫代理事件,只绑定了一次事件到li上面,也可以监听到后续添加的li。

Read More

Plugins/Tools

iScroll 5 API 中文版

Posted By 刘晓帆 | 876 views

前言

最近项目上需要使用iScroll,在中文圈里找了找,只找到了iScroll 4的中文版API。加上最近开始使用github(准确说,github账号是很多年前注册的,一直在企业应用里摸爬滚打,荒废了账号很长时间,是理由吗?是理由吗?),出于对开源社区的敬意,我突然觉得应该做点啥,于是先挑一个简单点儿的,把iScroll 5的API翻译一下,方便中文用户使用。

搭后语

iScroll对于我来讲典型的应用场景位于移动设备的App,基于Cordova/Phonegap + JQM + iScroll开发移动设备上的App,对于以数据呈现为主体的企业应用来讲无疑是一个多快好省的解决方案。这三驾马车前两个可以堂而皇之的称之为开发框架,iScroll只能称之为工具,尽管如此,iScroll带来的强大的滚动功能,能节省我们在项目开发上的部分时间(这也是开源社区的力量),所以也值得我花时间理解作者的代码和文档。如果您认同这种功劳苦劳,请到github上给我一个star。由于才疏学浅,在翻译过程中难免会有错误或者瑕疵,请在issure中提出,我会及时更正。
(更多…)

Read More

HTML/CSS

CSS3 点击放大动画实例

Posted By 刘晓帆 | 1,220 views

需求:点击商品图片右上的收藏按钮触发放大动画;
技术重点css3:@keyframes animation

提示:你可以先修改部分代码再运行。

Read More

HTML/CSS

css框架

Posted By 刘晓帆 | 777 views

JavaScript

seajs引入jquery插件的方法

Posted By 刘晓帆 | 1,920 views

1、把你要引入的插件这样包一下

/* swiper.3.1.2.jquery.min.js */
define(function() { return function($) {
  // 这里放插件原来的代码
}});

2、引入的时候这样定义就可以了

var swiper = require('plugins/swiper/swiper.3.1.2.jquery.min')($);
Read More