标签:jquery

浏览模式: 标准 | 列表 | 图文
关注:jQuery Mobile来了!

关注:jQuery Mobile来了!

  为了让移动设备也能用上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。

6f521567fde3e8f1ee0e82a225ab1bba

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

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

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

  编者:移动互联网,挡不住的趋势...

  英文原文:Announcing the jQuery Mobile Project

  博客园编译

jQuery 绑定自定义事件

jQuery 绑定自定义事件

一般情况下,我们对于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

jQuery:TAB切换

jQuery:TAB切换

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

$.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)来解决了。
jQuery 层隐藏

jQuery 层隐藏

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

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

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

$(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());
}
)
})
主要也是自己想做个笔记,在absLeftMenu的mouseout的时候,默认一下子就关闭了子层。这样就造成子层会一闪一闪。所以上了上面的代码。。。(抄来的)
JS小插件:图片轮换

JS小插件:图片轮换

花了半小时写的插件,没有仔细测试和优化。应该还有优化的空间(绝对有)

页面的效果都是从其他地方拷来的,所以可能有点不对。。。将就点吧。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.d2{width:100%;height:209px;overflow:hidden;}
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}
.num_list span{display:inline-block;height:16px;padding-left:6px;}
img{border:0px;}
.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
.b2{color:#FFCC33;background-color:#FF6633;}
</style>
<script type="text/javascript" src="http://localhost/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$.fn.fadeImages = function( options ){
var defaults = {
timer:2000,
speed:'slow',
loading:'.loading',
message:'.num_list',
imgarea:'.d2',
ctlButton:'.button'
};
var opts = $.extend({},'',defaults,options||{});
var self = this;
var imgCount = $('ul li',self).length; //图片数
//$(self).css({'width':$('> ul li:first >img',self).width()});
$(' > ul', self).hide();
$('.d2').hide();
var cId = start = 1;
var tmp = [];
for (var i = 1; i <= imgCount ; i++ ){
tmp.push("<a class='b1'>"+ ( i )+"</a>");
}
$(opts.ctlButton).html( tmp.join(""));
var switchImages = function(){
return setInterval(function(){
if(start >= imgCount){
start = 0;
}
doSwitch(start);
start++;
},opts.timer);
}
var doSwitch = function( start ){
var current = $('>ul li:eq('+start+')',self);
$(opts.imgarea).fadeOut( opts.speed ,function(){$(this).fadeIn().html( $(current).html() )});
$('.num_list').html("<span style='margin-top:3ppx'>"+$(' img',current).attr('alt')+"</span>" );
$(opts.ctlButton + ' a:eq('+start+')').addClass('b2').removeClass('b1').siblings().addClass('b1').removeClass('b2');
}
$(opts.ctlButton+' a').hover(
function(){
clearInterval(cId);
start = $(this).index();
doSwitch(start);
},
function(){
start++;
cId = switchImages();
}
);
$(opts.loading).fadeOut('slow',function(){
doSwitch(0);
cId = switchImages();
});
}
$(function(){
$('#fade_focus').fadeImages();
})
</script>
<title>Javascript图片幻灯效果——neatstudio.com</title>
</head>
<body>
<div id="fade_focus">
<ul>
<li><a href="http://www.wxwdesign.cn" target="_blank"><img src="http://www.alixixi.com//UploadPic/2009-3/200932411630872.jpg" alt="展示图片1" height="209" width="443"></a></li>
<li><a href="http://www.wxwdesign.cn" target="_blank"><img src="http://www.alixixi.com//UploadPic/2009-3/200932411631990.jpg" alt="展示图片2" height="209" width="443"></a></li>
<li><a href="http://www.wxwdesign.cn" target="_blank"><img src="http://www.alixixi.com//UploadPic/2009-3/200932411631905.jpg" alt="展示图片3" height="209" width="443"></a></li>
<li><a href="http://www.wxwdesign.cn" target="_blank"><img src="http://www.alixixi.com//UploadPic/2009-3/200932411631473.jpg" alt="展示图片4" height="209" width="443"></a></li>
</ul>
<div class="loading">Loading...<br />
<img src="http://localhost/loading.gif" width="100" height="100" /></div>
<div style="opacity: 1;" class="d2"> <a href="http://www.wxwdesign.cn" target="_blank"><img src="http://localhost/1.jpg" alt="展示图片2" height="209" width="443"></a> </div>
<div style="opacity: 0.8;" class="num_list"> <span style="margin-top: 3px;">展示图片2</span> </div>
<div class="button"> <a class="b1">1</a><a class="b2">2</a><a class="b1">3</a><a class="b1">4</a> </div>
</div>
</body>
</html>

其他不多说了。。。

笔记:json_encode和jquery等

笔记:json_encode和jquery等

一些笔记
1、json_encode与json_decode的。开花石头在村里说,如果json_encode是字符串,那么在解码的时候还是字符串而不是数组,这点与手册上写的不太一样(是指json_decode的第二个参数是true的情况)
具体我没有测试,我想石头既然能够发出来那么一定是有这种情况发生,因此算是做个笔记

