Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • 如何禁用浏览器的右键菜单

    post by onelong / 2010-11-14 17:28 Sunday [javascript]

    有些时候我们需要自定菜单,假如无法禁用浏览器的右键菜单是无法实现的!不多说了!看下面的代码啦!

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    阅读全文>>

  • 再谈javascript事件模型

    post by onelong / 2010-7-5 18:07 Monday [javascript]

    在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者event来引用Event对象。因为在IE中,event是window的一个属性,也就是说event是一个全局变量,这个变量提供了事件的细节。
    Firefox支持几乎所有的W3C DOM二级标准,和部分W3C DOM三级标准。W3C DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。通常在W3C的DOM二级标准中,event作为发生事件的文档对象的属性。在Firefox下JavaScript函数中获取event的方法:

    1、从调用JavaScript函数的HTML页面显式传递参数event(实参的名称一定要用event) 。

    2、若HTML元素的某个事件上直接绑定(在标签里绑定)了一个函数,则在该函数中可以通过
    event = arguments[0];来获取event对象。如<img src="image.jpg" border="0" onclick="click(event)"/>

    3、间接绑定
    obj.onclick = click;
    function click(evt){
    var event = evt||window.event;
    }
    当然你还可以注册事件
    在DOM二级标准中,为某个元素注册事件处理函数用addEventListener(),移除用removeEventListener()
    在IE中则
    obj.attachEvent (on+ "eventName", funHandler);
    obj.detachEvent (on+ "eventName", funHandler);
    上面onclick="click(event)"中的event是一个变量,怎样接收这个参数呢?回调函数应该像如下编写
    function click(evt){
    var event = evt||window.event;
    }
    在IE中evt是undefined的,但可以通过window.event获取,注意这语句的顺序呀,在ff下window.event是undefined!不过我更主张像如下的写法var event = (evt)?evt:window.event;结构明了!

    更多细节请看http://www.ways2u.com/?post=28

     

  • 各大浏览器 CSS3 和 HTML5 兼容速查表

    post by onelong / 2010-4-1 17:57 Thursday [业界]

    支持 CSS3 和 HTML5 的浏览器越来越多,甚至包括最新版的 IE,当然,所谓支持仅仅是部分支持,因为 CSS3 和 HTML5 的W3C 规范都尚未形成。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点,至少要对各个浏览器对这两种新技术的支持情况有一个全面了解。

    阅读全文>>

  • 网页盒子模型

    post by onelong / 2010-3-31 21:27 Wednesday [html+css]

    网页盒子模型存在两种:
          1:标准W3C盒子模型; 2:IE盒子模型(IE浏览器默认的模型)。
           在两种不同模型网页里,定义了相同CSS属性的元素显示效果是不一样的,下面就用公式来区分这两种不同的盒子模型。
          1:标准W3C盒子模型
           宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)
            高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)
            2: IE盒子模型
            宽=width+(border-left)+(border-right)            
            高=height+(border-top)+(border-bottom)
            该模型是IE浏览器默认的盒子模型,当然也可以对其进行更改,在页面最上方加如下代码:
           <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • html页面划词翻译api

    post by onelong / 2009-12-30 3:25 Wednesday [javascript]

    最近看到到一个很有意思的功能!里面有一个划词翻译的功能!
    突然觉得那个功能很人性化!百度google一下,哈哈,还真的又发现.......
    下面的是google的划词翻译:
    如何在您的网站上增加划词翻译功能:
    任何网站只要将以下代码放入您的网页就可以为您的站点添加划词翻译的功能
    <script src="http://www.godict.com/script/huaci.js" type="text/javascript"></script>
    <script type="text/javascript">
    dictInit();
    </script>

    用户取词状态开关:
    如果您希望在网页上显示一个用户取词状态开关,则在适当位置放入以下代码(放置在划词翻译代码之前):
    <span id="dict_status"></span>
    效果如下:
    [划词翻译已开启]
    * 如果要默认取词为关闭,只有在点击开启后才打开,可在
    dictInit();
    之前增加代码:
    dict_enable=false;

    这里还有更强大的:dict.cn的划词翻译
    任何网站只要将以下代码放入您的网页就可以为您的站点添加划词翻译的功能
    <script src="http://dict.cn/hc/" type="text/javascript"></script>
    <script type="text/javascript">
    dictInit();
    </script>

    用户取词状态开关:
    如果您希望在网页上显示一个用户取词状态开关,则在适当位置放入以下代码(放置在划词翻译代码之前):
    <span id="dict_status"></span>
    效果如下:
    [划词翻译已禁用]
    * 如果要默认取词为关闭,只有在点击开启后才打开,可在dictInit();之前增加代码:dict_enable=false;
    dict.cn还提供了查词的api
    更多请留意:http://dict.cn/tools.html

  • 兼容ie和firefox的drag

    post by onelong / 2009-12-22 23:23 Tuesday [javascript]

    <html>  
      <head>   
      <style type="text/css">  
      #drag{  
      width:100px;  
      height:20px;  
      background-color:#eee;  
      border:1px solid #333;  
      position:absolute;  
      top:30px;  
      left:200px;  
      text-align:center;  
      cursor:default;  
      }  
      </style>  
      <script type="text/javascript">   
      window.onload=function(){  
      drag(document.getElementById('drag'));  
      };  
      function drag(obj){  
      obj.onmousedown=function(e){  
      var d=document;
      if(!e){
          e=window.event;
          } 
      var x=e.layerX?e.layerX:e.offsetX;
      var y=e.layerY?e.layerY:e.offsetY;
      //layerX和layerY是Netscape的事件属性,表示事件相对于包容图层的X坐标和Y坐标,在IE中它们则是offsetX和offsetY。 
      if(obj.setCapture){  
          obj.setCapture();  
      //setCapture() 和captureEvents()分别是IE和Netscape进行设置事件捕获源的函数,在设置onmousemove和 onmouseup事件处理程序前必须使用,IE的setCapture可以针对某个特定的元件设置事件捕获,而Netscape中只能对整个文档设置,这将会导致一些问题。对应的停止捕捉事件函数为releaseCapture()和captureEvents()。 
      }else if(window.captureEvents){ 
      window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
      }  
       
      obj.onmousemove=function(e){  
      if(!e){e=window.event; }
      if(!e.pageX){e.pageX=e.clientX;}  
      if(!e.pageY){e.pageY=e.clientY;}  // clientX、clientY以及pageX、pageY分别是IE和Netscape中事件发生位置相对于浏览器页面的X坐标和Y坐标
      var tx=e.pageX-x,ty=e.pageY-y;  
      obj.style.left=tx;  
      obj.style.top=ty;  
      };  
       
      obj.onmouseup=function(){  
      if(obj.releaseCapture){  
      obj.releaseCapture();  
      }else if(window.captureEvents){  
      window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}   
      obj.onmousemove=null;  
      obj.onmouseup=null; 
      };  
      };  
      }  
      </script>   
      <body>  
      <div id="drag">drag me<div>  
      </body>  
      </html>
    要拖动的层中包含的是一张图片而不再是文字,这样在IE中仍可以正常拖动,而在FireFox中会发生异常,点下鼠标、拉动、并松开后,层并没有停止拖动,而是跟随着鼠标。
    Netscape的captureEvent()不能捕获某个特定元件的事件,当点下鼠标并拉动时时,FireFox会认为要拖动的对象是层里的图片,该操作无效。 要解决这个问题,只要把图片上的鼠标点下事件设置为无效,在drag函数内加上 o.firstChild.onmousedown=function(){return false;}; 即可。

  • firefox下的对象捕捉

    post by onelong / 2009-12-22 23:14 Tuesday [javascript]

    <html>
    <head></head>
    <body>
    <div style="position: absolute; left: 100px; top: 100px; width: 200px; height: 200px; background-color: rgb(255, 221, 238);" onmousedown="beginDrag(this,event);"></div>
    <script type="text/javascript">
        function beginDrag(obj,evt){
            var detlaX = evt.layerX;
            var detlaY = evt.layerY;
            obj.addEventListener("mousemove",move,true);
            obj.addEventListener("mouseup",up,true);
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            function move(evt){
                obj.style.left = evt.clientX - detlaX + "px";
                obj.style.top = evt.clientY - detlaY + "px";
            }
            function up(evt){
                obj.removeEventListener("mousemove",move,true);
                obj.removeEventListener("mouseup",up,true);
                window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            }
        }
    </script>
    </body>
    </html>

  • IE和Firefox中不同的JavaScript句法

    post by onelong / 2009-12-19 4:47 Saturday [javascript]

    1. CSS "float" 值
    访问一个给定CSS 值的最基本句法是:object.style.property,使用驼峰写法来替换有连接符的值,例如,访问某个ID为"header"的<div>的 background-color值,我们使用如下句法:
    document.getElementById("header").style.backgroundColor= "#ccc";
    但由于"float"这个词是一个JavaScript保留字,因此我们不能用 object.style.float来访问,这里,我们可以在两种浏览器中这么做:
    在IE中这样写:
    document.getElementById("header").style.styleFloat = "left";
    在Firefox中这样写:
    document.getElementById("header").style.cssFloat = "left";
    2. 元素的推算样式
    JavaScript可以使用object.style.property句法,方便地在外部访问和修改某个CSS样式,但其限制是这些句法只能取出已设的行内样式或者直接由JavaScript设定的样式。并不能访问某个外部的样式表。为了访问元素的"推算"样式,我们可以使用下面的代码:
    在IE中这样写:
    var myObject = document.getElementById("header");
    var myStyle = myObject.currentStyle.backgroundColor;
    在Firefox中这样写:
    var myObject = document.getElementById("header");
    var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
    var myStyle = myComputedStyle.backgroundColor;
    3. 访问元素的"class"
    像"float"一样,"class"是JavaScript的一个保留字,在这两个浏览器中我们使用如下句法来访问"class"。
    在IE中这样写:
    var myObject = document.getElementById("header");
    var myAttribute = myObject.getAttribute("className");
    在Firefox中这样写:
    var myObject = document.getElementById("header");
    var myAttribute = myObject.getAttribute("class");
    This syntax would also apply using the setAttribute method.
    4. 访问<label>标签中的"for"
    就第3点中所提到的,我们同样需要使用不现的句法区分来访问<label>标签中的"for":
    在IE中这样写:
    var myObject = document.getElementById("myLabel");
    var myAttribute = myObject.getAttribute("htmlFor");
    在Firefox中这样写:
    var = document.getElementById("myLabel");
    var myAttribute = myObject.getAttribute("for");
    5. 获取鼠标指针的位置
    计算出鼠标指针的位置对你来说可能是非常少见的,不过当你需要的时候,在IE和Firefox中的句法是不同的。这里所写出的代码将是最最基本的,也可能是某个复杂事件处理中的某一个部分。但他们可以解释其中的异同点。同时,必须指出的是结果相对于Firefox,IE会有更在的不同,这种方法本身就是有 BUG的。通常,这种不同可以用"拖动位置"来得到补偿,但,那是另外一个主题的文章了:
    在IE中这样写:
    var myCursorPosition = ;
    myCursorPosition = event.clientX;
    myCursorPosition = event.clientY;
    在Firefox中这样写:
    var myCursorPosition = ;
    myCursorPosition = event.pageX;
    myCursorPosition = event.pageY;
    6. 获取可见区域、窗口的大小
    有时,我们会需要找到浏览器的可视位置的大小,通常我们称之为"可见区域"。
    在IE中这样写:
    var myBrowserSize = ;
    myBrowserSize = document.documentElement.clientWidth;
    myBrowserSize = document.documentElement.clientHeight;
    在Firefox中这样写:
    var myBrowserSize = ;
    myBrowserSize = window.innerWidth;
    myBrowserSize = window.innerHeight;
    7. Alpha 透明
    好吧,这并不是一个JavaScript句法问题,而是源自于CSS的Alpha透明。但当某个物体需要淡入/出则需要JavaScript来表现,这是通过访问CSS的Alpha透明设置来完成的,通常在一个循环中完成。你需要通过来修改的JavaScript的代码如下::
    在IE中这样写:
    #myElement { filter: alpha(opacity=50); }
    在Firefox中这样写:
    #myElement { opacity: 0.5; }
    在IE中这样写:
    var myObject = document.getElementById("myElement");
    myObject.style.filter = "alpha(opacity=80)";
    在Firefox中这样写:
    var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";
     

  • javascript的实用API

    post by onelong / 2009-12-19 1:18 Saturday [javascript]

    YouTube API 和工具
    http://code.google.com/intl/zh-CN/apis/youtube/developers_guide_protocol.html
    通过 YouTube Data API,应用程序可以执行可在 YouTube 网站上正常执行的功能。通过 API,您的应用程序可以搜索 YouTube 视频,以及检索标准视频供稿、评论和视频响应。 此外,您的应用程序可以通过 API 将视频上传至 YouTube,或更新现有的视频。您还可以检索播放列表、订阅、用户个人资料以及更多其他内容。
    MSDN 技术资源库
    http://msdn.microsoft.com/zh-cn/library/default.aspx
    MSDN 技术资源库是为使用微软工具、产品和技术的开发人员提供的精华资源。它包含丰富的技术编程信息,包括示例代码、文档、技术文章和参考指南。
    mozilla开发帮助!
    https://developer.mozilla.org/cn
    权威的官方说明!为你的开发提供有力的帮助!
    jquery开发文档:
    http://docs.jquery.com/Main_Page
    AJAX 库 API
    jqueryde -->http://code.google.com/intl/zh-CN/apis/ajaxlibs/documentation/index.html#jquery
    还有MooTools,dojo等等
    dojo的主页 http://dojotoolkit.org/
    mootlls的主页 http://mootools.net/
    这些都是网站前台开发中很有用的工具....

  • IE下onpropertychange与firefox下oninput

    post by onelong / 2009-10-6 23:25 Tuesday [javascript]

    onpropertychange能够捕获每次输入值的变化。例如:<INPUT id="test" name="test" />对象的value值被改变时,onpropertychange能够捕获每次改变,而onchange需要执行某个事件才可以捕获。
    onpropertychange 不被firefox所支持,如果想在firefox下正常使用,需要用oninput属性,且需要用addEventListener来注册事件。

    这是个小例子:
    <html>
    <head>
    </head>
    <body>
    <input id='txt' value="" />
     <script language="javascript">
    if(navigator.userAgent.indexOf("MSIE")>0){
    document.getElementById('txt').attachEvent("onpropertychange",txChange);
    }else if(navigator.userAgent.indexOf("Firefox")>0){
    document.getElementById('txt').addEventListener("input",txChange2,false);
    }
    function txChange(){
    alert("testie");
    }
    function txChange2(){
    alert("testfirefox");
    }
    </script>
    </body>
    </html>
         通过这种方法就可以实时监测文本框的输入啦!

  • IE和Firefox中的事件

    post by onelong / 2009-10-6 23:01 Tuesday [javascript]

    在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者event来引用Event对象。因为在IE中,event是window的一个属性,也就是说event是一个全局变量,这个变量提供了事件的细节。
    Firefox支持几乎所有的W3C DOM二级标准,和部分W3C DOM三级标准。W3C DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。
    通常在W3C的DOM二级标准中,event作为发生事件的文档对象的属性。
    在Firefox下JavaScript函数中获取event的方法:
    1、从调用JavaScript函数的HTML页面显式传递参数event(实参的名称一定要用event) 。
    2、若HTML元素的某个事件上直接绑定(在标签里绑定)了一个函数,则在该函数中可以通过event = arguments.callee.caller.arguments[0];来获取event对象。
    3、
    document.onclick = click;
    function click(evt){
    var event = evt||window.event;
    }

    阅读全文>>

  • js禁止复制

    post by onelong / 2009-10-6 2:42 Tuesday [javascript]

    这是个简单的例子
    <html>  
    <script type="text/javascript">
    document.oncontextmenu=function(e){return false;}  
    </script>   
    <style>  
    body {   
    -moz-user-select:none; //firefox独有的属性 
    }     
    </style>   
    <body onselectstart="return false">最早的恐龙 </body>   
    </html>