Lab of Chowky » Jquery, Mootools

[jQuery] Glimmer: Code Generator for jQuery

Chowky — Thu, 30 Apr 2009 17:15:48 +0000

chowky 看到這個idea ，有點吸引。using an IDE to generate code for jQuery? 聽上去很好，不過可惜只是有幾種effect，library 太細，現在只是beta，看來都是好的tools.

題外話，這個tool 是ms supporter ，所有的東西都是利用m$ 技術。…不過這個tool的性質本來很難賺錢的，所以有機會是為了promote m$ 的ria solution (想得太多了)

Source: http://visitmix.com/Lab/glimmer

[jQuery] jquery.scrollable 可以利用鼠標滾輪控制內容顯示

Chowky — Fri, 24 Apr 2009 18:10:50 +0000

chowky 喜歡這類型的控制方法，可以使用mouse wheel 去拉動頁面。更重要的是不影響mouse wheel 正常操作。
適當使用可以令website上的控制會更簡單而且可以放更多內容，但又不影響外觀，這是好的工具，值得推薦。

Vertical 顯示亦支援。可以造出更多不同的配搭

Source: http://flowplayer.org/tools/scrollable.html
Demo:http://flowplayer.org/tools/scrollable.html

[jQuery] Fancy Thumbnail Hover Effect

Chowky — Fri, 24 Apr 2009 14:53:47 +0000

chowky 向來覺得interface design 一定要容易令user 跟到，simple is enough，而jquery 有很多不過user community 所設計的不過effect，這就是一個很好的例子，簡單，直接。
簡單的一個hover effect，放大，使user 容易跟到。這就做到剛剛好，足夠就可以了，不用太多。

License: License Free
Source: http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
Demo: http://www.sohtanaka.com/web-design/examples/image-zoom/

[jQuery] Tabs And Sliders tabSwitch

Chowky — Thu, 23 Apr 2009 15:15:32 +0000

jQuery 真是愈來愈強大，由那麼多不同的plugin 表明community 的活躍程度。老實說，chowky 都喜歡用jquery

chowky 欣賞這個plugin，造出來效果不錯~ user 好容易跟到。
而且不難使用，web developer 應該十分有用。

License: CDDL
Source: http://www.hieu.co.uk/blog/index.php/tabswitch/
Demo: http://www.hieu.co.uk/blog/index.php/tabswitch/example/

GalleryView –jQuery Content Gallery Plugin

Chowky — Sun, 19 Apr 2009 18:19:37 +0000

Chowky 今日見到一個新的jQuery gallery.

原本以為只是just another gallery only，Chowky 看完整個不同的demo 之後，這個plugin絕不簡單，另外可以做到content changer. 可以做到以類似的tab 的效果，而且非常flexible，既容易implement ，customize 又簡單，非常吸引，效果一流。配上MIT License，web developer 絕對要記下。

用法簡單:

(1) 先加入以下的javascript 去set panel 同埋frame 既size
$('#photos').galleryView({
	panel_width: 800,
	panel_height: 300,
	frame_width: 100,
	frame_height: 100,
});
 
（２）  加入　div．　ｄｉｖ　id  要和上面的一樣
<pre lang="html4strict">
<div id="photos" class="galleryview">
      	...div>

（３）. A series of panel

s, with optional overlays　（ｏｖｅｒｙｌａｙ　是在相上面加入ｄｅｓｃｉｒｐｔｉｏｎ）

    ...
<div class="panel">
      	<img src="img/gallery/02.jpg" alt="" />
<div class="panel-overlay">
<h2>Eden</h2>
Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>.
      		View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</div>
</div>
...

3. An unordered list of images (with optional title attributes if show_captions is set to true)　非常簡單的做法，連javascript 的ａｒｒａｙ都不用，非常簡單，只是用ｕｌ就可以。

<ul class="filmstrip">
	<li><img title="Effet du soleil" src="img/gallery/frame-01.jpg" alt="Effet du soleil" /></li>
	<li><img title="Eden" src="img/gallery/frame-02.jpg" alt="Eden" /></li>
	<li><img title="Snail on the Corn" src="img/gallery/frame-03.jpg" alt="Snail on the Corn" /></li>
	<li><img title="Flowers" src="img/gallery/frame-04.jpg" alt="Flowers" /></li>
	<li><img title="Alone Beach" src="img/gallery/frame-06.jpg" alt="Alone Beach" /></li>
	<li><img title="Sunrise Trees" src="img/gallery/frame-05.jpg" alt="Sunrise Trees" /></li>
	<li><img title="Waterfall" src="img/gallery/frame-07.jpg" alt="Waterfall" /></li>
	<li><img title="Death Valley" src="img/gallery/frame-08.jpg" alt="Death Valley" /></li>
</ul>

JQuery Sparklines

Chowky — Sat, 18 Apr 2009 14:41:50 +0000

這一個jQuery plugin 是一個易於調用的inline graphs plotting. 即是全部都是和文字一樣的大小，它可以出到不同的graphics。

用法太方便了，所以不作詳細解釋

    
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
    <script src="jquery.sparkline.js" type="text/javascript"></script>
 
    <script type="text/javascript"></script>

只要跟著上面的class name 去call inlinesparkline, dynamicsparkline

1
2
3

Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
Sparkline with dynamic data: <span class="dynamicsparkline">Loading..
</span>

Requirement: JQuery
Supported Browser: Firefox 2+, Safari 3+, Opera 9 and Internet Explorer 6 & 7.
License: New BSD License.
Demo: http://omnipotent.net/jquery.sparkline/