膘叔（Neatstudio.COM）

浏览模式: 标准 | 列表Tag:jquery

关注：jQuery Mobile来了！

Submitted by gouki on 2010, August 15, 2:26 PM

　　为了让移动设备也能用上jQuery，jQuery开发团队发布了jQuery移动设备版开发项目jQuery Mobile Project（http://jquerymobile.com）。jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。

　　对于大名鼎鼎的jQuery开发团队来说，当然要让jQuery Mobile支持全球主流的移动平台，而不仅仅是北美流行的移动平台。想要知道jQuery Mobile项目将要做些什么吗？请看jQuery移动平台策略；想要知道jQuery Mobile项目将会支持哪些浏览器吗？请看Mobile Graded Browser Support。

　　jQuery Mobile开发团队正在紧张工作，准备那些要支持的移动设备并针对这些设备进行测试。他们争取在今年晚些时候发布jQuery Mobile。如果你想为jQuery Mobile提供帮助，请加入jQuery Mobile社区的讨论组。

　　jQuery Mobile项目已经得到了Palm, Mozilla等移动浏览器厂商的赞助。

　　jQuery Mobile开发团队说：“能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。”

　　编者：移动互联网，挡不住的趋势...

　　英文原文：Announcing the jQuery Mobile Project

　　博客园编译

Tags: jquery, jquery mobile

Javascript | 评论:1 | 阅读:21849

jQuery 绑定自定义事件

Submitted by gouki on 2010, August 11, 10:40 PM

一般情况下，我们对于jQuery的事件绑定都是采用bind，从1.3开始。可以同时绑定多个事件了。这是非常方便的情况，但是对于checkbox和radio来说会有几种情况，比如checkbox选中时，本身就触发了click事件，这时候怎么办？如果为checkbox添加label那么lable在点击时，能不能触发checkbox的click事件？这都需要研究一下。比如，我们在checkbox上绑定了click事件，平时我们在选中的时候都有触发。但是在label上点击的时候，就要再额外加一下了。

$("input[type=checkbox]").bind('click',function(){
//...
})
$('label').click(function(){
$(this).children('input[type=checkbox]').click();
})

基本上也可以触发这种事件。
一般元素在绑定的时候，都是绑定click,change,等

//~~但如果想触发系统事件，就必须是evtClick了。【~~这里其实是自定义事件。在绑定后还是需要单独触发一下。原来我写错了。】

可以参考http://www.cnblogs.com/mamboer/archive/2010/08/11/1797532.html

Tags: jquery, bind

Javascript | 评论:0 | 阅读:18782

jQuery：TAB切换

Submitted by gouki on 2010, August 2, 2:51 PM

没有什么特别的东西。主要就是有了一个延迟，但效果不是特别好。。将就点了。

JavaScript代码

$.fn.gTab = function( opts ){
var options = {
'timer':0, //0.005秒
'hover':'',
'target':'',
'autoswitch':false,
'addClass':'',
'removeClass':''
};
var self = $(this);
opts = $.extend(true, {},options,opts || {});
if(!opts.target){
alert('对不起，请设置目标对象');
return ;
}
if(!opts.hover){
opts.hover = self;
}
var hoverIntervalFunc = function(index){
return setInterval(function(){
$(opts.target+':not(eq('+index+'))').hide();
$(opts.hover+':not(eq('+index+'))').removeClass(opts.addClass).addClass(opts.removeClass);
$(opts.target+':eq('+index+')').show();
$(opts.hover+':eq('+index+')').removeClass(opts.removeClass).addClass(opts.addClass);
},opts.timer);
}
$(this).hover(
function(){
var index = self.index(this);
cId = hoverIntervalFunc(index);
},
function(){
clearInterval(cId);
}
)
}

花了半小时写的。所以效果一些都没有特别的考虑。只考虑实现就完事了。。。象很多都是用的:eq和:not(:eq)，事实上siblings()已经实现这个功能，但当时写的时候没翻到这个函数，就直接用:not(:eq)来解决了。

Tags: jquery, tab

Javascript | 评论:0 | 阅读:18175

jQuery 层隐藏

Submitted by gouki on 2010, July 30, 5:36 PM

jQuery做二级菜单（模仿京东），非常方便，只需要hover就行了。
正好完成一个mouseover和mouseout就实现这个功能了，但是，如果菜单需要延迟关闭或者通过其他形式来关闭就有点不方便了。

现在网上的很多现成的，都是把子菜单层放在mouseover对象的层内。所以mouseover,mouseout的时候就不用担心了，只要over的时候show,out的时候hide就成了。

不过，我昨天接到的是分别处于两个不同的div，两个div是并级关系。。于是就写了以下代码。

JavaScript代码

$(function(){
$('.first_div li').hover(
function(){
var selId = $(this).index('.first_div li');
var _self = this;
t = setTimeout(function(){
$('img',_self).attr('src',$('img',_self).attr('src').replace('normal','lightened'));
$('#second_div').show();
$('.sub1_div:eq('+selId+')').show().siblings().hide();
},250)
},
function(){
$('img',this).attr('src',$('img',this).attr('src').replace('lightened','normal'));
//$('#second_div').hide()
clearTimeout(t);
}
);
$('.absLeftMenu').mouseout(function(e){
var e = e || window.event, relatedTarget = e.toElement || e.relatedTarget;
while(relatedTarget && relatedTarget != this)
relatedTarget = relatedTarget.parentNode;
if(!relatedTarget)
$('#second_div').hide();
});
$('.sub1_div li').mouseover(
function(){
$('#sub2_div').show().html($(this).children('ul').html());
}
)
})