cssninjas是一个商业网站,本身就是做网页设计的,因此站点本身也设计的想当不错。
使用到的jQuery插件有:
* jQuery UI 1.6RC2 [Slider + Datepicker]
* sIFR v2.0.7
看代码:

Code From cssninjas.com
1
/**//*
2
* Scripts
3
*
4
*/
5
var 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> · <a href="#USD" class="dollar" title="USD">$</a> · <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
},
100
// calculate the price
101
calculate : function()
{
102
var base = this.base[this.currency];
103
var page = this.subs[this.currency];
104
this.total = this.pages * page + base;
105
this.totalHTML = this.sign + '' + '' + this.total;
106
},
107
// add events
108
triggers : function()
{
109
110
var parent = this;
111
112
// currency change
113
this.containerCurrency.click(function(e)
{
114
parent.currency = $(this).parent().find('a').index(this);
115
parent.sign = $(this).html();
116
parent.abbr = $(this).attr('href').substr($(this).attr('href').indexOf('#')+1);
117
118
$(this)
119
.addClass('active')//.blur()
120
.parent().find('a').not(this).removeClass('active');
121
122
123
parent.evaluate();
124
return false;
125
});
126
127
// less/more
128
this.containerLess.click(function()
{
129
if(parent.pages <= 20)
{
130
$('#slider').slider("moveTo","-=1");
131
} else
{
132
parent.pages-= 1;
133
parent.evaluate();
134
}
135
return false;
136
});
137
this.containerMore.click(function()
{
138
if(parent.pages < 20)
{
139
$('#slider').slider("moveTo","+=1");
140
} else
{
141
parent.pages+= 1;
142
parent.evaluate();
143
}
144
return false;
145
});
146
147
// drag
148
$('#slider').slider(
{
149
handle : $('#knob'),
150
minValue: 1,
151
maxValue: 20,
152
min: 1,
153
max: 20,
154
stepping: 1,
155
current: 1,
156
slide: function(e, ui)
{
157
parent.pages = ui.value;
158
parent.evaluate();
159
}
160
});
161
162
}
163
},
164
// faqs
165
answersToggle : function()
{
166
$('dl.faq-a')
167
.find('dd').hide().end()
168
.find('dt').append('<span class="expand">expand</span>')
169
.toggle(function()
{
170
$(this)
171
.find('span').attr('class','collapse').html('collapse').end()
172
.next('dd').fadeIn();
173
},function()
{
174
$(this)
175
.find('span').attr('class','expand').html('expand').end()
176
.next('dd').fadeOut();
177
});
178
},
179
// delicious link
180
deliciousAdd : function()
{
181
$('#bookmarks li.delicious a').click(function()
{
182
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');
183
return false;
184
});
185
},
186
// order form
187
order :
{
188
init : function()
{
189
this.datepicker();
190
this.change();
191
this.templates();
192
this.validate();
193
},
194
datepicker : function()
{
195
196
var d = new Date();
197
var day = d.getDay();
198
var interval = 3;
199
if(day > 2 && day < 7) interval+= 2;
200
201
$('#f-deadline')
202
.focus(function()
{$(this).val('');})
203
.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});
204
},
205
change : function()
{
206
$('#f-pages')
207
.after('<strong class="price"></strong>')
208
.keyup(function()
{
209
var num = parseInt($(this).val());
210
if(num > 0)
{
211
if(num < 20)
{
212
$('#slider').slider("moveTo",num);
213
} else
{
214
$('#slider').slider("moveTo",num);
215
Engine.calculator.pages = num;
216
Engine.calculator.evaluate();
217
}
218
}
219
}).focus(function()
{
220
this.select();
221
}).blur(function()
{
222
if($(this).val() == '') $(this).val(Engine.calculator.pages);
223
});
224
$('#f-currency').change(function()
{
225
var current = $(this).get(0).selectedIndex;
226
Engine.calculator.containerCurrency.eq(current).trigger('click');
227
}).keyup(function()
{
228
var current = $(this).get(0).selectedIndex;
229
Engine.calculator.containerCurrency.eq(current).trigger('click');
230
});
231
232
var currency = 1;
233
if ($('#f-currency').get(0)) currency = $('#f-currency').get(0).selectedIndex || currency;
234
var pages = parseInt($('#f-pages').val()) || 1;
235
236
Engine.calculator.containerFormPrice = $('#order strong.price');
237
238
$('#slider').slider("moveTo",pages);
239
if(pages > 20)
{
240
Engine.calculator.pages = pages;
241
Engine.calculator.evaluate();
242
}
243
Engine.calculator.containerCurrency.eq(currency).trigger('click');
244
245
},
246
templates : function()
{
247
templates = 1;
248
var cont = $('#f-template').parent();
249
cont.append(' <img src="http://images.cnblogs.com/icon-addfield.gif" width="16" height="16" alt="Add Field" title="Add Field" />')
250
cont.find('img').click(function()
{
251
var parent = $(this).parent('p');
252
if(parent.is(':animated')) return false;
253
parent.clone().insertAfter(parent).hide().fadeIn('slow')
254
.find('label').attr('for','template-'+templates).parent()
255
.find('input').attr('id','template-'+templates).val('').parent()
256
.find('img').remove();
257
templates++;
258
$(this).appendTo(parent.next('p'));
259
});
260
},
261
validate : function()
{
262
Engine.errors = 0;
263
$('#order').submit(function()
{
264
Engine.validation.clear($('#order'));
265
Engine.validation.check($('#f-name'),Engine.validation.required,'Please enter your name');
266
Engine.validation.check($('#f-email'),Engine.validation.email,'Please enter proper email address');
267
Engine.validation.check($('#f-project'),Engine.validation.required,'Please enter project name');
268
Engine.validation.check($('#f-pages'),Engine.validation.required,'Please enter pages count');
269
Engine.validation.check($('#f-notes'),Engine.validation.required,'Please enter project notes');
270
if(Engine.errors !== 0) return false;
271
$(this).find('button').attr('disabled','disabled').blur().animate(
{ opacity: 0.4 }, 500);
272
});
273
},
274
printout : function()
{
275
$('#ordered p.print span').wrapInner('<a href="#print"></a>').find('a').click(function()
{
276
window.print();
277
return false;
278
});
279
},
280
upload : function()
{
281
282
$('#upload-form').submit(function()
{
283
$(this).find('p.submit button')
284
.attr('disabled','disabled')
285
.animate(
{opacity: 0.4},500)
286
.blur()
287
.parent().after('<p class="wait">Uploading files
please wait</p>').parent().find('p.wait').fadeIn('slow');
288
$('#template').attr('disabled','disabled');
289
}).find('p.submit')
290
.before('<h3 class="a">Upload Queue</h3><ul class="queue"><li class="empty">No files in queue yet</li></ul>')
291
.find('span').html('Upload Files').end()
292
.parent().find('h2.a').html('Insert your files');
293
294
$('#template').change(function()
{
295
var path = $(this).val();
296
var file = path.split('\\');
297
file = file[file.length-1];
298
299
var count = $('input.offset[type=file]').size()+1;
300
301
$(this).clone().addClass('offset').attr('id','template-'+count).insertAfter($('input[type=file]:last'));
302
$(this).val('');
303
304
if(count <= 1)
{
305
$(this).parent().parent().find('ul.queue li.empty').remove();
306
}
307
$(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)
{
308
e.preventDefault();
309
$($(this).attr('href')).remove();
310
$(this).parents('li').fadeOut(500,function()
{
311
$(this).remove();
312
});
313
});
314
});
315
316
}
317
},
318
// contact form
319
contact :
{
320
init : function()
{
321
Engine.errors = 0;
322
$('#contact').submit(function()
{
323
Engine.validation.clear($('#contact'));
324
Engine.validation.check($('#f-name'),Engine.validation.required,'Please enter your name');
325
Engine.validation.check($('#f-email'),Engine.validation.email,'Please enter proper email address');
326
Engine.validation.check($('#f-subject'),Engine.validation.required,'Please enter subject');
327
Engine.validation.check($('#f-message'),Engine.validation.required,'Please enter your message');
328
if(Engine.errors !== 0) return false;
329
$(this).find('button').attr('disabled','disabled').blur().animate(
{ opacity: 0.4 }, 500);
330
});
331
332
}
333
},
334
// validation methods
335
validation :
{
336
clear : function(container)
{
337
Engine.errors = 0;
338
container.find('p.error').remove();
339
},
340
check : function(field,rule,message)
{
341
if(rule(field) === false)
{
342
field.parent().after('<p class="error">'+ message +'</p>')
343
Engine.errors++;
344
}
345
},
346
required : function(field)
{
347
return !! $(field).val();
348
},
349
email : function(field)
{
350
return /^[A-Z0-9._%+\-]+@[A-Z0-9.\-]+\.[A-Z]{2,6}$/i.test($(field).val());
351
}
352
},
353
// testimonials rotate
354
testimonials :
{
355
init : function()
{
356
if($('#testimonials').size() < 1) return false;
357
358
container = $('#testimonials div.wrap-inner');
359
count = container.find('div.item').size();
360
361
if(count <= 1) return false;
362
363
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>')
364
container.find('ul.index').click(function(e)
{
365
if(container.find('div.item:animated').size() > 0) return false;
366
367
if(e.target.nodeName == 'A')
{
368
visible = container.find('div.item:visible');
369
370
if(e.target.hash == '#prev')
{
371
if(visible.prev('div.item').size() > 0)
{
372
var next = visible.prev('div.item');
373
} else
{
374
var next = container.find('div.item:last');
375
}
376
} else if(e.target.hash == '#next')
{
377
if(visible.next('div.item').size() > 0)
{
378
var next = visible.next('div.item');
379
} else
{
380
var next = container.find('div.item:first');
381
}
382
}
383
384
visible.fadeOut('slow',function()
{
385
next.fadeIn('slow');
386
});
387
//e.target.blur();
388
}
389
return false;
390
});
391
}
392
},
393
// go back link
394
goBack : function()
{
395
$('span.go-back').each(function()
{
396
$(this).wrap('<a href="#back"></a>').click(function()
{
397
history.go(-1)
398
return false;
399
});
400
});
401
}
402
}
403
404
$(document).ready(function()
{
405
Engine.externalLinks();
406
Engine.secureMails();
407
Engine.answersToggle();
408
Engine.deliciousAdd();
409
Engine.calculator.init();
410
Engine.order.init();
411
Engine.order.printout();
412
if(!$.browser.msie) Engine.order.upload();
413
//Engine.testimonials.init();
414
Engine.contact.init();
415
Engine.replaceHeaders();
416
Engine.headerShadow();
417
Engine.goBack();
418
});
419
document.write('<link rel="stylesheet" type="text/css" media="screen" href="/styles/javascript.css" />');
Notes:
1. 定义一个新的变量来保存本页面相关处理逻辑
1
var 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的检查