• JS原型链回顾

    前两年在看JS原型链的时候花了挺久终于搞懂了,时间一久又渐渐生疏,趁机画个图总结下

     

    主要知识点:

    1. 在用构造函数F创建新的实例对象f时,会为f创建__proto__属性,指向Fprototype
    2. 假如现在要查找a属性,那么先看看f上有没有,没有的话再看看f.__proto__(即F.prototype)上有没有,没有的话再看f.__proto__.__proto__有没有,一步一步往上查

    另外关于Function和Object比较特殊的点:

    1. Object因为是构造函数,是函数,所以作为Function的实例,Object.__proto__ 指向其构造函数的prototype,即Function.prototype,Object.__proto__  === Function.prototype
    2. 同理,Function因为是构造函数,是函数,所以作为实例,Function.__proto__指向其构造函数的prototype,即Function.prototype,Function.__proto__ ===  Function.prototype
    3. Function.prototype因为是对象,是Object的实例,所以其__proto__指向 Object.prototype

    参考文章:

  • 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种安装方法

    内联安装(Inline Installation)

    这内联安装我用一句话概括就是:你制作了一个插件并且已经在Chrome Web Store上发布,同时你还想让你网站内的用户也能够直接在你的网站上安装插件而不用再跑到Chrome Web Store那里。

    如果还是不太明白的话可以看看下面人家官方的原文

    Once you’ve published your app or extension, you may be wondering how users will find and install your app. For users who browse the Chrome Web Store and find your item, its a very easy one-click process to install it. However, if a user is already on your site, it can be cumbersome for them to complete the installation – they would need to navigate away from your site to the store, complete the install process, and then return.Chrome插件内联安装图片

    As of Google Chrome 15, you can initiate app and extensions installations “inline” from your site. These apps and extensions are still hosted in the Chrome Web Store, but users no longer have to leave your site to install them.

    When users install the app, they will see an installation confirmation dialog similar to the one pictured on right. Just like the dialog displayed when installing directly from the Chrome Web Store, it lists all of the permissions that your app or extension is requesting. Additionally, this dialog includes the average Chrome Web Store rating and the number of users, giving users extra confidence about what they are about to install.

    内联安装的必要条件

    • 插件已经在Chrome Web Store上发布
    • 内联安装的页面地址必须是插件在Chrome Web Store上发布时所关联网站的子域或子页面(比如插件发布时关联的网站是http://www.zenoven.com,那么内联安装页面的地址可以是http://chrome-extensions.www.zenoven.com或者http://www.zenoven.com/chrome-extensions)

    内联安装页面的制作

    1、在页面的head内插入一个Chrome Web Store link

    即将下面的代码插入页面<head></head>之间

    <link rel=”chrome-webstore-item” href=”https://chrome.google.com/webstore/detail/itemID“>

    itemID可以在打开一个插件的Chrome Web Store链接后找到,下面是我的查看源码Chrome插件的link

    <link rel=”chrome-webstore-item” href=”https://chrome.google.com/webstore/detail/ggkbiakmiljlbbfhjajlpjgckcjanbab“>

    2、触发内联安装

    原文里面写的比较多,按照我的理解其实很简单也就是用JS写些判断代码,增强用户体验,下面是我个人的一些逻辑步骤

    1. 在页面合适的地方插入一个按钮或链接或者是你想用的元素,用于触发安装,这里假设为一个button
    2. 用JS判断浏览器是否是Chrome,如果不是则将button设为disabled并且button内的文本修改为“只适用于Chrome浏览器”,如果是的话就直接进入下一步
    3. 判断该插件是否已安装,如果已安装则修改button文本为“已安装”并且设为disabled,如果未安装则进入下一步
    4. 调用安装函数,修改button文本为“正在安装…”并且设为disabled
    5. 根据安装结果修改button(安装成功则修改button文本为“安装成功”并且设为disabled,否则将button状态及文本恢复到点击button之前)

    说了那么多,其实就是这段JS代码(需jQuery,另外上面所说的button已经在页面内插入,并且button的id为install-button)

    (function($){
      var e = $('#install-button')
        ,originalText = e.html()
        ,itemURL = $('link[rel=chrome-webstore-item]').attr('href')
        ,isChrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
      checkAndSetButton();
      e.click(function(){
        e.html('正在安装...').attr('disabled',true);
        chrome.webstore.install(
          itemURL
          ,function(){
            e.html('安装成功!').attr('disabled',true);
          }
          ,function(){
            e.html(originalText).attr('disabled',false);
          }
        );
      });
      function checkAndSetButton(){
        if(isChrome){
          if (typeof chrome !== "undefined" && typeof chrome.app !== "undefined" && chrome.app.isInstalled) {
            e.html('已安装').attr('disabled',true);
          }
        }else{
          e.html('只适用于Chrome浏览器').attr('disabled',true);
        }
    
      }
    })(jQuery);
    

    好了,上面就是独立网站启用Chrome插件内联安装教程的主要内容了。

    PS:有的童鞋可能会问怎么样才能在指定页面的指定位置插入任意代码呢?我的办法是安装一个插件:Code Insert Manager ,该插件就可以在不改动任何代码的情况下完成上述任务。

    另附一些我制作的Chrome插件:

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

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

    百度一下Chrome插件

    此插件功能如下:

    1、在网页上选中文字后直接点击右键,用百度搜索。
    2、在地址栏右侧点击该插件的百度图标也可直接打开百度首页
    3、还可设置点击该插件的百度图标时弹出小窗口,在小窗口搜索,在新标签云显示搜索结果。

    详情百度一下

  • Chrome API HTML版

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

    使用说明

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

    下载地址[2012年10月16日更新]>>   115网盘    讯6网盘    百度网盘

  • 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;}
    
  • JS代码根据网页来源显示不同内容

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