Posts Tagged jquery

[jQuery] 1.3.2 和 1.4 的比較

Posted by Chowky in Jquery, Mootools, News on January 20, 2010

jQuery 近來都差不多成為最多人用的javascript framework 了。

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

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

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

Read the rest of this entry »

1.3.1, 1.4, jquery, 比較

2 Comments

8 種 Outlook like AJAX Calendar Components 的介紹和看法

Posted by Chowky in Jquery, Mootools, RIA on September 4, 2009

chowky 覺得類似 outlook , ical 的 AJAX 的calendar好似很散，所以決定整理一下。

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/

Read the rest of this entry »

ajax calendar, calendar control, commercial, javascript, jquery, mootool, Opensource, outlook like

2 Comments

[jQuery] 利用 jqeury 和 css 建立一個navigation menu

Posted by Chowky in Jquery, Mootools on August 3, 2009

Chowky 一向欣賞這位作者所做的simple and elegent 效果和教學。

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

Step 1: HTML 都是利用ul 和li

<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 加上去。

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/

Animated navigation, css, jquery, menu

4 Comments