cssninjas是一个商业网站,本身就是做网页设计的,因此站点本身也设计的想当不错。
使用到的jQuery插件有:
* jQuery UI 1.6RC2 [Slider + Datepicker]
* sIFR v2.0.7
看代码:
Code From cssninjas.com
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> · <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});
419document.write('<link rel="stylesheet" type="text/css" media="screen" href="/styles/javascript.css" />');
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> · <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});
419document.write('<link rel="stylesheet" type="text/css" media="screen" href="/styles/javascript.css" />');
Notes:
1. 定义一个新的变量来保存本页面相关处理逻辑
1var Engine = {
2 // external links
3 externalLinks : function(){
4 $('a[@rel*=external]').attr('target','_blank');
5 },
6}
7
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 Engine.externalLinks();
3});
4
2. 外部链接在新窗口打开
1 // external links
2 externalLinks : function(){
3 $('a[@rel*=external]').attr('target','_blank');
4 }
5
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
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 }
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
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的检查