• 【jQuery Case Study 1】Site:cssninjas.com


    cssninjas是一个商业网站,本身就是做网页设计的,因此站点本身也设计的想当不错。

     

    使用到的jQuery插件有:

     * jQuery UI 1.6RC2 [Slider + Datepicker]
    * sIFR v2.0.7

    看代码:
    Code From cssninjas.com
    Notes:
    1. 定义一个新的变量来保存本页面相关处理逻辑

    1var Engine = {
    2    // external links
    3    externalLinks : function(){
    4        $('a[@rel*=external]').attr('target','_blank');
    5    }
    ,
    6}

    7
    调用方式:
    1$(document).ready(function(){
    2    Engine.externalLinks();
    3}
    );
    4
    2. 外部链接在新窗口打开
    1        // external links
    2    externalLinks : function(){
    3        $('a[@rel*=external]').attr('target','_blank');
    4    }

    5
    3. Email地址保护
    1        $('a[@href^=mailto:]').each(function(){
    2            var mail = $(this).attr('href').replace('mailto:','');
    3            var replaced = mail.replace('/at/','@');
    4            $(this).attr('href','mailto:'+replaced);
    5            if($(this).text() == mail) $(this).text(replaced);
    6        }
    );
    7
    4. sIFR的使用,用于替换header
    1    // headers
    2    replaceHeaders : function(){
    3        if(typeof sIFR == "function"){
    4            sIFR.replaceElement("#content h1.a", named({sFlashSrc: "/fonts/claderon.swf", sColor: "#ffffff", sLinkColor: "#ffffff", sHoverColor: "#ffffff", sWmode: "transparent"}));
    5            sIFR.replaceElement("#content h2.a", named({sFlashSrc: "/fonts/claderon.swf", sColor: "#ffffff", sLinkColor: "#ffffff", sHoverColor: "#ffffff", sWmode: "transparent"}));
    6            sIFR.replaceElement("#content h3.a", named({sFlashSrc: "/fonts/claderon.swf", sColor: "#ffffff", sLinkColor: "#ffffff", sHoverColor: "#ffffff", sWmode: "transparent"}));
    7        }
    ;
    8    }
    5. delicious网址保存链接

    1    // delicious link
    2    deliciousAdd : function(){
    3        $('#bookmarks li.delicious a').click(function(){
    4            window.open('http://del.icio.us/post?v=4&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=700,height=400'); 
    5            return false;
    6        }
    );
    7    }
    ,
    8
    6. FAQ条目的显示与隐藏(toggle)
    7. jQuery UI slider的使用
    8. contact Form的检查
  • 相关阅读:
    幸运的秘密
    125条常见的java面试笔试题大汇总之一
    转身离去
    古怪的问题
    125条常见的java面试笔试题大汇总之五
    125条常见的java面试笔试题大汇总之四
    125条常见的java面试笔试题大汇总之三
    关于PostGreSQL中的存储过程
    关于文件编码
    javascript高级程序设计(2)ECMAScript基础
  • 原文地址:https://www.cnblogs.com/jiji262/p/1425428.html
Copyright © 2020-2023  润新知