{ Snake @ NET } 废寝忘食的程序工作者.

TyreStoreBase说明文档

本文是TyreStore(轮子仓库)的基础函数库说明文档.若您还不清楚TyreStore是干啥的,请移步至前面的链接.

TyreStoreBase是一个特殊层,夹在jQuery和TyreStore具体插件中间.为什么要产生这个看似有点麻烦的层呢?主要原因为提高代码的可复用性,缩减单个插件的代码量.

就按照drag这个非常基础的方法来说,jQuery并没有提供具体的方法给我们调用,而很多函数都需要用到drag方法,因此我把这一个基础的函数写在独立的代码里面,方便所有的插件调用.

那么目前为止,在我写的5个小插件当中,我总共分离出了3个基础函数,他们分别是:

• drag(拖动)
• globalOverlay(全局遮罩层)
• mousewheel(鼠标滚轮事件处理)//此代码非本人所写,代码来由Brandon Aaron所写,链接在这里.

首先TyreStore的任何代码均基于jQuery框架自主编写完成,并享有著作权,且遵循MIT与GPL v2协议.

其次.TyreStoreBase的函数都以"_$"开头.

最后.我个人觉得目前这个基础函数写的还是不够基础,修改和整合的余地非常大.

选项.
我就摘抄一下Source里面的部分内容,其实Source里注释的很清楚了.

var defaults = {
    xMove: true,                //横向拖动--boolean
    yMove: true,                //纵向拖动--boolean
    onDrag: function() { },     //当鼠标按下刚开始拖动的回调函数--function
    drag: function() { },       //当拖动时的回调函数--function
    stopDrag: function() { },   //当鼠标松开刚停止拖动的回调函数--function
    region: {                   //限制区域(以含有position:relative的父级容器为准)--object
        top: -1,                //上  右  下  左--numeric
        right: -1,
        bottom: -1,
        left: -1
    },
    tick: 0,                    //按照网格拖动,该数值为网格的大小--numeric
    realDrag: true              //真实的拖动?(我在怀疑是否改将这属性去掉,但是有些人说不定就会用到拖动时鼠标的坐标,而并不想让物体移动.比如我XD)--boolean
};

事件.
其实在开始拖动,拖动进行时,完成拖动的3个回调函数中,都带有一个参数它的类型是object,其中包含7个对象:

• drawable(是否可以被拖动)
• curx(鼠标开始拖动时的X坐标)
• cury(鼠标开始拖动时的Y坐标)
• absx(鼠标当前对于window的绝对X坐标)
• absy(不多做解释)
• x(当前元素对于window或含有position:relative的父级元素的X坐标)
• y(不多做解释)

怎么用,就靠您的想象啦!
使用方法.

//超超超超简单.只要这样
$("#elem")._$drag();
 //当然,也可以这样
$("#elem_extend")._$drag({
    region:{top:0,right:200,bottom:200,left:0}
    //写上上面任何一个参数.
});

选项.

• speed(显示速度)--numeric(基本单位毫秒)
• handleEvent(绑定处理事件)--object.其中有2个对象,一个是绑定的事件名称:event,另一个是绑定的事件处理函数:callback
• opacity--numeric(0~1)

用法.

//也是很简单.
$._$globalOverlay();
//全面的用法是:
$._$globalOverlay(
    300,
    {
        event:"click",
        callback:function(){
            //alert("You clicked me!");
    },
    0.6
);
//最后还有一个隐藏遮罩层的办法:
$._$globalOverlay.hide();

请移步这里

本文修改于2010-2-14