• 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同时显示。

    [阅读全文…]

  • 独立网站启用Chrome插件内联安装教程

    关于Chrome插件想必用Chrome浏览器的童鞋都很清楚,不过这标题写的说实话有点让人晕,要解释清楚标题,首先要了解一下Chrome插件的安装机制。

    Chrome插件安装机制

    目前据我的了解,你可以用这3种方法安装Chrome插件

    1. 在Chrome Web Store查找插件或者是打开某一个插件在Chrome Web Store上的链接,点击安装即可,这是最常用最通用的方法
    2. 获得扩展名为crx的插件 > 打开Chrome浏览器的扩展程序页面 > 将获得的文件直接拖拽至上一步所述页面 > 安装
    3. 拥有插件的zip压缩包 > 解压文件 > 打开Chrome浏览器的扩展程序页面 >启用开发者模式 > 点击“加载正在开发的扩展程序”并选择刚才解压出来的文件目录

    然而本文所介绍的插件安装方法并不属于上述任意一种,这就是下面要说的第4种安装方法

    [阅读全文...]

  • Chrome插件[百度一下]发布

    Chrome浏览器百度一下插件发布啦~~写这个有两点,一个是方便大家(有时候迫于万恶的GFW,你懂的),一个是练习下JS,当然,这个插件很简单,高手可以直接忽略~~

    百度一下Chrome插件

    此插件功能如下:

    [阅读全文...]

  • Chrome API HTML版

    最近一段一直在学习JS,Chrome的插件都是用JS做的,所以有了JS基础写写Chrome插件还是很容易的,不过国内的网络大家都懂的,Google的站点老是时不时访问不了,于是就有了此ChromeAPI HTML版(由于CHM版不能添加示例源代码压缩包,且制作CHM版时出了点问题便没有出CHM版),方便在本地电脑随时查看。

    使用说明

    下载文件后得到 ChromeAPI_HTML_20111017.rar 文件,解压后打开 api_index.html 即可

    [阅读全文...]

  • 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库被引入后且被执行才可用。

  • JQuery学习之JQ下拉菜单

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

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

    HTML代码

    [阅读全文...]

  • JS代码根据网页来源显示不同内容

    我的JS学了没多久,今天就拿这个问题来练练手,不过功能还很简单,只能判断是不是来源于一些搜索引擎,然后决定是否显示指定代码。
    [阅读全文…]