您正在查看 "Javascript" 分类下的文章
2008-09-05 09:32
function proDownImage(ImgD,imgheight,imgwidth){
var proMaxHeight=imgheight;
var proMaxWidth =imgwidth;
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate <= 1){
ImgD.width = image.width*rate;
ImgD.height =image.height*rate;
}
else {
ImgD.width = image.width;
ImgD.height =image.height;
}
}
}
使用<img src="xxx.jpg" onload="proDownImage(this,100,100)"/> |
2008-09-02 10:59
般情况下,访问或设置剪贴板,IE 只需使用 window.clipboardData 的 getData 或 setData 方法即可。Mozilla 家族的浏览器(如 Firefox)则比较麻烦,不仅开发者需要写一沱代码,用户也需要主动配合(就是需要设置允许访问剪贴板)才可以(参考 Using the Clipboard),以致几不可用。至于 Opera 则根本不提供剪贴板,Safari 可以在 onpaste 等非Dom 事件中访问剪贴板(参考 Using the Pasteboard From JavaScript)。
中国特色的网站上有一个很中国特色的应用就是,在一个输入框 focus 时自动帮你把内容复制到了剪贴板中。老实说访问剪贴板是个不安全的操作,因此即使是 IE, Windows 在后来的升级中都加入是否允许访问剪贴板的提醒。如果能够做到跨浏览器的“邪恶地悄无声息”地实现中国特色的剪贴板应用,确实是个不小的挑战。
遗憾的是老外在 2006 年就帮我们做到了:使用 Flash。参考 Clipboard Copy. 原版没有考虑不安转或禁止 Flash 的情况,我做了一个小改进:
function copy(inElement) {
var get = function(id){
return document.getElementById(id);
},
elId = 'flashcopier',
embedId = 'flashembed';
if(!get(elId)) {
var divholder = Document.createElement('div');
divholder.setAttribute('id', elId);
document.body.appendChild(divholder);
}
var divholder = get(elId);
divholder.innerHTML = '<embed src="http://static.hainei.com/swf/cp.swf"\
FlashVars="clipboard='+encodeURIComponent(inElement.value)+'"\
width="0" height="0" type="application/x-shockwave-flash"\
id="'+embedId+'"></embed>';
// 检测是否安装了 Flash
var flashObj = window[embedId] || document[embedId] || {};
if (!flashObj.SetVariable){// 没有 flash
try {
return window.clipboardData.setData("Text", inElement.value);
}
catch(ex){
return false;
}
}
return true;
}
|
2008-09-02 02:31
今天调试一个验证的东西发现在firefox下面一切正常,切换到IE6经常出现
return 语句不能呢个在函数之外的错误提示,检查了脚本没有任何问题啊?
然后想到了编码,原来是编码的问题
于是在vs2005里面选择另存为,然后在保存对话框里面‘保存’按钮旁的下来选择‘编码保存’
然后选择 utf-8(无签名)
ok run 成功,真是折腾我很长时间了。看来以后还不能只是用firefox调试脚本呢。 |
2008-05-15 15:17

