插件学习实例1,利用js定时器设定时间执行动作

一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是:
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
1.1、jQuery.fn.extend(object):
可以参靠jquery参考手册的连个例子:

进入正题,先说说定时器。
在javascritp中,有两个关于定时器的专用函数,分别为:
1.倒计定时器:timename=setTimeout(“function();”,delaytime);
2.循环定时器:timename=setInterval(“function();”,delaytime);
第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成
“alert(‘第一个警告窗口!’);alert(‘第二个警告窗口!’);”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。
  倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。
比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout(“function();”,delaytime)”
,而如果想将某一句话设置成一个一个字的出现,
则需要用到循环定时器“setInterval(“function();”,delaytime)” 。

复制代码 代码如下:

复制代码 代码如下:

获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
比如:if (“mid” == document.activeElement.id)
{alert();},”mid”便是表单对应的ID。

$(document).ready(function(){
$(‘#tabs’).tabs({add:addEventHandler});
//给tabs块绑定addEventHandler事件
$(‘#newtabs’).click(addTab);
})
var tabCounter = 1;
function addTab(){
if(tabCounter > 6){
alert(‘tabs can not more than 6!’);
return;
}
$(‘<div id=”new-tab-‘+tabCounter+'”>’+’New
tab’+tabCounter+'</div>’).appendTo(‘#tabs’);
$(‘#tabs’).tabs(“add”,”#new-tab-“+tabCounter,’New tab’+tabCounter);
tabCounter++;
}
function addEventHandler(event,ui){
var li = $(ui.tab).parent();
$(‘<img src=”close.gif”/>’) //关闭按钮
.appendTo(li)
.hover(function(){
var img = $(this);
img.attr(‘src’,’close_hover2.png’);
},
function(){
var img = $(this);
img.attr(‘src’,’close.png’);
}
)
.click(function(){ //关闭按钮,关闭事件绑定
var li = $(ui.tab).parent();
var index = $(‘#tabs li’).index(li.get(0));
$(“#tabs”).tabs(“remove”,index);
tabCounter–;
});
$(ui.tab).dblclick(function(){ //双击关闭事件绑定
var li = $(ui.tab).parent();
var index = $(‘#tabs li’).index(li.get(0));
$(“#tabs”).tabs(“remove”,index);
tabCounter–;
});
}

$.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});

一下略举两例。
例1.表单触发或加载时,逐字输出字符串

您可能感兴趣的文章:

  • jQuery EasyUI API 中文文档 –
    Tabs标签页/选项卡
  • jquery easyui
    结合jsp简单展现table数据示例
  • jquery
    easyui的tabs使用时的问题
  • jQuery EasyUI 中文API
    Layout(Tabs)
  • jquery-easyui关闭tab自动切换到前一个tab
  • jQuery EasyUI Tab
    选项卡问题小结
  • 基于Jquery easyui
    选中特定的tab
  • jQuery
    easyui刷新当前tabs的方法
  • jQuery EasyUI
    布局之动态添加tabs标签页
  • jqueryUI
    tab标签页代码分享

使用:

复制代码 代码如下:

复制代码 代码如下:

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>无标题文档</title>
<script language=”JavaScript” type=”text/javascript”>
var str = “这个是测试用的范例文字”;
var seq = 0;
var second=1000; //间隔时间1秒钟
function scroll() {
msg = str.substring(0, seq+1);
document.getElementById(‘word’).innerHTML = msg;
seq++;
if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload=”setInterval(‘scroll()’,second)”>
<div id=”word”></div><br/><br/>
</body>
</html>

$(“input[type=checkbox]”).check();
$(“input[type=radio]”).uncheck();

例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图