你只要一click 就會反轉，之後就會見到簡單的description~

Note: 這個只支援modern browser…. ie 6就無機會用到了，因為利用了css3。這個是利用了 jQuery Flip plug-in。

用法都十分之簡單~
HTML 的structure 就是利用 div

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div title="Click to flip" class="sponsor">
	<div class="sponsorFlip">
		<img alt="More about google" src="img/sponsors/google.png">
	</div>
 
	<div class="sponsorData">
		<div class="sponsorDescription">
			The company that redefined web search.
		</div>
		<div class="sponsorURL">
			<a href="http://www.google.com/">http://www.google.com/ </a>
		</div>
	</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

body{
	/* Setting default text color, background and a font stack */
	font-size:0.825em;
	color:#666;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}
 
.sponsorListHolder{
	margin-bottom:30px;
}
 
.sponsor{
	width:180px;
	height:180px;
	float:left;
	margin:4px;
 
	/* Giving the sponsor div a relative positioning: */
	position:relative;
	cursor:pointer;
}
 
.sponsorFlip{
	/*  The sponsor div will be positioned absolutely with respect
		to its parent .sponsor div and fill it in entirely */
 
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:1px solid #ddd;
	background:url("img/background.jpg") no-repeat center center #f9f9f9;
}
 
.sponsorFlip:hover{ /*而且ie6 不支援 div :hover，ie6 只支援到a:hover ，大家要留意啦*/
	border:1px solid #999;
 
	/* CSS3 inset shadow: */
	-moz-box-shadow:0 0 30px #999 inset;
	-webkit-box-shadow:0 0 30px #999 inset;
	box-shadow:0 0 30px #999 inset; /*css3...這個是for ie 的呢~ 不過就無shadow 呢*/
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.sponsorFlip img{
	/* Centering the logo image in the middle of the .sponsorFlip div */
 
	position:absolute;
	top:50%;
	left:50%;
	margin:-70px 0 0 -70px;
}
 
.sponsorData{
	/* Hiding the .sponsorData div */
	display:none;
}
 
.sponsorDescription{
	font-size:11px;
	padding:50px 10px 20px 20px;
	font-style:italic;
}
 
.sponsorURL{
	font-size:10px;
	font-weight:bold;
	padding-left:20px;
}
 
.clear{
	/* This class clears the floats */
	clear:both;
}

Javscript 方面，Sponsor wall 是利用了jquery ，和jquery ui for interface. 所以大家記得 include 這兩個js 以及 css….
接著當然係 document ready 時要做的javscript 呢~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

$(document).ready(function(){
	/* The following code is executed once the DOM is loaded */
 
	$('.sponsorFlip').bind("click",function(){
 
		// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
 
		var elem = $(this);
 
		// data('flipped') is a flag we set when we flip the element:
 
		if(elem.data('flipped'))
		{
			// If the element has already been flipped, use the revertFlip method
			// defined by the plug-in to revert to the default state automatically:
 
			elem.revertFlip();
 
			// Unsetting the flag:
			elem.data('flipped',false)
		}
		else
		{
			// Using the flip method defined by the plugin:
 
			elem.flip({
				direction:'lr',
				speed: 350,
				onBefore: function(){
					// Insert the contents of the .sponsorData div (hidden
					// from view with display:none) into the clicked
					// .sponsorFlip div before the flipping animation starts:
 
					elem.html(elem.siblings('.sponsorData').html());
				}
			});
 
			// Setting the flag:
			elem.data('flipped',true);
		}
	});
 
});

原文是利用了php 來generate data 的，不過chowky 覺得不太重要所以就算。大家有興趣可以去原文看看呢~

Source: http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

原來都幾易用呢~

可能大家都見過，不過呢~，近來~這個plugin 加入了去jquery ui 作為component，所以支援了apply 不同 theme 的能力，所以大家可以隨便換theme ，都幾好用呢~。

用法好簡單，html的basic structure 都是利用常用的 unorder list “ul” 和 “li”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <!-- jQuery core -->
<script type="text/javascript" src="fg.menu.js"></script> <!-- dropdown list plugin -->
 
<link type="text/css" href="fg.menu.css" media="screen" rel="stylesheet" /> <!-- dropdown list style sheet -->
<link type="text/css" href="theme/ui.all.css" media="screen" rel="stylesheet" /> <!-- jQuery UI theme -->
 
 
<ul>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a>
    <ul>
      <li><a href="#">Child menu option</a></li>
      <li><a href="#">Child menu option</a></li>
      <li><a href="#">Child menu option</a></li>
    </ul>
  </li>
  <li><a href="#">Menu option</a></li>
</ul>

之後dom ready 時加上init 的code

1
2
3
4
5
6
7
8

$(document).ready(function(){
	$('#myMenuButton').menu({
		content: $('#myContent').html(),		
		maxHeight: 180,
		positionOpts: { offsetX: 10, offsetY: 20 },
		showSpeed: 300
	});
});

Demo 效果: http://www.filamentgroup.com/examples/menus/ipod.php
License: MIT and GPL
Source: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

近來jQuery 推出新的release 1.4. 聽聞 performance 改善了很多。

No. of Function Calls (因為減少了很多不必要 method 的call，可能就是大大改善performance 的原因)

dom 的insertion 看來需要的時間真是快了很多 (ie 系列快了很多)


Performance of .html() ，重大的speed 改善

Performance of .remove() and .empty() ，很強呢~

Lets take a closest look at some useful changes

*
All setter method now accept a function as value:

.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(),.replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), and.toggleClass().

$(‘div.demo-container’).html(function() { var emph = ” + $(‘p’).length + ‘ paragraphs!’; return ‘All new content for ‘ + emph + ”; });

*
Quick Element Construction:

When you create a single element with the jQuery function, you can now pass in an object to add attributes and events at the same time:

jQuery(”

“, { id: “foo”, css: { height: “50px”, width: “50px”, color: “blue”, backgroundColor: “#ccc” }, click: function() { $(this).css(“backgroundColor”, “red”); } }).appendTo(“body”);

* Event Multi-binding:
You can now pass an object of many events to bind to an element:

$(“div.test”).bind({ click: function(){ $(this).addClass(“active”); }, mouseenter: function(){ $(this).addClass(“inside”); }, mouseleave: function(){ $(this).removeClass(“inside”); } });

* All Events Can Be Live Events:
Has been introduced cross-browser support for change, submit, focusin, focusout, mouseenter, and mouseleave via the event delegation in .live(). Note that if you need a live focus event, you should use focusin and focusout rather than focus and blur, because focus and blur do not bubble. Also, live() also now accepts a data object, just as bind() has:

$(“p”).live(“myCustomEvent”, function(e, myName, myValue){ $(this).text(“Hi there!”); $(“span”).stop().css(“opacity”, 1) .text(“myName = ” + myName) .fadeIn(30).fadeOut(1000); }); $(“button”).click(function () { $(“p”).trigger(“myCustomEvent”); });

* before, after, replaceWith on disconnected nodes:
You can now use before, after, and replaceWith on nodes that are not attached to the DOM. This allows you to do more complex manipulations before inserting the final structure into the DOM.

jQuery(” “).before(“Hello”).appendTo(“body”)

* .offset( coords | Function )
It is now possible to set the offset of an element. Offset, like all setter methods, can now also accept a function as a second argument.

$(MyEl).offset({ top: 10, left: 30 });

* New .delay() method:
The .delay() method will delay any further elements in the queue for the specified number of milliseconds.

$(“div”).fadeIn().delay(4000).fadeOut();

developer 當然會擔心，update 了之後會有問題。
但~其實只有很少的地方是incompatible 已而~

* .add() no longer plainly concatenates the results together, the results are merged and then sorted in document order.
* .clone(true) now copies events AND data instead of just events.
* jQuery.data(elem) no longer returns an id, it returns the element’s object cache instead.
* jQuery() (with no arguments) no longer converts to jQuery(document).
* .val(“…”) on an option or a checkbox is no longer ambiguous (it will always select by value now, not by text value).
* jQuery.browser.version now returns engine version.
* jQuery is now strict about incoming JSON and throw an exception if we get malformed JSON. If you need to be able to evaluate malformed JSON that is valid JavaScript, you can make a text request and use eval() to evaluate the contents.
* Param serialization now happens in the PHP/Rails style by default. You can use jQuery.ajaxSettings.traditional = true; to use traditional parameter serialization. You can also set the behavior on a per-request basis by passing traditional: true to the jQuery.ajax method.
* jQuery.extend(true, …) No longer extends non-plain-objects or arrays.
* If an Ajax request is made without specifying a dataType and it is returned as text/javascript, it will be executed. Previously, an explicit dataType was required.
* Setting an Ajax request’s ifModified now takes ETags into consideration.

Source: http://blog.skitsanos.com/2010/01/what-is-new-in-jquery-14-features-for.html

1. Day Pilot

這是一個為ASP.NET 而寫的一個component。成熟程度好高。還備有schedule 的 version 。

有Lite （免費，但功能會少一點）和P和Pro （當然要收錢的） version 。

Source: http://www.daypilot.org

2. dhtmlxScheduler

這都是一個很成熟的component. 非常smooth。有齊daily , weekly, monthly，commercial application 其實是必定要完整的。否則一定沒有人買。

不過如果你個想寫的都要是GNU (opensource） 才可以免費使用這個calendar ，否則就要收錢了。(Dual Licensing 亦不能用的呢）

Demo: http://dhtmlx.com/docs/products/dhtmlxScheduler/livedemo.shtml
Source: http://dhtmlx.com/docs/products/dhtmlxScheduler/

3. Web2cal

非常smooth。成熟程度很高。暫時最似outlook calendar 的style 。雖然是commercial的，但如果你／client  不介意link back to we2cal的話。就可以免費使用。chowky 覺得這個是最好的 Component，所以很開心呢～(終於找到個合用的）

Demo: http://www.web2cal.com/web-2-events-calendar/web-2-calendar-demo.html
Source: http://www.web2cal.com/
License:  Basic- free (required to link back every page to web2cal)
Premium – Commercial

4. MooMonth

這個 calendar control 是基於MOOTOOL 來寫的。因為正在於early development stage 所以不建議用來做production 用途。

這是免費的。其實都外觀都不錯，而且又有簡單的效果。希望不隊將來會見到完成品。

Source: http://code.google.com/p/moomonth/
License: LGPL

5. Plans – A Good Web Calendar

只有monthly view ，成熟程度不夠 （免費的就要求不要這麼高呢），（不過基本要的功能都有），好處是免費。

Demo: http://www.planscalendar.com/demo/
Source: http://www.planscalendar.com/
License: License Free

6. JCalendar

這個calendar 是基於主流的jquery而做的。In Early Development Stage ，production 就不要用。雖然demo 比較簡單，但其實利用CSS 的話，這個calendar 都可以包裝的不錯呢。

這是MIT license 。完全opensource。

只得monthly view ，而且功能上不夠，簡單的view 就應該無問題，其他的就…..

License: MIT
Source: http://code.google.com/p/jmonthcalendar/

7. Full Calendar

之前都介紹過。

這都是build  base on jquery。雖然只有monthly view，而功能上都無要收錢的大。但簡單的calendar function 都有齊，所以chowky 都prefer 這個。

Demo: http://arshaw.com/fullcalendar/
Source: http://arshaw.com/fullcalendar/

License: License Free

8. jQuery Week Calendar

差不多個個都是寫monthly view 的，這個就只做weekly view 的。如果只是要weekly 的，chowky 覺得這個雖然只得weekly view ，但成熟程度不會比收錢的commercial calendar control 差。而且是MIT license，所以chowky 覺得如果把Full Calendar + jQuery Week Calendar 一齊用的話，都應該不錯。

License: MIT License
Source: http://www.redredred.com.au/projects/jquery-week-calendar/

總結一下：

根據 chowky 所看過的不同calendar control ，最值得developer 採用的應該是web2cal。

如果不想 link back ／ 相簡單一點，Full Calendar + jQuery Week Calendar

只是簡單的4個steps 就可以做到以下的效果。

Step 1: HTML 都是利用ul 和li

1
2
3
4
5
6
7
8

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Step 2. CSS
要留意的是，現在是還未add span 的，span 會在之後用jquery 加上去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

ul#topnav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#topnav li{
	margin: 0;
	padding: 0;
	overflow: hidden;  /*--Important - Masking out the hover state by default--*/
	float: left;
	height:40px;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
	padding: 10px 20px;
	float: left;
	text-decoration: none;
	color: #fff;
	background: url(a_bg.gif) repeat-x;
	text-transform: uppercase;
	clear: both;
	width: 100%;
	height: 20px;
	line-height: 20px; /*--Vertical alignment of text--*/
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
	color: #555;
	background-position: left bottom;
}
ul#topnav span{ /*--Default state of navigation--*/
	background-position: left top;
}

Step 3. 利用jquery製造的animation effect

a). embed jquery 的library

b). 利用jqeury 去製造animation，shift image -40px pixel向上。

$(document).ready(function() {
 
	$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
 
	$("#topnav li").each(function() { //For each list item...
		var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
		$(this).find("span").show().html(linkText); //Add the text in the <span> tag
	}); 
 
	$("#topnav li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({
			marginTop: "-40" //Find the <span> tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0"  //Move the <span> back to its original state (0px)
		}, 250);
	});
 
});