经过测试于IE7,Firefox2 成功显示,IE6暂时还没有看呢。
不清楚Easy Tabs的可以参考最方便的滑动切换Tab--EasyTab
下载文件:EasyTabs1_2.zip (9.9 Kb)
访问网站:Easy Tabs 1.2
下载后解压缩得到EasyTabs1_2目录,下面有nice_structure的目录。
打开nice_structure目录下面有三个文件 easytabs.js,menu.css,example_one_menu.html。其中要修改的就是menu.css,example_one_menu.html
另外还需要下载 http://img5.cn.msn.com/images/msfp_015.gif msn站点的一个背景图片
打开menu.css 定义为如下
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
/*Example for a Menu Style*/
.clr{clear:both;height:0px;overflow:hidden;visibility:hidden;}
.area{border:1px solid #ace;float:left;height:251px;text-align:center;width:323px;}
.menu ul li{background:#EBF3FB;border:1px solid #ace;border-left:none;border-top:none;color:#07519A;cursor:pointer;display:block;float:left;height:25px;line-height:25px;text-align:center;text-decoration:none;width:80px;background:url(msfp_015.gif) repeat-x;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li a {text-decoration:none;color:#07519A;}
.menu li a.tabactive {background-color:#fff; font-weight:normal; position:relative;height:26px;line-height:25px;width:80px;display:block;color:#666;text-decoration:underline;font-size:12px;}
#tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4 {margin:8px 0px 6px 8px;text-align:left;}
打开example_one_menu.html为最后的一个<li>添加为<li style="border-right:none">
我个人修改后的文件为
<!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=iso-8859-1" />
<title>Easy Tabs 1.2 - presented by Kollermedia.at</title>
<link href="menu.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" language="javascript" src="easytabs.js"></script>
</head>
<body>
<h2>Easy Tabs 1.2 - Example with 1 changing Menu (css and js in external files)</h2>
<div class="area">
<!--Start of the Tabmenu1 -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;" title="" id="tablink1">Tab 1</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;" title="" id="tablink2">Tab 2 </a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;" title="" id="tablink3">Tab 3 </a></li>
<li style="border-right:none;"><a href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;" title="" id="tablink4">Tab 4 </a></li>
</ul>
</div>
<!--End of the Tabmenu1 -->
<div class="clr"></div>
<!--Start Tabcontent 1 -->
<div id="tabcontent1">Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent 1Tabcontent </div>
<!--End Tabcontent 1-->
<!--Start Tabcontent 2-->
<div id="tabcontent2">Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2Tabcontent 2</div>
<!--End Tabcontent 2 -->
<!--Start Tabcontent 3-->
<div id="tabcontent3">Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3Tabcontent 3</div>
<!--End Tabcontent 3-->
<!--Start Tabcontent 4-->
<div id="tabcontent4">Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4Tabcontent 4</div>
<!--End Tabcontent 4-->
</div>
</body>
</html> |
2008-05-09 16:43
一个今天是多少日期的JS
预览效果:2008年5月9日 星期五 农历戊子年 四月初五
js 文件如下:today.js
function RunGLNL(){
var today=new Date();
var d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var DDDD=(today.getYear()<100 ? today.getYear()+1900:today.getYear())+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日";
DDDD = DDDD + " " + d[today.getDay()];
DDDD = DDDD+ " " + (CnDateofDateStr(today));
//DDDD = DDDD+ " " + SolarTerm(today);
document.write(DDDD);
}
function DaysNumberofDate(DateGL){
return parseInt((Date.parse(DateGL)-Date.parse(DateGL.getYear()+"/1/1"))/86400000)+1;
}
function CnDateofDate(DateGL){
var CnData=new Array(
0x16,0x2a,0xda,0x00,0x83,0x49,0xb6,0x05,0x0e,0x64,0xbb,0x00,0x19,0xb2,0x5b,0x00,
0x87,0x6a,0x57,0x04,0x12,0x75,0x2b,0x00,0x1d,0xb6,0x95,0x00,0x8a,0xad,0x55,0x02,
0x15,0x55,0xaa,0x00,0x82,0x55,0x6c,0x07,0x0d,0xc9,0x76,0x00,0x17,0x64,0xb7,0x00,
0x86,0xe4,0xae,0x05,0x11,0xea,0x56,0x00,0x1b,0x6d,0x2a,0x00,0x88,0x5a,0xaa,0x04,
0x14,0xad,0x55,0x00,0x81,0xaa,0xd5,0x09,0x0b,0x52,0xea,0x00,0x16,0xa9,0x6d,0x00,
0x84,0xa9,0x5d,0x06,0x0f,0xd4,0xae,0x00,0x1a,0xea,0x4d,0x00,0x87,0xba,0x55,0x04
);
var CnMonth=new Array();
var CnMonthDays=new Array();
var CnBeginDay;
var LeapMonth;
var Bytes=new Array();
var I;
var CnMonthData;
var DaysCount;
var CnDaysCount;
var ResultMonth;
var ResultDay;
var yyyy=DateGL.getYear();
var mm=DateGL.getMonth()+1;
var dd=DateGL.getDate();
if(yyyy<100) yyyy+=1900;
if ((yyyy < 1997) || (yyyy > 2020)){
return 0;
}
Bytes[0] = CnData[(yyyy - 1997) * 4];
Bytes[1] = CnData[(yyyy - 1997) * 4 + 1];
Bytes[2] = CnData[(yyyy - 1997) * 4 + 2];
Bytes[3] = CnData[(yyyy - 1997) * 4 + 3];
if ((Bytes[0] & 0x80) != 0) {CnMonth[0] = 12;}
else {CnMonth[0] = 11;}
CnBeginDay = (Bytes[0] & 0x7f);
CnMonthData = Bytes[1];
CnMonthData = CnMonthData << 8;
CnMonthData = CnMonthData | Bytes[2];
LeapMonth = Bytes[3];
for (I=15;I>=0;I--){
CnMonthDays[15 - I] = 29;
if (((1 << I) & CnMonthData) != 0 ){
CnMonthDays[15 - I]++;}
if (CnMonth[15 - I] == LeapMonth ){
CnMonth[15 - I + 1] = - LeapMonth;}
else{
if (CnMonth[15 - I] < 0 ){CnMonth[15 - I + 1] = - CnMonth[15 - I] + 1;}
else {CnMonth[15 - I + 1] = CnMonth[15 - I] + 1;}
if (CnMonth[15 - I + 1] > 12 ){ CnMonth[15 - I + 1] = 1;}
}
}
DaysCount = DaysNumberofDate(DateGL) - 1;
if (DaysCount <= (CnMonthDays[0] - CnBeginDay)){
if ((yyyy > 1901) && (CnDateofDate(new Date((yyyy - 1)+"/12/31")) < 0)){
ResultMonth = - CnMonth[0];}
else {ResultMonth = CnMonth[0];}
ResultDay = CnBeginDay + DaysCount;
}
else{
CnDaysCount = CnMonthDays[0] - CnBeginDay;
I = 1;
while ((CnDaysCount < DaysCount) && (CnDaysCount + CnMonthDays[I] < DaysCount)){
CnDaysCount+= CnMonthDays[I];
I++;
}
ResultMonth = CnMonth[I];
ResultDay = DaysCount - CnDaysCount;
}
if (ResultMonth > 0){
return ResultMonth * 100 + ResultDay;}
else{return ResultMonth * 100 - ResultDay;}
}
function CnYearofDate(DateGL){
var YYYY=DateGL.getYear();
var MM=DateGL.getMonth()+1;
var CnMM=parseInt(Math.abs(CnDateofDate(DateGL))/100);
if(YYYY<100) YYYY+=1900;
if(CnMM>MM) YYYY--;
YYYY-=1864;
return CnEra(YYYY)+"年";
}
function CnMonthofDate(DateGL){
var CnMonthStr=new Array("零","正","二","三","四","五","六","七","八","九","十","冬","腊");
var Month;
Month = parseInt(CnDateofDate(DateGL)/100);
if (Month < 0){return "闰" + CnMonthStr[-Month] + "月";}
else{return CnMonthStr[Month] + "月";}
}
function CnDayofDate(DateGL){
var CnDayStr=new Array("零",
"初一", "初二", "初三", "初四", "初五",
"初六", "初七", "初八", "初九", "初十",
"十一", "十二", "十三", "十四", "十五",
"十六", "十七", "十八", "十九", "二十",
"廿一", "廿二", "廿三", "廿四", "廿五",
"廿六", "廿七", "廿八", "廿九", "三十");
var Day;
Day = (Math.abs(CnDateofDate(DateGL)))%100;
return CnDayStr[Day];
}
function DaysNumberofMonth(DateGL){
var MM1=DateGL.getYear();
MM1<100 ? MM1+=1900:MM1;
var MM2=MM1;
MM1+="/"+(DateGL.getMonth()+1);
MM2+="/"+(DateGL.getMonth()+2);
MM1+="/1";
MM2+="/1";
return parseInt((Date.parse(MM2)-Date.parse(MM1))/86400000);
}
function CnEra(YYYY){
var Tiangan=new Array("甲","乙","丙","丁","戊","己","庚","辛","壬","癸");
//var Dizhi=new Array("子(鼠)","丑(牛)","寅(虎)","卯(兔)","辰(龙)","巳(蛇)",
//"午(马)","未(羊)","申(猴)","酉(鸡)","戌(狗)","亥(猪)");
var Dizhi=new Array("子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥");
return Tiangan[YYYY%10]+Dizhi[YYYY%12];
}
function CnDateofDateStr(DateGL){
if(CnMonthofDate(DateGL)=="零月") return " 请调整您的计算机日期!";
else return "农历"+CnYearofDate(DateGL)+ " " + CnMonthofDate(DateGL) + CnDayofDate(DateGL);
}
function SolarTerm(DateGL){
var SolarTermStr=new Array(
"小寒","大寒","立春","雨水","惊蛰","春分",
"清明","谷雨","立夏","小满","芒种","夏至",
"小暑","大暑","立秋","处暑","白露","秋分",
"寒露","霜降","立冬","小雪","大雪","冬至");
var DifferenceInMonth=new Array(
1272060,1275495,1281180,1289445,1299225,1310355,
1321560,1333035,1342770,1350855,1356420,1359045,
1358580,1355055,1348695,1340040,1329630,1318455,
1306935,1297380,1286865,1277730,1274550,1271556);
var DifferenceInYear=31556926;
var BeginTime=new Date(1901/1/1);
BeginTime.setTime(947120460000);
for(;DateGL.getYear()<BeginTime.getYear();){
BeginTime.setTime(BeginTime.getTime()-DifferenceInYear*1000);
}
for(;DateGL.getYear()>BeginTime.getYear();){
BeginTime.setTime(BeginTime.getTime()+DifferenceInYear*1000);
}
for(var M=0;DateGL.getMonth()>BeginTime.getMonth();M++){
BeginTime.setTime(BeginTime.getTime()+DifferenceInMonth[M]*1000);
}
if(DateGL.getDate()>BeginTime.getDate()){
BeginTime.setTime(BeginTime.getTime()+DifferenceInMonth[M]*1000);
M++;
}
if(DateGL.getDate()>BeginTime.getDate()){
BeginTime.setTime(BeginTime.getTime()+DifferenceInMonth[M]*1000);
M==23?M=0:M++;
}
var JQ;
if(DateGL.getDate()==BeginTime.getDate()){
JQ=" 今天是<font color='#FF9999'><b>"+SolarTermStr[M] + "</b></font>";
}
else if(DateGL.getDate()==BeginTime.getDate()-1){
JQ=" 明天是<font color='#FF9999'><b>"+SolarTermStr[M] + "</b></font>";
}
else if(DateGL.getDate()==BeginTime.getDate()-2){
JQ=" 后天是<font color='#FF9999'><b>"+SolarTermStr[M] + "</b></font>";
}
else{
JQ=" "
if(DateGL.getMonth()==BeginTime.getMonth()){
JQ+=" 本月";
}
else{
JQ+=" 下月";
}
JQ+=BeginTime.getDate()+"日"+"<font color='#FF9999'><b>"+SolarTermStr[M]+"</b></font>";
}
return JQ;
}
function CAL()
{}
RunGLNL();
function CurentTime(){
var now = new Date();
var hh = now.getHours();
var mm = now.getMinutes();
var ss = now.getTime() % 60000;
ss = (ss - (ss % 1000)) / 1000;
var clock = hh+':';
if (mm < 10) clock += '0';
clock += mm+':';
if (ss < 10) clock += '0';
clock += ss;
return(clock);
}
使用的时候保存改js,然后在需要显示日期的地方使用下面的语句(请自己修改地址)
<script type="text/javascript" language="javascript" src="js/v1/today.js"></script>
注释:如果你用ASP.NET来书写,那么可以参考我以前的文章asp.net2.0 C#关于农历转换的一个类 |
2008-05-03 01:17
<SCRIPT language=javascript>
<!--
function go(formname)
{
var url = " http://www.baidu.com/baidu";
formname.method = "get";
if (formname.myselectvalue.value == "1") {
document.search_form1.word.value = document.search_form1.word.value+" site:xxxxx.com";
}
formname.action = url;
return true;
}
//-->
</SCRIPT>
<form name="search_form1" target="_blank" onsubmit="return go(this)">
<input name=word size="30" value="请输入关键字" onMouseOver="this.focus()" onBlur="if (value ==''){value='请输入关键字'}" onFocus="this.select()" onClick="if(this.value=='请输入关键字')this.value=''">
<input type="submit" value="搜索"><br>
<INPUT name=myselectvalue type=hidden value=0>
<INPUT name=tn type=hidden value="sayyes">
<INPUT name=cl type=hidden value="3">
<INPUT CHECKED name=myselect onclick=javascript:this.form.myselectvalue.value=0; type=radio value=0>
<FONT color=#0000cc style="FONT-SIZE: 12px">互联网
<INPUT name=myselect onclick=javascript:this.form.myselectvalue.value=1; type=radio value=1>
<FONT color=#ff0000 style="FONT-SIZE: 12px">站内
</form> |
2008-05-02 22:15
一般来说,我们在写博客或做网站时都需要对插图做一些效果,比如增加阴影、图片圆角、倒映等等。这些效果一般可以用3个方法实现,一是用PS实现对图片进行修改,二是使用CSS,三是使用JavaScript。使用PS会破坏原图,而且要花费一定的时间。Netzgesta上有很多实现图片特效的JavaScript提供下载,很多效果都是相当漂亮的。
1、水倒映

这个js将为图片添加水倒映的特效,时下web2.0站点很喜欢这种效果。
如果你喜欢在线生成水倒映效果,可以参考这里。
js下载链接
2、圆角+阴影

或许你记得用RoundPic能在线生成圆角图片,事实上用这个js也可以实现效果。
js下载链接
3、高光圆角阴影

这个效果可以用来做按钮。是我最喜欢的特效之一。
js下载链接
4、斜光阴影效果

和上面的效果看起来非常相似,但也有不同的地方。
js下载链接
5、相框效果

如果你在做图片博客,可以你会喜欢这个js,使用后博客文章内的图片都有相框的效果。
js下载链接
6、黑色相框

不喜欢白色没有立体感的相框,那试试这个立体感充足的js效果吧。
js下载链接
7、放大镜

一个很有趣的js,实现放大镜效果。记得在去年Google开发者日的时候,某个主讲人也有说到在GMaps里实现放大镜的有趣效果。具体效果点击这里。
js下载链接
8、菲林效果

如果你在写一个电影博客,这个效果或许会让你喜欢。
js下载链接
9、花边效果

很简单的图片花边效果。
js下载链接
10、翻页效果

翻页效果是很常见的,Google一下你会发现有很多相关的教程,如果你不想花时间去学,直接下载这个js吧。
js下载链接
安装使用方法:
将下载的压缩包解压之后上传到网站空间,然后在需要显示效果的head里添加代码,比如高光阴影效果Glossy,添加的代码是:
<script type="text/javascript" src="glossy.js"></script>
对于Wordpress,可以在header.php里添加。如果只要求文章页里出现效果,也可以考虑在single.php里添加。
然后,在想要显示特效的图片的<img>标记里添加:
class="glossy"
这样效果就出现了。
其它效果添加方法类似。 |
2008-04-12 00:29
首先来个最简单的理解
|
eval可以将字符串生成语句执行,和SQL的exec()类似。
eval的使用场合是什么呢?有时候我们预先不知道要执行什么语句,只有当条件和参数给时才知道执行什么语句,这时候eval就派上用场了。举个例子:
我们要做一个function(),功能是输入网页中两个个对象的名称,然后程序就将这两个对象的值联接起来输出。
function output(a,b)
{
var tmpa,tmpb;
tmpa=document.all.a.value;
tmpb=document.all.b.value;
document.write(tmpa+tmpb);
}
output('input1','input2');
|
这样你执行的时候就会提示错误“document.all.a不是对象”以及“document.all.b不是对象”。原来javascript把a和b当成对象名称了,怎样能让javascript把a里面的值作为对象名称呢?这时候就要用eval了,把代码改成这样:
function output(a,b)
{
var tmpa,tmpb;
tmpa=eval("document.all."+a+".value");
tmpb=eval("document.all."+b+".value");
document.write(tmpa+tmpb);
}
output('input1','input2');
这样javascript就会先取出a,b的值,然后和前面的document.all.以及后面的.value组合运行,于是就可以
顺利取出input1和input2的值. |
看完上面的基本理解eval是什么含义了吧
然后看下面的理解
稍微晋级一点点,用到了DOM中替换图片的例子
在Javascript中Eval函数的使用?
【eval()函数】
来源:http://blog.csdn.net/ianc/archive/2006/05/29/761094.aspx
JavaScript有许多小窍门来使编程更加容易。
其中之一就是eval()函数,这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。
举个小例子:
var the_unevaled_answer = "2 + 3";
var the_evaled_answer = eval("2 + 3");
alert("the un-evaled answer is " + the_unevaled_answer + " and the evaled answer is " + the_evaled_answer);
如果你运行这段eval程序, 你将会看到在JavaScript里字符串"2 + 3"实际上被执行了。
所以当你把the_evaled_answer的值设成 eval("2 + 3")时, JavaScript将会明白并把2和3的和返回给the_evaled_answer。
这个看起来似乎有点傻,其实可以做出很有趣的事。比如使用eval你可以根据用户的输入直接创建函数。
这可以使程序根据时间或用户输入的不同而使程序本身发生变化,通过举一反三,你可以获得惊人的效果。
在实际中,eval很少被用到,但也许你见过有人使用eval来获取难以索引的对象。
文档对象模型(DOM)的问题之一是:有时你要获取你要求的对象简直就是痛苦。
例如,这里有一个函数询问用户要变换哪个图象:变换哪个图象你可以用下面这个函数:
function swapOne()
{
var the_image = prompt("change parrot or cheese","");
var the_image_object;
if (the_image == "parrot")
{
the_image_object = window.document.parrot;
}
else
{
the_image_object = window.document.cheese;
}
the_image_object.src = "ant.gif";
}
连同这些image标记:
[img src="/stuff3a/parrot.gif" name="parrot"]
[img src="/stuff3a/cheese.gif" name="cheese"]
请注意象这样的几行语句:
the_image_object = window.document.parrot;
它把一个图象对象敷给了一个变量。虽然看起来有点儿奇怪,它在语法上却毫无问题。
但当你有100个而不是两个图象时怎么办?你只好写上一大堆的 if-then-else语句,要是能象这样就好了:
function swapTwo()
{
var the_image = prompt("change parrot or cheese","");
window.document.the_image.src = "ant.gif";
}
不幸的是, JavaScript将会寻找名字叫 the_image而不是你所希望的"cheese"或者"parrot"的图象,
于是你得到了错误信息:”没听说过一个名为the_image的对象”。
还好,eval能够帮你得到你想要的对象。
function simpleSwap()
{
var the_image = prompt("change parrot or cheese","");
var the_image_name = "window.document." + the_image;
var the_image_object = eval(the_image_name);
the_image_object.src = "ant.gif";
}
如果用户在提示框里填入"parrot",在第二行里创建了一个字符串即window.document.parrot. 然后包含了eval的第三
行意思是: "给我对象window.document.parrot" - 也就是你要的那个图象对象。一旦你获取了这个图象对象,你可以把
它的src属性设为ant.gif. 有点害怕?用不着。其实这相当有用,人们也经常使用它。
我们常常在Javascript中间到Eval这个函数,
有些人觉得这个函数很奇怪,可以把一些字符串变的功能很强大
在我们需要将普通的字符串转变成具体的对象的时候,就会用到这个函数
eval 函数对作为数字表达式的一个字符串进行求值,其语法为:
eval(expr)
此处 expr 是一个被求值的字符串参数。如果该字符串是一个表达式,eval 求该表达式的值;如果该参数代表一个或多个 JavaScript 语句,那么 eval 执行这些语句。eval 函数可以用来把一个日期从一种格式(总是字符串)转换为数值表达式或数字。
==============================
Eval 函数
功能:先解释Javascript代码,然后在执行它
用法:Eval(codeString)
codeString是包含有Javascript语句的字符串,在eval之后使用Javascript引擎编译。
注释:
例子:eval(id + "_icon.src="/imgs/collapse_up.gif'");
id是之前设定的参数,而在双引号中的字符串则是需要编译的
引用:
--------------------------------------------------------------------------------
function tophide(id) //id indicates menu
{
if (top.topframeset.rows == "31,*")
{
top.topframeset.rows = "86,*";
eval(id + "_icon.src="/imgs/collapse_up.gif'");
eval(id + "_icon.alt='Collapse The Head'");
head.style.display = "block"
}
else
{
top.topframeset.rows = "31,*";
eval(id + "_icon.src="/imgs/collapse_down.gif'");
eval(id + "_icon.alt='Expand The Head'");
head.style.display = "none"
}
}
如果还是不明白深入认识javascript中的eval函数
来源:http://www.x2blog.cn/supnate/#sid.1735/page.1/
发现为本文起一个合适的标题还不是那么容易,呵呵,所以在此先说明下本文的两个目的:
(1)介绍javascript中的eval函数的用法
(2)如何在函数内执行全局代码
►先来说eval的用法,内容比较简单,熟悉的可以跳过。
eval函数接收一个参数s,如果s不是字符串,则直接返回s。否则执行s语句。如果s语句执行结果是一个值,则返回此值,否则返回undefined。
需要特别注意的是对象声明语法“{}”并不能返回一个值,需要用括号括起来才会返回值,简单示例如下:
var code1='"a" + 2'; //表达式
var code2='{a:2}'; //语句
alert(eval(code1)); //->'a2'
alert(eval(code2)); //->undefined
alert(eval('(' + code2 + ')')); //->[object Object]
可以看到,对于对象声明语句来说,仅仅是执行,并不能返回值。为了返回常用的“{}”这样的对象声明语句,必须用括号括住,以将其转换为表达式,才能返回其值。这也是使用JSON来进行Ajax开发的基本原理之一。在例子中可以清楚的看到,第二个alert语句输出的是undefined,而第三个加了括号后输出的是语句表示的对象。
►现在来说本文的重点,如何在函数内执行全局代码。为了说明这个问题,先看一个例子:
var s='global'; //定义一个全局变量
function demo1(){
eval('var s="local"');
}
demo1();
alert(s); //->global
很好理解,上面的demo1函数等价于:function demo1(){var s='local';},其中定义了一个局部变量s。
所以最后的输出是global并不是什么奇怪的事情,毕竟大家都能很清楚的区分局部变量和全局变量。
仔细体会一下,可以发现eval函数的特点,它总是在调用它的上下文变量空间(也称为:包,closure)内执行,无论是变量定义还是函数定义都是如此,所以如下的代码会产生函数未定义的错误:
var s='function test(){return 1;}'; //一个函数定义语句
function demo2(){
eval(s);
}
demo2();
alert(test()); //->error:test is not defined
这是因为test函数在局部空间定义,demo2函数内可以访问到,外面就访问不到了。
而在实际的Ajax开发中,有时我们需要从服务器动态获取代码来执行,以减轻一次载入代码过多的问题,或者是一些代码是通过Javascript自身生成的,希望用eval函数来使其执行。
但这样的动态获取代码的工作一般在函数内完成,比如:
function loadCode(){
var code=getCode();
eval(code);
}
可见eval不可能在全局空间内执行,这就给开发带来了不少问题,也看到过很多人为此郁闷。
不过现在偶终于找到了解决办法,嘿嘿,可以同时兼容IE和Firefox,方法如下:
var X2={} //my namespace:)
X2.Eval=function(code){
if(!!(window.attachEvent && !window.opera)){
//ie
execScript(code);
}else{
//not ie
window.eval(code);
}
}
现在如果要想在函数内定义全局代码,就可以通过调用X2.Eval(code)方法,一个例子如下:
var s='global';
function demo3(){
X2.Eval('var s="local"');
}
demo3();
alert(s); //->'local'
可见,在demo3函数内重新定义了全局变量s="local"。
需要注意的是X2.Eval并不返回值,如果要进行表达式的求值,还是用系统的eval函数。X2.Eval设计为仅做全局代码定义用。
其实看到这里,或许有人感觉问题也太容易解决了点,呵呵,但发现这个办法倒是需要些运气和技巧的:
(1)对于IE浏览器,默认已经提供了这样的函数:execScript,用于在全局空间执行代码,只是知道的人还不多。
(2)对于Firefox浏览器,直接调用eval函数,则在调用者的空间执行;如果调用window.eval则在全局空间执行。这个知道的人估计就更少了。毕竟alert(eval==window.eval)返回true!
Firefox的eval函数的特点的确是很令人奇怪的,但从javascript规范中倒也能找到其来源:
If value of the eval property is used in any way other than a direct call (that is, other than by the explicit use of its
name as an Identifier which is the MemberExpression in a CallExpression), or if the eval property is assigned to,
an EvalError exception may be thrown.
意思大概就是说eval函数的执行是和调用者相关的,但并没有说其执行上下文的问题。所以IE和Firefox孰是孰非也就很难说了,大家知道解决办法就好。
|
|
2008-03-11 12:52
因为很多地方要用到日期datePicker 系列样子的日期控件
也曾经使用过梅花雨日历空间,同时自己也修改过Discuz的日期控件不过发现或多或少不能太满足自己的需求
偶然看到而论My97 DatePicker感觉用了下相当的不错
http://www.my97.net/dp/demo/ |
2008-02-29 19:13
一、页面加载控件:
<object id="factory" style="display:none" viewastext classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="http://www.meadroid.com/scriptx/ScriptX.cab#Version=5,60,0,360"></object>
控件使用教本:
<script defer>
function SetPrintSettings() {
// -- advanced features ,未曾使用过,有待确认。
factory.printing.SetMarginMeasure(2) // measure margins in inches
factory.SetPageRange(false, 1, 3) // need pages from 1 to 3
factory.printing.printer = "HP DeskJet 870C"
factory.printing.copies = 2
factory.printing.collate = true
factory.printing.paperSize = "A4"
factory.printing.paperSource = "Manual feed"
// -- basic features 使用过
factory.printing.header = "This is MeadCo"
factory.printing.footer = "Advanced Printing by ScriptX"
factory.printing.portrait = false //方向,true
factory.printing.leftMargin = 1.0
factory.printing.topMargin = 1.0
factory.printing.rightMargin = 1.0
factory.printing.bottomMargin = 1.0
factory.printing.Print(false) //直接打印,true ,好像不起作用,总是弹出选择打印机窗口
factory.printing.PageSetup() //打印设置
factory.printing.Preview() //打印预览
}
</script>
二、页面加载控件:
OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=0></OBJECT>
控件使用教本:
<script language="javascript">
function printsetup()
{
// 打印页面设置
wb.execwb(8,1);
}
function printpreview()
{
// 打印页面预览
wb.execwb(7,1);
}
function printit()
{
if (confirm('确定打印吗?'))
{
wb.execwb(6,6)
}
}
</script>
====================================================================
关于这个组件还有其他的用法,列举如下:
WebBrowser.ExecWB(1,1) 打开
Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口
Web.ExecWB(4,1) 保存网页
Web.ExecWB(6,1) 打印
Web.ExecWB(7,1) 打印预览
Web.ExecWB(8,1) 打印页面设置
Web.ExecWB(10,1) 查看页面属性
Web.ExecWB(15,1) 好像是撤销,有待确认
Web.ExecWB(17,1) 全选
Web.ExecWB(22,1) 刷新
Web.ExecWB(45,1) 关闭窗体无提示
三、修改注册表设置IE打印
<script language="JavaScript">
var hkey_root,hkey_path,hkey_key
hkey_root = "HKEY_CURRENT_USER"
hkey_path = "\Software\Microsoft\Internet Explorer\PageSetup" //IE打印设置的注册表地址
//设置修改函数
function pagesetup_null()
{
var RegWsh = CreateObject("WScript.Shell")
hkey_key="\header"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"" //页眉
hkey_key="\footer"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"" //页脚
hkey_key="\margin_left"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"1" //键值设定--左边边界
hkey_key="\margin_top"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"1" //键值设定--上边边界
hkey_key="\margin_right"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"1" //键值设定--右边边界
hkey_key="\margin_bottom"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"1" //键值设定--下边边界
}
//恢复默认设置
function pagesetup_default()
{
var RegWsh = CreateObject("WScript.Shell")
hkey_key="\header"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&w&b页,&p/&P" //页数-
hkey_key="\footer"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&u&b&d" //网址,日期等信息
}
</script>
四、用FileSystem组件实现WEB应用中的本地特定打印
<script Language=JavaScript>
function print_onclick() //打印函数
{
var label
label=document.printinfo.label.value //获得HTML页面的数据
var objfs=CreateObject("Scripting.FileSystemObject") //创建FileSystem组件对象的实例
var objprinter=objfs.CreateTextFile ("LPT1:",true) //建立与打印机的连接
objprinter.Writeline("__________________________________") //输出打印的内容
objprinter.Writeline("| |")
objprinter.Writeline("| 您打印的数据是:"&label& " |”)
objprinter.Writeline("| |")
objprinter.Writeline("|_________________________________|")
objprinter.close //断开与打印机的连接
var objprinter=nothing
var objfs=nothing // 关闭FileSystem组件对象
}
</script>
|
2007-12-08 04:26
/* 自动缩略一些大图的小JS
吕 lvjiyong@Gmail.com
http://www.lvjiyong.com/tag/jquery/
更新:2007.9.22
更新2007.9.28
*/
jQuery.fn.ImageAutoSize = function(width,height)
{
$("img",this).each(function()
{
var image = $(this);
if(image.width()>width)
{
image.width(width);
image.height(width/image.width()*image.height());
}
if(image.height()>height)
{
image.height(height);
image.width(height/image.height()*image.width());
}
});
}
调用:先引用上面的脚本或将上页的脚本放入自己的JS库,然后只要再加 $(function(){ $("图片组所在的容器").ImageAutoSize(限制最大宽,限制最大高);});
|
2007-12-04 23:26
首先是一个比较基本的jQuery中文入门教程,写的浅显易懂..
http://www.k99k.com/jQuery_getting_started.html
另外一个号称15天学会jQuery
http://wiki.jquery.org.cn/doku.php?id=jquery_start
另外有人问了jQuery是什么?呵呵地球人都知道,百度一下吧。
最近一个项目用了ExtJs,感觉ExtJS不知道是否加载的js太多还是如何,运行起来的速度有点那个啥。
所以还是返回jQuery,大部分东西还是自己写比较稳妥一点。!!
“jQuery 是继 prototype 之后又一个优秀的 Javascrīpt 框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。 jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents、events、实现动画效果,并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可。 ”
这里提供了 240 多个jQuey的插件,实在是太多了!如下:
表单验证(Form Validation)
jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV - form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.
文件上载(File upload)
Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.
表单-选取框(Form - Select Box stuff)
jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery - LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).
表单基本,输入框等(Form Basics, Input Fields, Checkboxes etc.)
jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.
时间日期以及颜色选取(Time, Date and Color Picker)
jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.
投票(Rating Plugins)
jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.
搜索(Search Plugins)
jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHP&MySQL).
quick Search jQuery Plugin.
文本编辑(Inline Edit & Editors)
jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable - edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin - Another In-Place Editor.
TableEditor.
tEditable - in place table editing for jQuery.
多媒体(Audio, Video, Flash, SVG, etc)
jMedia - accessible multi-media embedding.
JBEdit - Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.
图象类(Photos/Images/Galleries)
ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery - jqGalViewII.
jQuery - jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs - easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface & Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi - Zoomable Thumbnails.
jQuery Crop - crop any image on the fly.
Image Reflection.
Google Map
jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery & Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps - by Tane Piper.
游戏(Games)
Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).
表格(Tables, Grids etc.)
UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter - awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable - in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.
统计图(Charts, Presentation etc.)
jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.
边框,圆角,背景(Border, Corners, Background)
jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.
文字、链接(Text and Links)
jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad - a text gradient plugin.
LinkLook - a link thumbnail preview.
pager jQuery Plugin.
shortKeys jQuery Plugin.
jQuery Biggerlink.
jQuery Ajax Link Checker.
Tooltips
jQuery Plugin - Tooltip.
jTip - The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.
菜单导航(Menus, Navigations)
jQuery Tabs Plugin - awesome! . [demo nested tabs.]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu - Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.
对齐,幻灯以及折叠(Accordions, Slide and Toggle stuff)
jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion - a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo - Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.
拖拽(Drag and Drop)
UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR - drag, drop resize.
Drag Demos.
XML XSL JSON Feeds
XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier - Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite - multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.
浏览器(Browserstuff)
Wresize - IE Resize event Fix Plugin.
jQuery ifixpng.
jQuery pngFix.
Link Scrubber - removes the dotted line onfocus from links.
jQuery Perciformes - the entire suckerfish familly under one roof.
Background Iframe.
QinIE - for proper display of Q tags in IE.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.
对话框(Alert, Prompt, Confirm Windows)
jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.
CSS
jQuery Style Switcher.
JSS - Javascript StyleSheets.
jQuery Rule - creation/manipulation of CSS Rules.
jPrintArea.
DOM, Ajax and other jQuery plugins
FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata - extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat - periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it - display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy - awesome plugin.
Effect Delay Trick.
jQuick - a quick tag creator for jQuery.
Metaobjects.
elementReady.
FOnte: http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/ |
2007-11-30 00:35
Easy Tabs 是一个与Yahoo!首页使用的Tab Menus相类似的Javascript脚本,适用于内容较多的网站。

主要功能包括:
- 支持IE5.0 +,FireFox 2 +,Opera 9.0 +;
- 即使客户端禁用了Javascript脚本,Easy Tabs包括的内容仍然可以正常显示;
- 可以通过TAB键对Tabs栏目进行导航;
- 可以随意增减Tab数量;
- 可以自定义选择鼠标点击或是移动触发。
使用说明:
Code (javascript)
var autochangemenu = 1;
Code (javascript)
var changespeed = 3;
Code (javascript)
var stoponhover = 0;
下载文件:EasyTabs1_2.zip (9.9 Kb)
看下用法
JS文件内容
<script type="text/javascript">
/*
EASY TABS 1.2 Produced and Copyright by Koller Juergen
www.kollermedia.at | www.austria-media.at
Need Help? http:/www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange
You can use this Script for private and commercial Projects, but just leave the two credit lines, thank you.
*/
//EASY TABS 1.2 - MENU SETTINGS
//Set the id names of your tablinks (without a number at the end)
var tablink_idname = new Array("tablink","anotherlink", "linkthree")
//Set the id names of your tabcontentareas (without a number at the end)
var tabcontent_idname = new Array("tabcontent","anothercontent", "contentthree")
//Set the number of your tabs in each menu
var tabcount = new Array("4","6","3")
//Set the Tabs wich should load at start (In this Example:Menu 1 -> Tab 2 visible on load, Menu 2 -> Tab 5 visible on load , Menu 3 -> Tab 1 visible on load)
var loadtabs = new Array("2","5","1")
//Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0)
var autochangemenu = 2;
//the speed in seconds when the tabs should change
var changespeed = 2;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 1;
//END MENU SETTINGS
/*Swich EasyTabs Functions - no need to edit something here*/
function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;} menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}
window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}
</script>
Html代码部分
<!--Start of the Tabmenu 1 -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;" title="" id="tablink1">Tab 1</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;" title="" id="tablink2">Tab 2 </a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;" title="" id="tablink3">Tab 3 </a></li>
<li><a href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;" title="" id="tablink4">Tab 4 </a>
</li>
</ul>
</div>
<!--End of the Tabmenu 1 -->
<!--Start Tabcontent 1 -->
<div id="tabcontent1">Tabcontent 1</div>
<!--End Tabcontent 1-->
<!--Start Tabcontent 2-->
<div id="tabcontent2">Tabcontent 2</div>
<!--End Tabcontent 2 -->
<!--Start Tabcontent 3-->
<div id="tabcontent3">Tabcontent 3</div>
<!--End Tabcontent 3-->
<!--Start Tabcontent 4-->
<div id="tabcontent4">Tabcontent 4</div>
<!--End Tabcontent 4-->
<br/><br/>
<!--Start of the Tabmenu 2 -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('2', '1');" onfocus="easytabs('2', '1');" onclick="return false;" title="" id="anotherlink1">Tab 1</a></li>
<li><a href="#" onmouseover="easytabs('2', '2');" onfocus="easytabs('2', '2');" onclick="return false;" title="" id="anotherlink2">Tab 2</a></li>
<li><a href="#" onmouseover="easytabs('2', '3');" onfocus="easytabs('2', '3');" onclick="return false;" title="" id="anotherlink3">Tab 3</a></li>
<li><a href="#" onmouseover="easytabs('2', '4');" onfocus="easytabs('2', '4');" onclick="return false;" title="" id="anotherlink4">Tab 4</a></li>
<li><a href="#" onmouseover="easytabs('2', '5');" onfocus="easytabs('2', '5');" onclick="return false;" title="" id="anotherlink5">Tab 5</a></li>
<li><a href="#" onmouseover="easytabs('2', '6');" onfocus="easytabs('2', '6');" onclick="return false;" title="" id="anotherlink6">Tab 6</a></li>
</ul>
</div>
<!--End of the Tabmenu 2 -->
<!--Start Tabcontent 1 -->
<div id="anothercontent1">Tabcontent 1</div>
<!--End Tabcontent 1-->
<!--Start Tabcontent 2-->
<div id="anothercontent2">Tabcontent 2</div>
<!--End Tabcontent 2 -->
<!--Start Tabcontent 3-->
<div id="anothercontent3">Tabcontent 3</div>
<!--End Tabcontent 3-->
<!--Start Tabcontent 4-->
<div id="anothercontent4">Tabcontent 4</div>
<!--End Tabcontent 4-->
<!--Start Tabcontent 5-->
<div id="anothercontent5">Tabcontent 5</div>
<!--End Tabcontent 5-->
<!--Start Tabcontent 6-->
<div id="anothercontent6">Tabcontent 6</div>
<!--End Tabcontent 6-->
以上来自下载包里面包含的例子。看了下真是太简单了。对于轻量级的应用来说此tab,比EXTJS的tab要高效率的多呢。
如果一般的来用,js部分不用写了,直接用下载包内的就可以了。具体的html部分参照官方的html 格式书写。
哦,真是太棒了,这个才是我要找的js tab
|
2007-11-21 00:55
页面上的Tab功能是最常用的,这样可以节省很多版面。而完成这样的Tab功能的Javascript Ajax,有多种选择,其中常用有以下若干种:
demo网址:http://www.nyokiglitter.com/tutorials/tabs.html
3. Perspective–虽然界面做得难看一点,不过上面的Tab是可以自动伸缩的,有个性
Demo地址:http://www.dhtmlgoodies.com/scripts/tab-view/tab-view-demo2.html
下载地址:http://www.dhtmlgoodies.com/index.html?whichScript=tab-view
http://actsasflinn.com/Ajax_Tabs/index.html
http://blog.cutterscrossing.com/index.cfm/2007/6/15/Updated-JQuery-Nested-Tab-Set-with-Demo
参考:http://tutorialblog.org/10-javascript-ajax-tabs/ |
|