• jQuery实现多浏览器兼容HTML5 placeholder

    大家都知道HTML5里面的input或者textarea里的placeholder吧,可以很轻松的在点击后隐藏提示文字,但是IE老版本的因为不支持HTML5所以必定无法用,啊啊啊!!!可是这个需求真的是很普遍,工作中已经遇到过好多次这样的了,为了以后偷懒今天下班搞了个通用的代码吧~~

    先说说思路吧:

    1. 用CSS将文本框(这里叫他 #ipt)和提示文字(这里叫他 #tips)这两个元素定位到一起,上下重叠,具体的实现方法我目前所知有a和b两种,a方法是将#ipt覆盖到#tips上,给#ipt设置透明度,b方法是将#tips覆盖到#ipt上。
    2. 在点击#tips或#ipt获得焦点时将#tips隐藏 / 修改#ipt透明度 / 将#tips移到到不影响#ipt输入的位置,对于方法a可以:将#tips隐藏 / 修改#ipt透明度,对于b可以将#tips隐藏 / 将#tips移到到不影响#ipt输入的位置。
    3. 在#ipt失去焦点时判断其值是否在trim后为空(可根据需要调整)来将#tips显示出。
    4. 在页面加载时同样需要判断#ipt是否在trim后为空(可根据需要调整),以防#ipt和#tips同时显示。
  • jQuery Tab选项卡特效代码

    目前Tab选项卡效果已经是遍地开花了,前一段在家闲着没事也鼓捣了个,话不多说,上代码,效果可看此jQuery Tab选项卡Demo页面

    <div class="tab">
    <ul class="clearfix">
    	<li class="current"><a href="#">标签1</a></li>
    	<li><a href="#">标签2</a></li>
    	<li><a href="#">标签3</a></li>
    </ul>
    <div class="current">
     <img src="images/upload/1.jpg" alt="1.jpg" /></div>
    <div>
     <img src="images/upload/2.jpg" alt="2.jpg" /></div>
    <div>
     <img src="images/upload/3.jpg" alt="3.jpg" /></div>
    </div>
    

     

    function zvTab(){
    	var timeoutid;
    	$(".tab ul li").each(function(index){
    		$(this).mouseover(function(){
    			var t = $(this);
    			timeoutid = setTimeout(function(){
    				$(".tab ul li.current").removeClass("current");
    				t.addClass("current");
    				$(".tab div.current").removeClass("current");
    				$(".tab div").eq(index).addClass("current");
    			},300);
    		}).mouseout(function(){
    			clearTimeout(timeoutid);
    		});
    	});
    
    }
    

    当然,这段JS代码要在JQ库被引入后且被执行才可用。

    .tab ul li {float:left;background:#CCC;margin-right:2px;border-bottom:2px solid #DDD;}
    .tab ul li.current{background:#AAA;border-bottom:2px solid #AAA;}
    .tab ul li a{color:#000;display:block;padding:5px 10px;}
    .tab ul li.current a{color:#fff;display:block;padding:5px 10px;}
    .tab div{display:none;}
    .tab div.current{display:block;background:#AAA;color:#fff;padding:5px;margin-bottom:10px;}
    
  • JQuery学习之JQ下拉菜单

    JQuery相信大家都接触过了,不过我这个JS菜鸟最近才开始学习。

    以前一直要搞个下拉菜单,现在学了点JQ,发现也挺简单的,上代码!(Demo页面)

    HTML代码

    <ul id="nav-categories">
    	<li><a href="../">首页</a>
    	</li>
    	<li>
    		<a href="#">链接</a>
    		<ul>
    			<li><a href="#">aaa</a></li>
    			<li><a href="#">bbb</a></li>
    			<li><a href="#">ccc</a></li>
    			<li><a href="#">ddd</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">相册</a>
    		<ul>
    			<li><a href="#">11</a></li>
    			<li><a href="#">22</a></li>
    			<li><a href="#">33</a></li>
    			<li><a href="#">44</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">博客</a>
    		<ul>
    			<li><a href="#">AA</a></li>
    			<li><a href="#">BB</a></li>
    			<li><a href="#">CC</a></li>
    			<li><a href="#">DD</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">关于</a>
    	</li>
    </ul>
    

    JQuery代码

    //两个参数,一个导航ul标签的id,一个是下拉菜单的显示速度,越小越快
    function zvMenu(ulElementId,speed){
    	//JQ一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。
    	$("#"+ulElementId).children("li:has(ul)").hover(
    		function(){
    			$(this).find("ul>li:last").addClass("li-last-s1");//给每个下拉菜单的最后一个li元素添加css样式,此处非必要
    			$(this).children("ul").slideDown(speed);//JQ的slideDown方法,显示下拉菜单
    		},
    		function(){
    			$(this).children("ul").hide();//隐藏下拉菜单
    		}
    	);
    	//JQ动画,可选
    	$("#"+ulElementId).find("li>ul>li>a").hover(
    		function(){
    			$(this).animate({paddingLeft:"30px"},speed);
    		},
    		function(){
    			$(this).animate({paddingLeft:"20px"},speed);
    		}
    	);
    
    }
    

    CSS代码

    #nav-categories{float:left;font-size:18px;height:50px;line-height:50px;}
    #nav-categories li{float:left;padding:0 20px 0 20px;background:#444;position:relative;}
    #nav-categories li ul{display:none;background:#444;color:#fff;position:absolute;left:0;top:50px;width:120px;border:1px solid #990;border-top:none;}
    #nav-categories li a{color:#FFF;}
    #nav-categories li a:hover{color:#9C0;}
    #nav-categories li ul li{height:40px;line-height:30px;background:#444;width:116px;padding:0;margin:0;border:2px solid #9C0;border-top:none;border-bottom:none;}
    #nav-categories li ul li.li-last-s1{border-bottom:2px solid #9C0;}
    #nav-categories li ul li a{display:block;padding:5px 5px 5px 20px;zoom:1;}
    #nav-categories li ul li a:hover{background:#575855;}