【jQuery Case Study - 1】Site：cssninjas.com

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

 

使用到的jQuery插件有：

 * jQuery UI 1.6RC2 [Slider + Datepicker]

* sIFR v2.0.7



看代码：

  1/**//*
  2 * Scripts
  3 *
  4 */
  5var Engine = {
  6    // external links
  7    externalLinks : function(){
  8        $('a[@rel*=external]').attr('target','_blank');
  9    },
 10    // mails
 11    secureMails : function(){
 12        $('a[@href^=mailto:]').each(function(){
 13            var mail = $(this).attr('href').replace('mailto:','');
 14            var replaced = mail.replace('/at/','@');
 15            $(this).attr('href','mailto:'+replaced);
 16            if($(this).text() == mail) $(this).text(replaced);
 17        });
 18    },
 19    // headers
 20    replaceHeaders : function(){
 21        if(typeof sIFR == "function"){
 22            sIFR.replaceElement("#content h1.a", named({sFlashSrc: "/fonts/claderon.swf", sColor: "#ffffff", sLinkColor: "#ffffff", sHoverColor: "#ffffff", sWmode: "transparent"}));
 23            sIFR.replaceElement("#content h2.a", named({sFlashSrc: "/fonts/claderon.swf", sColor: "#ffffff", sLinkColor: "#ffffff", sHoverColor: "#ffffff", sWmode: "transparent"}));
 24            sIFR.replaceElement("#content h3.a", named({sFlashSrc: "/fonts/claderon.swf", sColor: "#ffffff", sLinkColor: "#ffffff", sHoverColor: "#ffffff", sWmode: "transparent"}));
 25        };
 26    },
 27    // shadow
 28    headerShadow : function(){
 29        var el = $('#header h2');
 30        el.after('<p class="shadow">'+ el.text() +'</p>');
 31    },
 32    // calculator
 33    calculator : {
 34        init : function(){
 35            this.pages         = 1;
 36            this.done        = false;
 37            
 38            this.base = [];
 39            this.subs = [];
 40
 41            this.prices();
 42            this.create();
 43            this.shortcuts();
 44            this.triggers();
 45            
 46            this.containerCurrency.eq(0).trigger('click');
 47        },
 48        // trigger the calculations and populate fields
 49        evaluate : function(){
 50            this.calculate();
 51            
 52            this.containerPages.text(this.pages);
 53            this.containerTotal.html(this.totalHTML);
 54            this.containerOrder.attr('href',this.containerCheckout + '/' + this.pages + '/' + this.abbr);
 55            
 56            if(this.done){
 57                this.containerFormPrice.html(this.totalHTML);
 58                this.containerFormPages.val(this.pages);
 59                this.containerFormCurrency.val(this.abbr);
 60            }
 61            this.done = true;
 62        },
 63        // grabs the prices from html
 64        prices : function(){
 65            $('#calculator div.data ul li span.additional').each(function(i){
 66                Engine.calculator.subs[i] = parseInt($(this).html());            
 67            });
 68            $('#calculator div.data ul li span.first').each(function(i){
 69                Engine.calculator.base[i] = parseInt($(this).html()) - Engine.calculator.subs[i];
 70            });
 71        },
 72        // replaces prices with slider
 73        create : function(){
 74            var code = '';
 75            
 76            code += '<p class="pages">How many pages? <span>1</span></p>' + "\n";
 77            code += '<ul class="slider"><li class="less"><a href="#less">-</a></li><li class="drag" id="slider"><span class="holder" id="knob">�</span></li><li class="more"><a href="#more">+</a></li></ul>' + "\n";
 78            code += '<div class="wrapper">';
 79            code += '<p class="total">Total: <span>0</span></p>';
 80            code += '<p class="currency">Change currency: <a href="#EUR" class="euro" title="EUR">€</a> &middot; <a href="#USD" class="dollar" title="USD">$</a> &middot; <a href="#GBP" class="pound" title="GBP">£</a>';
 81            code += '</div>' + "\n";
 82
 83            $('#calculator div.data').after(code).remove();
 84        },
 85        // sets shortcuts
 86        shortcuts : function(){
 87            // shortcuts
 88            this.containerPages     = $('#calculator p.pages span');
 89            this.containerLess         = $('#calculator ul.slider li.less a');
 90            this.containerMore        = $('#calculator ul.slider li.more a');
 91            this.containerCurrency    = $('#calculator p.currency a');
 92            this.containerTotal        = $('#calculator p.total span');
 93            this.containerOrder        = $('#calculator p.checkout a');
 94            this.containerCheckout    = this.containerOrder.attr('href');
 95            
 96            this.containerFormPrice        = $('#order strong.price');
 97            this.containerFormPages        = $('#f-pages');
 98            this.containerFormCurrency    = $('#f-currency');
 99        },
        // calculate the price
        calculate : function(){
            var base         = this.base[this.currency];
            var page        = this.subs[this.currency];    
            this.total         = this.pages * page + base;
            this.totalHTML     = this.sign + '' + '' + this.total;
        },
        // add events
        triggers : function(){
            
            var parent = this;
        
            // currency change
            this.containerCurrency.click(function(e){
                 parent.currency = $(this).parent().find('a').index(this);
                 parent.sign = $(this).html();
                 parent.abbr = $(this).attr('href').substr($(this).attr('href').indexOf('#')+1);
                 
                 $(this)
                    .addClass('active')//.blur()
                    .parent().find('a').not(this).removeClass('active');
                    
                    
                parent.evaluate();
                return false;
            });
            
            // less/more
            this.containerLess.click(function(){
                if(parent.pages <= 20){
                    $('#slider').slider("moveTo","-=1");
                } else {
                    parent.pages-= 1;
                    parent.evaluate();
                }
                return false;
            });
            this.containerMore.click(function(){
                if(parent.pages < 20){
                    $('#slider').slider("moveTo","+=1");
                } else {
                    parent.pages+= 1;
                    parent.evaluate();
                }
                return false;
            });
            
            // drag
            $('#slider').slider({
                handle : $('#knob'),
                minValue: 1, 
                maxValue: 20, 
                min: 1, 
                max: 20,
                stepping: 1,
                current: 1,
                slide: function(e, ui) { 
                    parent.pages = ui.value;
                    parent.evaluate();
                }
            });
            
        }
    },
    // faqs
    answersToggle : function(){
        $('dl.faq-a')
            .find('dd').hide().end()
            .find('dt').append('<span class="expand">expand</span>')
            .toggle(function(){
                $(this)
                    .find('span').attr('class','collapse').html('collapse').end()
                    .next('dd').fadeIn();
            },function(){
                $(this)
                    .find('span').attr('class','expand').html('expand').end()
                    .next('dd').fadeOut();
            });
    },
    // delicious link
    deliciousAdd : function(){
        $('#bookmarks li.delicious a').click(function(){
            window.open('http://del.icio.us/post?v=4&amp;noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=700,height=400'); 
            return false;
        });
    },
    // order form
    order : {
        init : function(){
            this.datepicker();
            this.change();
            this.templates();
            this.validate();
        },
        datepicker : function(){
            
            var d = new Date();
            var day = d.getDay();
            var interval = 3;
            if(day > 2 && day < 7) interval+= 2;

            $('#f-deadline')
                .focus(function(){$(this).val('');})
                .datepicker({minDate: interval, beforeShowDay: $.datepicker.noWeekends, showOn: "both", dateFormat: "yy/mm/dd", showAnim: "fadeIn", speed: "fast", buttonImage: "/images/icon-calendar-a.gif", buttonImageOnly: true, hideIfNoPrevNext: true});
        },
        change : function(){
            $('#f-pages')
                .after('<strong class="price"></strong>')
                .keyup(function(){
                    var num = parseInt($(this).val());
                    if(num > 0){
                        if(num < 20) {
                            $('#slider').slider("moveTo",num);
                        } else {
                            $('#slider').slider("moveTo",num);
                            Engine.calculator.pages = num;
                            Engine.calculator.evaluate();
                        }
                    }
                }).focus(function(){
                    this.select();
                }).blur(function(){
                    if($(this).val() == '') $(this).val(Engine.calculator.pages);
                });
            $('#f-currency').change(function(){
                var current = $(this).get(0).selectedIndex;
                Engine.calculator.containerCurrency.eq(current).trigger('click');
            }).keyup(function(){
                var current = $(this).get(0).selectedIndex;
                Engine.calculator.containerCurrency.eq(current).trigger('click');
            });
            
            var currency = 1;
            if ($('#f-currency').get(0)) currency = $('#f-currency').get(0).selectedIndex || currency;
            var pages = parseInt($('#f-pages').val()) || 1;
            
            Engine.calculator.containerFormPrice = $('#order strong.price');
            
            $('#slider').slider("moveTo",pages);
            if(pages > 20){
                Engine.calculator.pages = pages;
                Engine.calculator.evaluate();
            }
            Engine.calculator.containerCurrency.eq(currency).trigger('click');
            
        },
        templates : function(){
            templates = 1;
            var cont = $('#f-template').parent();
            cont.append(' <img src="http://images.cnblogs.com/icon-addfield.gif" width="16" height="16" alt="Add Field" title="Add Field" />')
            cont.find('img').click(function(){
                var parent = $(this).parent('p');
                if(parent.is(':animated')) return false;
                parent.clone().insertAfter(parent).hide().fadeIn('slow')
                    .find('label').attr('for','template-'+templates).parent()
                    .find('input').attr('id','template-'+templates).val('').parent()
                    .find('img').remove();
                templates++;
                $(this).appendTo(parent.next('p'));
            });
        },
        validate : function(){
            Engine.errors = 0;
            $('#order').submit(function(){
                Engine.validation.clear($('#order'));
                Engine.validation.check($('#f-name'),Engine.validation.required,'Please enter your name');
                Engine.validation.check($('#f-email'),Engine.validation.email,'Please enter proper email address');
                Engine.validation.check($('#f-project'),Engine.validation.required,'Please enter project name');
                Engine.validation.check($('#f-pages'),Engine.validation.required,'Please enter pages count');
                Engine.validation.check($('#f-notes'),Engine.validation.required,'Please enter project notes');
                if(Engine.errors !== 0) return false;
                $(this).find('button').attr('disabled','disabled').blur().animate({ opacity: 0.4 }, 500);
            });
        },
        printout : function(){
            $('#ordered p.print span').wrapInner('<a href="#print"></a>').find('a').click(function(){
                window.print();
                return false;
            });
        },
        upload : function(){
        
            $('#upload-form').submit(function(){
                $(this).find('p.submit button')
                    .attr('disabled','disabled')
                    .animate({opacity: 0.4},500)
                    .blur()
                    .parent().after('<p class="wait">Uploading files please wait</p>').parent().find('p.wait').fadeIn('slow');
                $('#template').attr('disabled','disabled');
            }).find('p.submit')
                .before('<h3 class="a">Upload Queue</h3><ul class="queue"><li class="empty">No files in queue yet</li></ul>')
                .find('span').html('Upload Files').end()
                .parent().find('h2.a').html('Insert your files');

            $('#template').change(function(){
                var path = $(this).val();
                var file = path.split('\\');
                file = file[file.length-1];
                
                var count = $('input.offset[type=file]').size()+1;
                
                $(this).clone().addClass('offset').attr('id','template-'+count).insertAfter($('input[type=file]:last'));
                $(this).val('');
                
                if(count <= 1){
                    $(this).parent().parent().find('ul.queue li.empty').remove();
                }
                $(this).parent().parent().find('ul.queue').append('<li>'+ file +' <span>(<a href="#template-'+count+'">remove</a>)</span></li>').find('li:last').fadeIn(500).find('a').click(function(e){
                    e.preventDefault();
                    $($(this).attr('href')).remove();
                    $(this).parents('li').fadeOut(500,function(){
                        $(this).remove();
                    });
                });
            });
            
        }
    },
    // contact form
    contact : {
        init : function(){
            Engine.errors = 0;
            $('#contact').submit(function(){
                Engine.validation.clear($('#contact'));
                Engine.validation.check($('#f-name'),Engine.validation.required,'Please enter your name');
                Engine.validation.check($('#f-email'),Engine.validation.email,'Please enter proper email address');
                Engine.validation.check($('#f-subject'),Engine.validation.required,'Please enter subject');
                Engine.validation.check($('#f-message'),Engine.validation.required,'Please enter your message');
                if(Engine.errors !== 0) return false;
                $(this).find('button').attr('disabled','disabled').blur().animate({ opacity: 0.4 }, 500);
            });
            
        }
    },
    // validation methods
    validation : {
        clear : function(container){
            Engine.errors = 0;
            container.find('p.error').remove();
        },
        check : function(field,rule,message){
            if(rule(field) === false){
                field.parent().after('<p class="error">'+ message +'</p>')
                Engine.errors++;
            }
        },
        required : function(field){
            return !! $(field).val();
        },
        email : function(field) {
            return /^[A-Z0-9._%+\-]+@[A-Z0-9.\-]+\.[A-Z]{2,6}$/i.test($(field).val());
        }
    },
    // testimonials rotate
    testimonials : {
        init : function(){
            if($('#testimonials').size() < 1) return false;
            
            container     = $('#testimonials div.wrap-inner');
            count         = container.find('div.item').size();
            
            if(count <= 1) return false;
            
            container.prepend('<ul class="index"><li class="prev"><a href="#prev">Previous testimonial</a></li><li class="next"><a href="#next">Next testimonial</a></li></ul>')
            container.find('ul.index').click(function(e){
                if(container.find('div.item:animated').size() > 0) return false;
                
                if(e.target.nodeName == 'A'){
                    visible = container.find('div.item:visible');

                    if(e.target.hash == '#prev'){
                        if(visible.prev('div.item').size() > 0){
                            var next = visible.prev('div.item');
                        } else {
                            var next = container.find('div.item:last');
                        }
                    } else if(e.target.hash == '#next') {
                        if(visible.next('div.item').size() > 0){
                            var next = visible.next('div.item');
                        } else {
                            var next = container.find('div.item:first');
                        }
                    }
                    
                    visible.fadeOut('slow',function(){
                        next.fadeIn('slow');
                    });
                    //e.target.blur();
                }
                return false;
            });
        }
    },
    // go back link
    goBack : function(){
        $('span.go-back').each(function(){
            $(this).wrap('<a href="#back"></a>').click(function(){
                history.go(-1)
                return false;
            });
        });
    }
}

