点击文本框显示div

Posted by admin in Other一 8th, 2010 | No Comments

<html> <head> <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>new page</title> <script type="text/javascript" language="javascript"> function crertdiv(_parent,_element,_id,_css){//创建层 var newObj = document.createElement(_element); if(_id && _id!="")newObj.id=_id; if(_css && _css!=""){ newObj.setAttribute("style",_css); newObj.style.cssText = _css; } if(_parent && _parent!=""){ var theObj=getobj(_parent); var parent = theObj.parentNode; if(parent.lastChild == theObj){ theObj.appendChild(newObj); } else{ theObj.insertBefore(newObj, theObj.nextSibling); } } else document.body.appendChild(newObj); } function getobj(o){//获取对象 return document.getElementById(o) } var swtemp=0,objtemp; function showdiv(inputid,inputlist){//显示层 if (swtemp==1){getobj(objtemp+"mydiv").style.display="none";} var text_list=inputlist.split(",") if (!getobj(inputid+"mydiv")){//若尚未创建就建之 var divcss="width:315px;font-size:12px;color:#333;position:absolute;left:"+(getobj(inputid).offsetLeft+0)+"px;top:"+(getobj(inputid).offsetTop+23)+"px;border:1px solid #5baf02" //显示div的边框颜色等css样式 crertdiv("","div",inputid+"mydiv",divcss);//创建层"mydiv" //alert(document.getElementById("mydiv").outerHTML) crertdiv(inputid+"mydiv","ul",inputid+"myul");//创建ul for (var i=0,j=text_list.length;i<j;i++){//创建"text_list"li crertdiv(inputid+"myul","li",inputid+"li"+i,"background:#fff"); getobj(inputid+"li"+i).innerHTML=text_list[i]; } crertdiv(inputid+"myul","li",inputid+"li"+j,"color:#f00;background:#fff;float:right;");//创建"clear"li getobj(inputid+"li"+j).innerHTML="CLOSE"; getobj(inputid+"mydiv").innerHTML +="<style type='text/css'>#"+inputid+"mydiv ul {padding:0px;margin:0;}#"+inputid+"mydiv ul li{list-style-type:none;padding:5px;margin:0;float:left;CURSOR: pointer;}</style>" for (var i=0;i<=j;i++){ getobj(inputid+"li"+i).onmouseover=function(){this.style.background="#eee";clearTimeout(timer)} getobj(inputid+"li"+i).onmouseout=function(){this.style.background="#fff"} } } var newdiv=getobj(inputid+"mydiv") newdiv.onclick=function(){hiddiv(event,inputid);} newdiv.onmouseout=function(){Mout(this)} newdiv.onmouseover=function(){clearTimeout(timer)} getobj(inputid).onmouseout=function(){Mout(newdiv)} newdiv.style.display="block"; swtemp=1; objtemp=inputid; } var timer function Mout(o){ timer=setTimeout(function(){o.style.display="none";},300) swtemp=0; } function hiddiv(e,inputid){ e=e||window.event; ev=e.target||e.srcElement; v=ev.innerText||ev.textContent; if (v!="CLOSE")getobj(inputid).value=v;else getobj(inputid).value="" getobj(inputid+"mydiv").style.display="none"; } </script> <style type="text/css">  </style></head> <body> <br> <br> <br> <br> <script> var list="" for(var i=0;i<9;i++){ list+='028-6558000'+[i]+","; } </script>       <input id="mytext" type="text"onclick="showdiv(this.id,list)"/>     <input id="mytext2" type="text" onClick="showdiv(this.id,list)"/> <br /> <br /> </body> </html>

提示：你可以先修改部分代码再运行。

6个出色的基于JQuery的Tab选项卡实例

Posted by admin in Other一 7th, 2010 | No Comments

今天在修整博客侧栏信息时，利用到了Tab选项卡方式，因为ZBlog封装的是JQuery库，所以很自然地就想到了IdTabs。顺便也找来了不少优秀的Tab选项卡实例，在这里与大家分享一下。当然，最终我没有用到IdTabs以及如下任何一个实例，我只是很不服气的自己写了个小插件，尚不完善，就不于此共享了。先来看看老外们出色的基于JQuery的各式Tab选项卡吧：
1. jQuery 选项卡界面 / 选项卡结构菜单教程
这种类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此演示哟，你一定会喜欢上它的。
演示 | 下载 | 介绍

2. jQuery目录导航插件
这个jQuery插件为我们提供了添加基于字母顺序的导航小部件到有序和无序列表的方法。一个在列表之上的简易的(via CSS)导航条，向用户展示从A到Z的检索。通过从列表中选择一个字母来显示以此字母开头的所有元素。在可选字母上面显示的计数，是表明当你点击此字母的时候会有多少项目被现实。除此之外还有其他的基本功能可供选择。
演示 | 下载 | 介绍

3. jQuery的Kwicks菜单
Kwicks起源于Mootools中的一个效果(相同名字),逐渐演变成一个高度可定制的通用部件.
演示 | 下载 | 介绍

4. jQuery褪色菜单 -更换内容
CSS-tricks上很好的教程，讲解如何使用css和jQuery, 这次是他们教导如何使用 jquery使得菜单选项褪色。
演示 | 下载 | 介绍

5. jQuery idTabs
idTabs是jQuery的插件。他能非常容易的为网站添加选项卡. 但是他也为无穷的可能性敞开大门。
演示 | 下载 | 介绍

6. jQuery + CSS创建顺畅的选显卡内容区
网页设计师设法把大量的信息浓缩在一个网页上而不失可用性是最大的挑战之一。内容选项卡化是处理此类问题非常棒的方法，最近广泛被应用于博客。这是一篇非常棒的教程讲解，使用HTML建立一个小的选项卡信息盒，最后使用一些简单js功能与jQuery库实现。
演示 | 下载 | 介绍