Source: http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/
Demo: http://www.sohtanaka.com/web-design/examples/fancy-navigation/

jQuery 都採用air來implement這個api browser。

可見，外國的對air的接受性真係比想像中好。

反之，silverlight用的人真的太少，即使有多好的技術（何況完全不好！！），若無人使用的話（所指的是developer），最終都是等淘汰。

由另一角度看，developer寫一次（flex），差不多就可以使用在兩個平台web和air，雖然silverlight都有差不多的技術，developer想法是，flash　player有９成多的 penetration，developer無理由捨易取難，開發一個penetration　rate　不明的新technology，加上所做到的東西和air／flex的是差不多。

而且developer是人，所以有喜好，有很多developer都不喜歡ms。因為ms的做事方法不好（有什麼不好就不多說）。

Source: http://api.jquery.com/

希望快點轉好。(chowky 持有很多股票….哈)~

回歸主題。

可以選擇horizontal 和vertical flip，而且reflection 效果都可以turn off.

加入website 之中，立即可以提昇水準。(哈 chowky 一向不相信即時見效的東西)

License:  License Free

Demo: http://webmuch.com/demos/image_flip_demo/flip.html

Source: http://webmuch.com/image-flip-using-jquery/

而且是利用jquery create iframe on the fly，所以應該不會因為iframe 而影響web page。

以後就可以指定print 指定的content

Source: http://www.bennadel.com/index.cfm?dax=blog:1591.view

Supported Browser: FireFox, IE 7, Safari, Chrome

效果不錯。

Demo: http://www.sohtanaka.com/web-design/examples/peeling-effect/

Source:http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/

License: MIT

另外還有一個類似的，效果上的分別是要自己用mouse drag來掀起。

正常的，當然是用click to open。之不過，有很多時候玩玩亦無妨。

Demo: http://www.elliottkember.com/sexy_curls.html

License: MIT

這個image rotator，有description ，而且可以hide，effect 簡潔。

不錯，可惜load image 的時候沒有 loader image ，令人不知道是loading new image.

圖本身都是很有內容的。chowky 這方面就真是比不上啦

License: License Free

Source: http://designm.ag/tutorials/image-rotator-css-jquery/

Demo: http://www.sohtanaka.com/web-design/examples/image-rotator/