iTakeo

使用localstorage来缓存js文件。

大家写项目的时候，应该都会去引用jq库吧，每次都去加载这几十K的东西，虽说不大，但是多少都会占用带宽。或许你可以使用缓存，但是强制刷新，或者清空缓存之后，还是会去请求加载。

其实可以使用localstorage来缓存js。只要用户不去remove掉，基本上可以一直保存下来，并且存储量能达到5M，可以把css，js甚至一些图片缓存起来也可以。

下面的实例代码，用到之前封装的localstorage方法，具体 点击这里查看。ajax方法点击这里查看。

写一个简单的小栗子。

//进页面的时候判断是否有jquery
if(!store.get('jq')){
    //如果没有，则设置localstorage
    Ajax.init({
        type : 'get',
        url :'jq.php',
        success : function(d){
            //设置
            store.set('jq',d);
            init();
        }
    }); 
}else{
    //否则
    init();
};
function init(){
    //把jq写进html
    var js = document.createElement('script');
    js.type = "text/javascript";
    js.innerHTML = store.get('jq');
    document.querySelector('head').appendChild(js);
    //测试jq是否引入成功
    alert(jQuery.fn.jquery);
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

看下控制台结果。

（更多…）

2016/1/19 0 /
前端
/
标签:  暂无标签

轻量级轮播图小插件。

轻量级轮播图插件，可全屏自适应，压缩后仅有2K多，麻雀虽小，五脏俱全。不用在为了一个轮播图，而去加载几十K的大插件了，下面看使用方法。

html 

<div class="wrap">
    <ul> //这里必须为第一个子元素
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
01.
02.
03.
04.
05.
06.
07.
08.

css 

.wrap{width:90%;height: 300px;overflow: hidden;}
ul {width: 100%;height: 100%;position: relative; }
ul li{ list-style: none;height: 100%;width: 100%; position: absolute; left: 0px;top: 0px;display: none;/*隐藏*/}
/*注意，下面这三个class必须为这样的类名，因为没有以参数的形式写进js，所以不能改变*/
/*如果左右切换复制以下css*/
li.active{display: block}
li.nextList{ display:block;left: -100%}
li.prevList{ display:block;left: 100%}
/*如果上下切换复制以下css*/
li.active{display: block}
li.nextList{ display:block;top: -100%}
li.prevList{ display:block;top: 100%}
/*如果透明切换用以下css*/
li.active{display: block}
li.nextList{ display:block;opacity: 0;filter:alpha(opacity:0)}
li.prevList{ display:block;opacity: 0;filter:alpha(opacity:0)}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.

上面css中列表li为absolute，所以固定了高度，并不会被图片撑开，如果需要高度跟着图片撑开的话，修改为relative，并将nextList和prevList添加position: absolute即可。

调用接口： 

//直接传入class或者id
var es = new EasySlide('.wrap');
//也可以第二个参数带入配置，配置如下
var es = new EasySlide('.wrap',{
    speed :500,   //切换速度
    type : 'x',   //切换类型，有3个选项，x，y，fade（这个代表渐隐渐现）
    time : 3000,  //自动播放间隔时间
    auto : true,  //是否自动播放
    before : function(n){
        //每次切换之前执行，n为当前索引值
    },
    after : function(n){
       //每次切换结束后执行，n为当前索引值
    }
});
es.active  //获取当前的索引值
//其他方法
es.stop() //停机切换
es.start() //开始切换
es.to (3) //切换到第几个
es.next() //切换下一个
es.prev() //切换上一个 
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

看几个例子，默认X轴：

（更多…）

2016/1/17 6 /
前端
/
标签:  暂无标签

移动端页面下拉刷新。

页面下拉刷新。看过很多下拉刷新的组件，要么通过Iscroll这样的插件完成，要么原生写的并不是很完美，大部分都有点bug。于是~~~尝试写了一个。

DOM结构如下：

<body>
    //内容
</body>
01.
02.
03.

如果页面顶部有 fixed 定位元素的话，transform 属性会让fixed失效，所以改为嵌套一层。 

<body>
    <section class="wrap">
        //内容
    </section>
</body>
01.
02.
03.
04.
05.

调用接口： 

var s = new Refresh('body')  //包裹层的id或者class或者body，默认body
//其他方法
s.start(function(){
    //开始加载或者刷新
});
//加载或者失败执行，用与收回提示
s.load();  
s.load(400) //代表加载完成后多久收回提示框，非必要参数，默认400毫秒
s.load(function(){
    //也可以自定义加载成功标语，或者执行其他函数
    this.innerHTML = '加载成功啦啦~'
    //this.innerHTML = '加载失败了~'
},400); //时间放到后面，非必要参数  
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.

比如，如果只需要下拉刷新，可以这么做： 

var s = new Refresh();
s.start(function(){
    location.reload(); //执行刷新
});
01.
02.
03.
04.

如果需要ajax更新内容，如下： 

var s = new Refresh();
s.start(function(){
    //ajax请求
    $.ajax({
        success : function(){
            //ajax成功后执行load
            s.load(400);
        }
    });
}); 
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

点击这里查看DEMO

点击这里下载JS

2016/1/13 2 /
前端
/
标签:  暂无标签

自定义右键菜单。


调用：

//第一个参数为触发对象。
//第二个参数是一个数组，数组每项是个JSON，每个json就是一个菜单
contextMenu.init (document,[
    {
        name : '重新加载',  //菜单内容
        className : 'test', //自定义class
        disable : true, //设置是否禁用
        data : ['title','test'], //添加data属性，类型为数组，第一个参数是属性名，第二个为属性值
        icon : 'http://itakeo.com/images/icon2.png', //添加icon小图标
        callback : function(){  //点击回调函数
            alert(this)
        }
    }
]);
//还可以指定显示某个元素，第二个参数为class或者id
contextMenu.init( document,'.target' );
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.

演示：

（更多…）

2016/1/10 1 /
前端
/
标签:  暂无标签

轻量级模拟滚动条。

又是一个模拟滚动条，鉴于之前写过一个（点击这里查看），总感觉不是很完美，也没有耐心去完善他，于是重新写了一个，代码量更少，压缩后仅2K。先看下使用方法。

DOM结构如下，分两层，外面包裹一层，里面一层也不需要去设置定位，只需要设置 overflow:auto 即可。 

<div class="wrap">
    <div class="content">
        //内容
    </div>
</div>
01.
02.
03.
04.
05.

JS调用： 

//传入元素的id或者class
var s = new Scroll('.scrollWrap');
s.top(function(){
    //达到顶部执行
});
s.bottom(function(){
    //达到底部执行
});
s.resize(); //用于添加内容或者自适应的时候，重新计算滚动条高度 
01.
02.
03.
04.
05.
06.
07.
08.
09.

看个例子：

（更多…）

2016/1/8 0 /
前端
/
标签:  暂无标签

页面内容滚动监测。

页面内容滚动监测，就是当前第几个的内容出现在可视区，给第几个导航菜单添加高亮，做了下简单的封装，先看调用方法： 

var nav = new fixedNav({
    nav : '.nav1',  //必须参数，菜单每项的class
    content : '.content div', //必须参数，内容标示每项的class
    position : 'view',  //具体说明看下面的例子
    offset : 0   //触发范围追加
});
nav.scroll(function(t){
    // t为当前的scrollTop，可用户判断
});
nav.active(function(i){
    // 返回当前内容在可视区的索引值
    // 注意：如果position参数为view的时候，返回的i是一个数组
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.

代码自身没有做太多功能，只计算内容区域是否出现在可视区，具体的滚动判断，以及改变导航颜色等都以接口的形式自己设置。

下面针对上面的接口，写几个案例：

（更多…）

2016/1/7 0 /
前端
/
标签:  暂无标签

图片上传本地预览。

图片上传本地预览。兼容IE。

html

<input onchange="PreviewImage(this)" type="file">
01.

js

function PreviewImage(obj) {
    var _divNewPreview = document.getElementById('divNewPreview');
    var allowExtention = ".jpg,.bmp,.gif,.png,.jpeg";
    //,允许上传文件的后缀名
    var extention = obj.value.substring(obj.value.lastIndexOf(".") + 1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if (allowExtention.indexOf(extention) > -1) {
        //判断是否是IE浏览器
        if ( obj.files ) {
            //兼容HTML5获取路径
            if ( typeof FileReader !== "undefined") {
                for(var i = 0;i < obj.files.length;i++){  
                    var file = obj.files[i]; 
                    var reader = new FileReader();
                    reader.readAsDataURL(obj.files[i]);
                    reader.onload = function(e) {
                        //添加图片
                        _divNewPreview.insertAdjacentHTML("beforeend", '<div class="imgBox"><img src="'+this.result+'" alt=""> </div>');
                    };
                };
            };
        }else{
            //添加图片
            obj.select();  
            obj.blur();  
            _divNewPreview.insertAdjacentHTML("beforeend", '<div class="imgBox"></div>');
            _divNewPreview.lastChild.style.filter = " progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            _divNewPreview.lastChild.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text; 
        };
    } else {
        alert("仅支持jpg,bmp,gif,png为后缀名的文件!");
        obj.value = "";
    };
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

下面是演示效果：

（更多…）

2016/1/4 0 /
前端
/
标签:  暂无标签

localstorage（本地存储）简单封装。

将HTML5本地存储简单的封装了下，方便使用。

设置

//设置
store.set('user','张三');
//可以传入数组
store.set('list',[1,2,3,4]);
//还可以传入一个JSON
store.set('user',{
    key : 10,
    key1 : 20
});
01.
02.
03.
04.
05.
06.
07.
08.
09.

获取

//获取
store.get('user');
//如果存储的是数组
store.get('user')[0];
//如果存储的是JSON
store.get('user').key;
01.
02.
03.
04.
05.
06.

删除

//删除
store.remove('user');
//第二个参数不写的时候，默认也是删除
store.set('user');
//清除所有
store.clear();
01.
02.
03.
04.
05.
06.

其他操作

//存储的个数
store.length();
//获取第几个
store.key (i);
//循环所有已经存储的数据
store.each(function(k,v){
    console.log ( k + '==' + v );
});
//判断本地存储是否可用
store.enabled;
if(!store.enabled) alert('当前本地存储不可用！');
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.

源码如下：

（更多…）

2016/1/2 2 /
前端
/
标签:  暂无标签

倒计时。

倒计时：

var c = new CountDown('2012/12/12 12:12:12'); //传入结束的时间
var c = new CountDown('2012/12/12'); //传入结束的时间
var c = new CountDown(['2012/12/12','2012/12/13']); //或者传入数组，第一个开始时间，第二个结束时间
var c = new CountDown(5000000); //或者是毫秒数
//run方法，第一个参数为执行方法，第二个参数是刷新时间，可不写，默认1000毫秒
c.run(function(t){
    //t是一个对象
    //t.day   剩余天数
    //t.hour  剩余小时
    //t.min   剩余分钟
    //t.sec   剩余秒数
    //t.ms    剩余毫秒数
},1000);
c.end(function(){
    //倒计时结束
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.

例子1：

倒计时:

00：00：00 

var span = document.querySelectorAll('.countdown1 span');
new CountDown(500000).run(function(e){
    span[0].innerHTML = e.hour;
    span[1].innerHTML = e.min;
    span[2].innerHTML = e.sec;
});
01.
02.
03.
04.
05.
06.

例子2：

9 8 7 6 5 4 3 2 1 0
9 8 7 6 5 4 3 2 1 0
:
9 8 7 6 5 4 3 2 1 0
9 8 7 6 5 4 3 2 1 0
:
9 8 7 6 5 4 3 2 1 0
0 1 2 3 4 5 6 7 8 9 0

例子3：

倒计时:

00：00：00：00

点击这里下载JS

2016/1/1 0 /
未分类
/
标签:  暂无标签

动态添加JS、CSS文件。

往页面中动态添加JS、css文件：

css：

//直接写入路径
ui.style('comm.css');  
//或者写入多个路径，数组形式
ui.style(['style.css','animate.css']);
//回调函数
ui.style('comm.css',function(){
    alert('加载完成');
}); 
01.
02.
03.
04.
05.
06.
07.
08.
//还提供了一个inlineStyle方法，是在head里面创建style标签，直接写在页面内的，参数为css样式字符串  
var css = 'div{width:100px;height:100px}';
ui.inlineStyle(css);
01.
02.
03.

js：

//直接写入路径
ui.script('comm.js');  
//或者写入多个路径，数组形式
ui.script(['jquery.js','animate.js']);
//回调函数
ui.script('comm.js',function(){
    alert('加载完成');
}); 
01.
02.
03.
04.
05.
06.
07.
08.

点击这里下载JS

2015/12/31 0 /
前端
/
标签:  暂无标签
4/10
首页
 
上一页
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
下一页
 
末页
 

Copyright © 2024 Powered by

皖ICP备15014831号

回到顶部