2、jquery。在使用$('.xxx').hover时,如何知道当前hover对象在整个$('.xxx')对象中的索引值。事实上,我早就知道有$('li').index()之类的用法,但真的一次都没有成功过。简单的例子:

$('#test li').hover(function(){
alert( $('#test li').index(this) );
},function(){
//...
});

差不多就是这样。了解到索引值是多少后,就可以针对它们做很多事。$("xxx:eq("+index+")").text()等操作都可以操作了。

3、在InfoQ上看到有为PHP用户写的AS简单教程(InfoQ上的PDF下载时为显示404,请使用此链接:http://www.riameeting.com/magazine/pdf/RIAMeetingWeeklyReportNum24.pdf),这个版本是在线的,http://blog.csdn.net/lihe111/archive/2010/01/14/5189572.aspx

4、还是InfoQ,领域驱动设计这本书的简化版,原书我有,只是看infoQ上介绍说,这几章是精选出来的。因此想简单了解的话,确实不错:http://www.infoq.com/resource/minibooks/domain-driven-design-quickly/zh/pdf/dddquickly-chinese-version.pdf

5、对于WEB开发人员来说,dreamweaver和fireworks等是必备工具,如果不是专业的前端人员,d8和f8就足够了。而且很小,只有100M都不到。因为这些不是正版所以我不提供下载地址。

将Yiiframework与JQuery easyUI整合使用

jquery easyUI框架是国内某JS牛人写的仿extJS的框架。比较简单的实现一些功能,虽然目前还是有一些BUG,但将就着用用,也还能够接受。
YiiFramework是国内某PHP牛人写的php框架,哦,好象人不在国内。最近用的人较多。本人比较喜欢他们提供的虚拟机(只有16M,当然,安装后达到100多M)

随便的整合了一下,目前是这个情况。

b4f42cb619240ea1b4deaa6398e3e2f1

几个问题需要注意一下的

1、layout的时候要注意。因为easyUI框架里面的页面也需要用到jquery,因此在布局的时候得考虑header部分

2、登录框,与1的条件相关

3、$this->render与$this->renderPartial ,renderPartial是不渲染任何模版的。如果你不想用layout的时候,可以用这个renderPartial方法

其它的就属于一些小事了,比如菜单可以用json_encode输出之类的。前两天还写了一个jquery easyUI这个outlook式的menu改进。

整体用下来还算比较方便

jQuery EasyUI Demo 修正

jQuery EasyUI Demo 修正

对秀才的demo做了点简单的修正。
1、index.html中的
var _menus = { menu object };
改为
var _menus = [{xx}];
这样的好处是,如果json是生成而来的也不受影响

2、修改outlook.js
在 InitLeftMenu()方法 增加一个判断:
if( typeof _menus[0] != 'object'){
alert('左侧菜单加载失败,请检查菜单数据来源');
return ;
}
搜索 _menus,改为_menus[0]

--------------------------
理由,因为大多数时间菜单是用程序生成的。如果不用[]包住就可能会出现
var _menus = ;
function test(){}
这样,语法是错误的。用[]进行一下容错。
-------------------------
demo也不错,提供下载,但我在这个压缩包里没有进行修正【请需要的朋友自己修正吧】
作者:疯狂秀才
网站:http://hxling.cnblogs.com
Demo:4578cadd56e3069229953180fabc2c5b

取消radio的选中状态

取消radio的选中状态

一个简单的例子,是懒宝宝让我帮忙的。因为我自己也注意到了,radio在选中后,一般无法取消,查了一下google,发现还是有方法 的。因此,立马解决了:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<table class="rs" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>HIV :阴
<input type="radio" name="hiv[0]" value="HIV:阴" union="yin"/>
阳
<input type="radio" name="hiv[0]" value="HIV:阳" union="yang" /></td>
<td>梅毒:阴
<input type="radio" name="hiv[1]" value="梅毒:阴" union="yin" />
阳
<input type="radio" name="hiv[1]" value="梅毒:阳" union="yang" /></td>
<td>疱疹:阴
<input type="radio" name="hiv[2]" value="疱疹:阴" union="yin" />
阳
<input type="radio" name="hiv[2]" value="疱疹:阳" union="yang" /></td>
<td>淋病:阴
<input type="radio" name="hiv[3]" value="淋病:阴" union="yin" />
阳
<input type="radio" name="hiv[3]" value="淋病:阳" union="yang" /></td>
</tr>
<tr>
<td>非淋:阴
<input type="radio" name="hiv[4]" value="非淋:阴" union="yin" />
阳
<input type="radio" name="hiv[4]" value="非淋:阳" union="yang" /></td>
<td>湿疣:阴
<input type="radio" name="hiv[5]" value="湿疣:阴" union="yin" />
阳
<input type="radio" name="hiv[5]" value="湿疣:阳" union="yang" /></td>
<td>丙肝:阴
<input type="radio" name="hiv[6]" value="丙肝:阴" union="yin" />
阳
<input type="radio" name="hiv[6]" value="丙肝:阳" union="yang" /></td>
<td><a style="cursor:pointer;" id='allyin'>全阴</a> <a style="cursor:pointer;" id='allyang'>全阳</a> <a id='allempty' style="cursor:pointer;">重填</a>
<script>
$(function(){
$('#allyin').click(function(){
$(':input[union="yin"]').attr('checked','checked');
});
$('#allyang').click(function(){
$(':input[union=yang]').attr('checked','checked');
});
$('#allempty').click(function(){
$(':input[union=yang]').each(function(){
$(this).attr('checked','checked');
var tmp = $(this)[0];
tmp.checked = false;
tmp = null;
})
});
});
</script></td>
</tr>
</table>
因为用jquery的话,选中radion的方法很方便。所以,就尝试用这种方式解决了。。。但是用jquery无法取消checked状态,只能用原生js的方式才行(jquery是把元素都转换为对象,而不是DOM对象)

jQuery的事件绑定命名空间

jQuery的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定。在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间。事实上,我看完这篇文章后,再去翻了一下手册,也才发现了一点点的注释。但手册也仅仅是一句话就带过去了。没有过多的深究,或许他认为命名空间这玩意很简单,没有必要多解释?

先看手册,由于bind方法有三个参数(type,[data],fn),所以手册上这么介绍:

.bind() 方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象,比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的。

jQuery还提供了一些绑定这些标准事件类型的简单方式,比如.click()用于简化.bind('click')。一共有以下这些:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。

任何作为type参数的字符串都是合法的;如果一个字符串不是原生的JavaScript事件名,那么这个事件处理函数会绑定到一个自定义事件上。这些自定义事件绝对不会由浏览器触发,但可以通过使用.trigger()或者.triggerHandler()在其他代码中手动触发。

如果type参数的字符串中包含一个点(.)字符,那么这个事件就看做是有命名空间的了。这个点字符就用来分隔事件和他的命名空间。举例来说,如果执行 .bind('click.name', handler) ,那么字符串中的 click 是事件类型,而字符串 name 就是命名空间。命名空间允许我们取消绑定或者触发一些特定类型的事件,而不用触发别的事件。参考unbind()来获取更多信息。

当一个事件传到一个元素上,所有绑定在上面的针对哪个事件的处理函数都会触发。如果注册了多个事件处理函数,总是按照绑定的顺序依次触发。当所有绑定的事件处理函数执行完毕后,事件继续沿着普通的事件冒泡途径上浮。
Zeal这么理解,并解析了上面的一段:
jQuery的 bind / unbind 方法应该说使用很简单,而且大多数时候可能并不会用到,取而代之的是直接用 click / keydown 之类的事件名风格的方法来做事件绑定操作。

但假设如下情况:需要在运行时根据用户交互的结果进行不同click事件处理逻辑的绑定,因而理论上会无数次对某一个事件进行 bind / unbind 操作。但又希望 unbind 的时候只把自己绑上去的处理逻辑给释放掉而不是所有其他地方有可能的额外的同一事件绑定逻辑。

这时候如果直接用 .click() / .bind('click') 加上 .unbind('click') 来进行重复绑定的话,被 unbind 掉的将是所有绑定在元素上的 click 处理逻辑,潜在会影响到该元素其他第三方的行为。当然如果在bind的时候是显示定义了function变量的话,可以在unbind的时候提供 function作为第二个参数来指定只unbind其中一个处理逻辑,但实际应用中很可能会碰到各种进行匿名函数绑定的情况。

对于这种问题,jQuery的解决方案是使用事件绑定的命名空间。即在事件名称后添加 .something 来区分自己这部分行为逻辑范围。

比如用 .bind('click.myCustomRoutine',function(){...}); 同样是把匿名函数绑定到 click 事件(你可以用自己的命名空间多次绑定不同的行为方法上去),当unbind的时候用 .unbind('click.myCustomRoutine') 即可释放所有绑定到 .myCustomRoutine 命名空间的 click 事件,而不会解除其他通过 .bind('click') 或另外的命名空间所绑定的事件行为。

同时,使用命令空间还可以让你一次性 unbind 所有此命名空间下的自定义事件绑定,通过 .unbind('.myCustomRoutine') 即可。

要注意的是,jQuery的命名空间并不支持多级空间。因为在jQuery里面,如果用 .unbind('click.myCustomRoutine.myCustomSubone') ,解除的是命名空间分别为 myCustomRoutine 和 myCustomSubone 的两个并列命名空间下的所有 click 事件,而不是 "myCustomRoutine 下的 myCustomSubone 子空间"。

如此看来,命名空间还是有点用的。只是不知道会有多少人用得上这个功能(不开发插件的人,估计永远用不到吧?)我也是仅作一下笔记而已