论坛首页 Web前端技术论坛

HG.Plugins For jQuery — Hg.Core.js

浏览 3040 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-12-04  
      从上次简单的发布了4个hg.plugins的小插件(http://www.holygrace.cn/bate1)后,收到了很多网友的来信,大多是提问和向我说一些bug和建议,非常感谢大家的支持,经过最近一段重新对代码进行了重构,希望给大家的工作或学习提供给更多的帮助!这次首先该大家讲解以下hg.core.js的代码,这里主要为大家提供一些方便、适用的函数,其中一部分是从mootools中借鉴过来的。
    首先我们来简单讲解以下jquery原生Utilities的API
$.browser
判断游览器类型(safari、opera、msie、mozilla )

$.browser.version
判断浏览器版本
if($.browser.msie)
    alert($.browser.version)  //如果是ie浏览器,返回ie版本


$.boxModel
判断选择器选择对象是否引用W3C CSS Box Model,有关什么是box model,请查看 http://www.w3.org/TR/REC-CSS2/box.html

$.each( object, callback )
非常有用的方法,object可以是一个对象或数组,如果objeck是对象,依次遍历对象属性,如果object是数组,遍历数组的各个成员
var arr = [ "one", "two"];
var obj = { one:1,two:2 };
$.each(arr,function(index,value) {
      alert(index+":"+value)
});
$.each(obj,function(attrName,attrValue) {
      alert(attrName+":"+attrValue)
});


$.inArray(obj,array)
返回第一个对象(obj)在数组(array)中的索引,没找到是返回0。
var arr=["one","two","three"]
alert($.inArray("two", arr));


$.extend(object,object1,[objecti])
用一个或多个对象扩展第一个对象
var me={name:"holygrace"}
$.extend( me, {age:27})  //me={name:"holygrace",age:27}


$.grep(array,function)
用过滤函数对数值进行过滤
var arr=[5,6,9,4,9,8,6,2]
arr=$.grep(arr, function(value,index){
    return (value >5 && index > 4);
})
//返回索引大于4,值大于5的新数组


$.map(array,function)
对数值用相应函数重新转换
var arr=$.map([5,6,9], function(value, index){
    return (index+":"+value.toUpperCase());
})
//返回新数组,各项的值为原值转化为小写后加他的位置索引,比如原来arr[3]="HolyGrace",转换后为arr[3]="3:holygrace"


$.makeArray(object)
将类似数值的对象转化为者真实的数组
var arr = $.makeArray($(".div"));

$.trim(str)
移除字符串两端的空格

Hg.Core.js扩展API

$.id(str)
返回id为str的dom对象,就是document.getElementById(str);

$.chk(object)
检查传入的对象或值是否存在,返回true或false
function checkdate(date){
    alert($.chk(date))
}
checkdate();


$.defined(object)
检测传入的对象或值是否定义过,返回true或false

$.pick(object,defObject)
如果传入的参数被定义返回第一个对象,否则返回第二个.
function getName(str){
    return $.pick(str,"Holygrace.cn");
}
getName();              //得到"Holygrace.cn"
getName("Young.Jiang"); //得到"Young.Jiang"


$.random(min,max)
返回介于两个值之间的整数
alert($.random(5,15))  //得到5-15间的随机整数


$.toInt(str,def) , $.toFloat(str,def):
将第一个参数(str)转化为整数或浮点数,当无法转化,返回默认值(def),
alert($.toInt("ab",0)) //得到默认值0;
alert($.toInt("11px",0)) //得到默认值11;
alert($.toInt($("#id").css("left"))) //将css("11px")转化为整数11


$.gmp(e)
get mouse positon的缩写,获取鼠标事件的位置({x,y})
$("#id").click(function(e){
    var pos=$.gmp(e);
    alert(pos.x + ":" + pos.y)
})


$.url(url),$.url(url,arg),$.url(url,arg,val),$.url(url,{})
$.url(url):将参数转化为一个对象
var url="http : //www.holygrace.cn/default.asp?tag=2&article=4";
var urlObj=$.url(url);
alert(urlObj.pageName) 
//urlObj为={
//             pageName:"default.asp",
//             tag:2,
//             article:4
//         }


$.url(url,arg) :去url参数的值或页面名,如果没有找到返回undefined
alert($.url(url,"pageName")) //得到 default.asp
alert($.url(url,"article"))  //得到 4
alert($.url(url,"cat"))     //得到 undefined


$.url(url,arg,val):重新设置某个参数,返回新url
alert(($.url(url,"article",23)) //得到"http : //www.holygrace.cn/default.asp?tag=2&article=23"
alert(($.url(url,"pageName","index.aspx"))//得到 "http : //www.holygrace.cn/index.aspx?tag=2&article=23"


$.url(url,{}):批量设置参数或页面值
var newUrl=$.url(url,{
                    pageName:"index.aspx",
                    tag:4,
                    cat:"js"
                })
alert(newUrl) //得到"http : //www.holygrace.cn/index.aspx?tag=4&article=4&cat=js"


$.cookie
cookie的设置和读取
$.cookie('name', 'value');
$.cookie('name','value',{expires: 7, path:'/', domain:'www.holygrace.cn',secure: true});
//expires为cookie有效期,单位为天
$.cookie('the_cookie', null);


     还有两个函数(drag & tip),我本来想作单独的插件发布,不过考虑到函数本来代码不多,压缩后就1k多,而经常会用到,就直接将放在core中了。这里简单介绍下这两个函数的使用!
$(selector).drag(handle)
实现对对象的拖动。
$(selector):拖动对象,jquery对象
handle:对象手柄,可选填,也是jquery对象
Demo:http://www.holygrace.cn/project/drag.htm

$(selector).tip(options)
一个提示工具。
$(selector):提示对象,jquery对象
options:参数,一个对象,有4个参数,areaid、top、left、fn
areaid:显示提示信息的容器id
top:提示容器距离鼠标的位置
left:提示容器距离鼠标的位置
fn:显示提示容器时触发的方法,通常在这里动态处理提示内容,控件会动态地想该方法传入触发tip的dom对象为参数
$("a[tip]").tip({
       areaid:"show",
       fn:function(t){
             $("#img").attr("src","image/"+$(t).attr("tip"));
       }
})


Demo:http://www.holygrace.cn/project/tip.htm
下载
源代码:http://www.holygrace.cn/project/js/Hg.Core.js
压缩版:http://www.holygrace.cn/project/packer/Hg.Core.js

更多javascript、jquery、HG.Plugins知识,请查看我的blog
   发表时间:2007-12-07  
非常感谢分享。 这里快成 ext 的地盘了,看到 jquery 的好东西很难得。
0 请登录后投票
   发表时间:2008-09-16  
下载的链接已经失效了,能不能放到google code里啊
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics