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

14二/100

TyreStoreBase说明文档

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

简介

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

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

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

声明

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

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

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

Drag(拖动)

选项.
我就摘抄一下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}
    //写上上面任何一个参数.
});
GlobalOverlay(全局遮罩层)

选项.

  • 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();
MouseWheel(鼠标滚轮事件)

请移步这里

本文修改于2010-2-14

10二/101

JavaScript中正则表达式的小提示

今天用JavaScript写多级联动菜单,在使用正则表达式的时候遇到了一个非常容易出现的低级错误.为了提醒广大民众,我还是写一个小提示,防止大家再碰到这种问题.
首先我定义了以下的字符串

"华南地区{{福建[[福州,厦门,泉州.."

在正则表达式中"{}","[]","()"都是有特殊意义的特殊字符,所以我们要使用"\\"将之变为其符号本身.

此时如果要匹配华南地区,及其以后的所有字符串,我们的正则表达式可以这样写

"福建\\[\\[.+"

(为了保证"福建"一定是以及菜单,所以才在".+"之前添加了"\[\[").这么以来,使用正则表达式测试工具完全没问题.可是现实测试中却无法匹配任何文本.后来我将"["改为"$"也无解.知道我使用上了反斜杠"\"时才意识到----平常的javascript字符串当中,我们经常使用"\"后面跟一个字母来实现特殊意义(比如说"\n"代表换行).而前面的正则表达式单纯在"\"之后加一个符号"["首先将会进行一次字符之间的转义,而此次转义(也就是"\[")对于javascript来说毫无意义,那么最终会变为字符本身(也就是"[",少了个反斜杠).

在字符转义完之后,上面的表达式自然而然得成为了:

"福建[[.+"

此时javascript才开始正则匹配.而上面的表达式肯定是错误的,所以要嘛报错,要嘛无法匹配到你想要的任何东西.

所以最终我们的正则表达式字符串应该这样写:

"福建\\\\[\\\\[.+"

那么我是怎么被这一个简单到爆的东西忽悠一个下午的呢?
首先,我在写这段表达式之前就犯了一个错误:

"华南地区\\{\\{.+"

这段代码在javascript中运行完全没问题,至于为什么,我也很郁闷.
其次,在string.replace当中javascript的正则表达式的写法又不相同,而是:
[例:]

str.replace(/\\[\\[.+/,"")

而我恰恰就忘了字符串的反斜杠是先转义成一个真正的字符串,再用来匹配正则表达式,还有就是这2种写法让我引起困惑--为什么replace那儿的行,而现在这个地方不行.

那么现在问题迎刃而解了.也希望我的篇文章能帮到你! :)