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">

    阅读全文>>

  • 改善网页加载

    post by onelong / 2010-11-8 18:52 Monday [html+css]

    事实上浏览器加载网页并不是多线程的,我做个小测试啦!看看下面代码啦!

    代码一:

    阅读全文>>

  • 标准模式下scrollTop

    post by onelong / 2010-10-17 6:31 Sunday [javascript]

    在文档<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">下,document.body.scrollTop一直都是0的,那么怎样获取滚动条当前的滚动位...

    阅读全文>>

  • 各大浏览器 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中不同的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/
    这些都是网站前台开发中很有用的工具....

  • javascript获得选中信息

    post by onelong / 2009-12-18 20:57 Friday [javascript]

    最近浏览别人的博客时,看到别人的划词搜索很可爱!突然灵机一动,我想他是怎样获取我们的选中的文字呢?这样的javascript交互真的很人性化!
    当然获取页面选中的内容在html编辑器也是很常用的!如要修改某些字体,就可以先选中然后修改!
    首先说一说怎样获取页面的内容吧!
    IE浏览器是这样获取的:document.selection.createRange().text;
    这句可以获取包括文本域的内容!为什么要说明这一点呢?在firefox下获取文本域中选中文字的方法是不同的
    firefox下是这样获取选中的内容呢?
    window.getSelection().toString();或者用document.getSelection();结果都是一样的
    下面看一段兼容的代码吧!
    function getSelectedText() {
    if (window.getSelection) {//firefox
    return window.getSelection().toString();
    }
    else if (document.getSelection) {//firefox
    return document.getSelection();
    }
    else if (document.selection) {//IE
    return document.selection.createRange().text;
    }
    }
    这样就可以获取网页中选中的内容拉!
    下面看看firefox怎样获取文本域中选中的内容吧!
    function getTextFieldSelection(e) {
    if (e.selectionStart != undefined && e.selectionEnd != undefined) {
    var start = e.selectionStart;
    var end = e.selectionEnd;
    return e.value.substring(start, end);}
    else return ""; //不支持的浏览器返回空!!}

  • javascript让你的html也能include

    post by onelong / 2009-12-15 19:30 Tuesday [javascript]

    我们都知道html不想动态语言脚本有个include的命令。那么怎样提高你的html代码的重用性呢?
    我的方法是多种多样的!html本身就提供了框架,如iframe和frame。当然这种框架毕竟html的标签吗!在设置方面比较麻烦,而且有局限性;如一些下拉菜单,毕竟是涉及到层的问题!处理起来比较困难!
    <iframe src="B.aspx" frameBorder="0" scrolling="no" ></iframe>
    当然还有别人方法拉!就是使用javascript了,现在这种方法还是比较多人使用的,看看下面的代码:
    <script language="javascript" src="B.aspx"></script>
    这样就引入了一个文件
    被引入的文件可以是html,php,asp,aspx,js等等文本文件
    被引入的文件就相当一个js文件拉!
    至于被引入的文件要怎样些!我就不唠叨了
    如:

    document.write('这是写html的内容,注意不要分多行,否则不行的')

     

  • li的背景问题

    post by onelong / 2009-12-1 20:53 Tuesday [html+css]

    ie6不支持li标签的背景设定是总所周知的事啦!事实上可以让你的ie6支持这项功能的!这样在你做导航栏的时候就很方便拉!
    怎样让你的ie6支持li的背景呢?
    这个兼容问题当然要用javascript来解决拉
    li.style.background="url(images/links_h.gif) no-repeat #C9E0EC";
    当然你可以写一个函数来实现解决这个问题啦!

  • overflow的使用

    post by onelong / 2009-12-1 20:44 Tuesday [html+css]

    最近在搞那个可爱的档案馆网站,也是第一次使用div的overflow属性,原来overflow很有用.

    overflow属性有四个值:visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x,它们很少被采用。
    原来可以对水平和垂直方向都分别设定的
    hidden是ie6不支持的
    其他的都兼容
     

    阅读全文>>