$(document).ready(function(){
    Engine.externalLinks();
    Engine.secureMails();
    Engine.answersToggle();
    Engine.deliciousAdd();
    Engine.calculator.init();
    Engine.order.init();
    Engine.order.printout();
    if(!$.browser.msie) Engine.order.upload();
    //Engine.testimonials.init();
    Engine.contact.init();
    Engine.replaceHeaders();
    Engine.headerShadow();
    Engine.goBack();
});
document.write('<link rel="stylesheet" type="text/css" media="screen" href="/styles/javascript.css" />');

Notes：

1. 定义一个新的变量来保存本页面相关处理逻辑

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

调用方式：

$(document).ready(function(){
    Engine.externalLinks();
});

2. 外部链接在新窗口打开

        // external links
    externalLinks : function(){
        $('a[@rel*=external]').attr('target','_blank');
    }

3. Email地址保护

        $('a[@href^=mailto:]').each(function(){
            var mail = $(this).attr('href').replace('mailto:','');
            var replaced = mail.replace('/at/','@');
            $(this).attr('href','mailto:'+replaced);
            if($(this).text() == mail) $(this).text(replaced);
        });

4. sIFR的使用，用于替换header

    // headers
    replaceHeaders : function(){
        if(typeof sIFR == "function"){
            sIFR.replaceElement("#content h1.a", named({sFlashSrc: "/fonts/claderon.swf", sColor: "#ffffff", sLinkColor: "#ffffff", sHoverColor: "#ffffff", sWmode: "transparent"}));
            sIFR.replaceElement("#content h2.a", named({sFlashSrc: "/fonts/claderon.swf", sColor: "#ffffff", sLinkColor: "#ffffff", sHoverColor: "#ffffff", sWmode: "transparent"}));
            sIFR.replaceElement("#content h3.a", named({sFlashSrc: "/fonts/claderon.swf", sColor: "#ffffff", sLinkColor: "#ffffff", sHoverColor: "#ffffff", sWmode: "transparent"}));
        };
    }

5. delicious网址保存链接

    // delicious link
    deliciousAdd : function(){
        $('#bookmarks li.delicious a').click(function(){
            window.open('http://del.icio.us/post?v=4&amp;noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=700,height=400'); 
            return false;
        });
    },

6. FAQ条目的显示与隐藏（toggle）

7. jQuery UI slider的使用

8. contact Form的检查