Buy Reviews
Powered by MaxBlogPress  

Archive for the ‘JavaScript’ Category

Blogger 點閱次數測試成功

星期三, 七月 28th, 2010點閱人數:41次

上週在測試Blogger的點閱次數的功能失敗了,今天終於透過[Blogger Hacks]測試 MyHotPost 及增加每篇文章的點閱次數,知道可以藉由MyHotPost的JavaScript點閱數來完成這個功能:

文中的舉例:

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span> </div>

但是我的例子是這樣:

<!– quickedit pencil –>
<b:include data=’post’ name=’postQuickEdit’/>
</span> <div class=’post-share-buttons’>
<b:include data=’post’ name=’shareButtons’/>
</div> </div>

<div class=’post-footer-line post-footer-line-2′><span class=’post-labels’>
<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>
</b:loop>
</b:if>
</span> </div>

不太一樣,後來我就直接加在<!– quickedit pencil –>的前面了:

點閱數&#65306;<script charset=’UTF-8′ src=’http://myhotpost.kengao.tw/jscript/pinfo/5c1f71515749faceebb67f8d95b31d18′ type=’text/javascript’/>
<!– quickedit pencil –>
<b:include data=’post’ name=’postQuickEdit’/>
</span> <div class=’post-share-buttons’>
<b:include data=’post’ name=’shareButtons’/>
</div> </div>

<div class=’post-footer-line post-footer-line-2′><span class=’post-labels’>
<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>
</b:loop>
</b:if>
</span> </div>

一樣紅色這段要用MyHotPost給你的才可以!測試成功,Ya~!

jQuery UI Accordion Widget

星期一, 七月 12th, 2010點閱人數:81次

這個Accordion單字還滿難的,Google的字典會給你翻成手風琴,咶米?不是在講jQuery UI的特效嗎?這個翻譯真奇怪,

在維基裡你可以看到手風琴的長相,在英文的維基中還有一個關於GUI的Accordion的解釋,這個就比較像是ㄚ琪今天要測試使用的效果了,不過雖然字典沒有解釋,還是可以Google到有人翻成可折疊的特效,看一下手風琴的圖示,你可能可以意會到吧,ㄚ琪也真佩服做這個特效的人,把它命名成Accordion。

先來測試一下預設的功能,範例頁網址在http://jqueryui.com/demos/accordion/default.html

你可以將滑鼠移到標題的上方,看有什麼效果,之後再點擊看看!

它的程式碼如下:

<script type="text/javascript">
	$(function() {
		$("#accordion").accordion();
	});
	</script>

<div class="demo">

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		</p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>
		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
		mauris vel est.
		</p>
		<p>
		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos himenaeos.
		</p>
	</div>
</div>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">
<p>
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
Optionally, toggle sections open/closed on mouseover.
</p>
<p>
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
usable without JavaScript.
</p>
</div><!-- End demo-description -->

概覽:

要作到這樣的效果,語義的要求如下:

你的Accordion容器的標記需要成對的標題跟內容面板:

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

假如你要使用不同的元素來做標題,你要使用適合的選擇器來指定標題的選項,例如:header: ‘a.header’,內容的元素一定在標題的後面。

假如你要在標題內有連結,並且使用a的元素作為標題,要新增一個class到裡面並使用它作為標題,例如:header: ‘a.header’。

注意:假如你要一次開啟多個標題,請不要使用Accordion。

accordion不允許同時開啟很多面板,因為它需要更多努力才能做,假如你要找容器可以開啟多個面板,不要使用這個效果,通常這個效果只要幾行的jQuery程式碼就可以使用:

jQuery(document).ready(function(){
	$('.accordion .head').click(function() {
		$(this).next().toggle();
		return false;
	}).next().hide();
});


或是動畫版

jQuery(document).ready(function(){
	$('.accordion .head').click(function() {
		$(this).next().toggle('slow');
		return false;
	}).next().hide();
});

選項:

  • disabled
    型別:Boolean
    預設值:false

    關閉 (true) 或啟用 (false) accordion,在初始化(第一次建構)時設定accordion。

    程式碼範例
    使用disabled選項來初始化accordion。
    $( ".selector" ).accordion({ disabled: true });
    在初始化後取得或設定disabled選項。
    //取得
    var disabled = $( ".selector" ).accordion( "option", "disabled" );
    //設定
    $( ".selector" ).accordion( "option", "disabled", true );
  • active
    型別:Selector, Element, jQuery, Boolean, Number
    預設值:first child

    啟用的元素選擇器,在開始時可以設false不顯示,需要collapsible: true

    程式碼範例
    使用active選項來初始化accordion。
    $( ".selector" ).accordion({ active: 2 });
    初始化後的取得或設定active選項。
    //取得
    var active = $( ".selector" ).accordion( "option", "active" );
    //設定
    $( ".selector" ).accordion( "option", "active", 2 );
  • animated
    型別:Boolean, String
    預設值:’slide’

    選擇你最喜歡的動畫方式,或關閉(設成false), 除了預設值外,’bounceslide’ 跟所有定義的緩解方法都有支援(‘bounceslide’ 需要UI Effects Core)。

    程式碼範例
    使用animated選項來初始化accordion。
    $( ".selector" ).accordion({ animated: 'bounceslide' });
    初始化後取得或設定animated選項。
    //取得
    var animated = $( ".selector" ).accordion( "option", "animated" );
    //設定
    $( ".selector" ).accordion( "option", "animated", 'bounceslide' );
  • autoHeight
    型別:Boolean
    預設值:true

    假如設定,最高的內容部份會被所有其他的部份來參考,提供更多一致性的動畫效果。

    程式碼範例
    使用autoHeight選項來初始化accordion。
    $( ".selector" ).accordion({ autoHeight: false });
    初始化後取得或設定autoHeight選項。
    //取得
    var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
    //設定
    $( ".selector" ).accordion( "option", "autoHeight", false );
  • clearStyle
    型別:Boolean
    預設值:false

    假如設定,會在完成動畫後清除高度跟溢出樣式,這使得accordions可以跟動態內容一起使用,不一起使用則用autoHeight。

    程式碼範例
    使用clearStyle選項來初始化accordion。
    $( ".selector" ).accordion({ clearStyle: true });
    初始化後取得或設定clearStyle選項。
    //取得
    var clearStyle = $( ".selector" ).accordion( "option", "clearStyle" );
    //設定
    $( ".selector" ).accordion( "option", "clearStyle", true );
  • collapsible
    型別:Boolean
    預設值:false

    是否所有的部份可以一次關閉,藉著觸發事件(點擊是預設的)來允許折疊的啟用部份。

    程式碼範例
    使用collapsible選項來初始化accordion。
    $( ".selector" ).accordion({ collapsible: true });
    初始化後取得或設定collapsible選項。
    //取得
    var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
    //設定
    $( ".selector" ).accordion( "option", "collapsible", true );
  • event
    型別:String
    預設值:’click’

    觸發accordion的事件。

    程式碼範例
    使用event選項來初始化accordion。
    $( ".selector" ).accordion({ event: 'mouseover' });
    初始化後取得或設定event選項。
    //取得
    var event = $( ".selector" ).accordion( "option", "event" );
    //設定
    $( ".selector" ).accordion( "option", "event", 'mouseover' );
  • fillSpace
    型別:Boolean
    預設值:false

    假如有設定,accordion會完全填滿父元素的高度,複寫autoheight。

    程式碼範例
    使用指定的fillSpace選項來初始化accordion。
    $( ".selector" ).accordion({ fillSpace: true });
    初始化後取得或設定fillSpace選項。
    //取得
    var fillSpace = $( ".selector" ).accordion( "option", "fillSpace" );
    //設定
    $( ".selector" ).accordion( "option", "fillSpace", true );
  • header
    型別:Selector, jQuery
    預設值:’> li > :first-child,> :not(li):even’

    標頭元素的選擇器。

    程式碼範例
    使用指定的header選項來初始化accordion。
    $( ".selector" ).accordion({ header: 'h3' });
    初始化後取得或設定header選項。
    //取得
    var header = $( ".selector" ).accordion( "option", "header" );
    //設定
    $( ".selector" ).accordion( "option", "header", 'h3' );

  • icons

    型別:Object
    預設值:{ ‘header’: ‘ui-icon-triangle-1-e’, ‘headerSelected’: ‘ui-icon-triangle-1-s’ }

    標頭使用的圖示,圖示可以用’header’跟’headerSelected’來指定,而我們建議使用jQuery UI ThemeRoller處理的jQuery UI CSS架構的原生圖示。

    程式碼範例

    使用指定的icons選項來初始化accordion。
    $( ".selector" ).accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });
    初始化後取得或設定icons選項。
    //取得
    var icons = $( ".selector" ).accordion( "option", "icons" );
    //設定
    $( ".selector" ).accordion( "option", "icons", { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } );
  • navigation
    型別:Boolean
    預設值:false

    If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher.

    Code examples
    Initialize a accordion with the navigation option specified.
    $( ".selector" ).accordion({ navigation: true });
    Get or set the navigation option, after init.
    //getter
    var navigation = $( ".selector" ).accordion( "option", "navigation" );
    //setter
    $( ".selector" ).accordion( "option", "navigation", true );
  • jQuery UI免費跟付費支援

    星期一, 六月 28th, 2010點閱人數:75次

    jQuery UI社群是一個很積極並且當你需要開發建議或是有一個想法來改善指令碼的時候提供一個友善、幫助的環境,jQuery UI Team鼓勵每一個人能積極參與函式庫的開發。

    社區支援

    要開始使用jQuery UI,先讀jQuery UI入門來使用jQuery UI以及如何自訂佈景主題,瀏覽jQuery UI 的 Demos展示及說明文件也是一個瞭解關於每個外掛能力的詳細資訊的好方法,對於進一步的幫助和支援,試試這些資源:

    論壇

    使用 jQuery UI
    對每一個人來說使用jQuery UI,以及問問題跟根據UI組件的使用(包括Themeroller)建議的最好地方。

    開發jQuery UI
    對那些在建構jQuery UI函式庫跟網站的開發者。 (使用上面的提的使用jQuery UI論壇來討論如何使用jQuery UI。)

    jQuery的無障礙
    對於大家感興趣的應用和促進無障礙 jQuery和jQuery UI組件的最佳做法。

    推特

    官方的jQuery推特帳號:

    UI-專注的推特帳號:

    • @pbakaus
    • @rworth
    • @bassistance
    • @reybango
    • @caphun
    • @kswedberg
    • @filamentgroup
    • @scottjehl
    • identi.ca

      官方的jQuery identi.ca帳號:

      網際網路中繼聊天

      官方的IRC頻道是irc.freenode.net上的#jquery。

      發現錯誤?讓我們知道!

      請在錯誤跟踪系統報告任何問題和改進。

      商業支援

      下列公司已經承諾贊助jQuery UI,假如你需要在你的專案上得到jQuery或jQuery UI的關鍵性業務支援,我們鼓勵你考慮我們合作夥伴的專業支援:

      appendTo, LLC 位於美國柯羅拉多州的丹佛市提供世界級的jQuery跟jQuery UI架構的諮詢、訓練跟支援,我們支援開放原始碼促進會(Open-Source Initiative),也是在大企業的技術環境中jQuery和jQuery UI前端網站開發的國際領先的供應商,請拜訪我們在:appendTo.com,聯繫我們在:+1(877) jQuery-Help 或email給我們在:contact@appendTo.com

      Filament Group Inc. 是總部位於波士頓的設計公司專門針對很多不同的設備從事複雜的消費及商業應用的UI設計跟前端開發— 這些設備從網站跟手機,到kiosk的資訊服務機都有,重點在web標準、漸進增強跟無障礙,Filament公司在jQuery UI專案作為設計團隊龍頭的角色上帶來了一個獨特的看法,更多的資訊,請拜訪www.filamentgroup.com 或接洽 hello@filamentgroup.com

      尋求支援的資訊,或許沒那麼重要,但是一旦有了問題,有這個幫忙可迅速解決問題!

    開始使用script.aculo.us

    星期四, 五月 20th, 2010點閱人數:28次

    1. 下載

    script.aculo.us 下載頁面在方便的套件裡抓自己最新的版本,按照那裡的操作步驟,然後回來這裡。

    2. 安裝

    將prototype.js、scriptaculous.js、builder.js、effects.js、dragdrop.js、slider.js跟controls.js放在你的網站的一個資料夾,例如:/javascripts。

    3. 連結到 script.aculo.us

    在你文件的head部份連結到指令碼:

    
    <script src="javascripts/prototype.js" type="text/javascript"></script>
    <script src="javascripts/scriptaculous.js" type="text/javascript"></script>
    

    預設scriptaculous.js會載入所有其他需要的javascript檔案做效果、拖拉、滑塊跟其它所有script.aculo.us的功能,假如你不需要所有的功能,你可以用逗號分隔的列表來指定要載入的指令碼,例如:

    
    <script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
    

    指令碼可以指定為:

    • builder
    • effects
    • dragdrop
    • controls
    • slider

    注意一些指令碼需要其他的指令碼載入才能有適當得功能。

    4. 使用

    要呼叫函式,使用HTML script的標籤,定義他們的最好方法就像這樣:

    
      <script type="text/javascript" language="javascript">
        // <![CDATA[
          Effect.Appear('element_id');
        // ]]>
      </script>
    

    用這種方法,你就不需擔心在你的Java Script程式碼中使用到像是< 跟 > 這樣的字元,你也可以在事件處理器中使用效果:

    <div onclick=”new Effect.SwitchOff(this)”>

    Click here if you’ve seen enough.

    </div>

    假如你想玩得更巧妙,你可以傳遞額外的選項像’duration’、‘fps’ (frames per second)跟delay’給效果。

    <div onclick=”new Effect.BlindUp(this, {duration: 16})”>

    Click here if you want this to go slooooow.

    </div>

    5. 接下來

    • 去看看示範來看一下你要完成的事情,閱讀wiki裡的文件!建立殺手級的應用程式!

    Intrepidity佈景跟Featured Content Gallery外掛

    星期四, 五月 13th, 2010點閱人數:48次

    最近看到了請問該如何設定 intrepidity 1.5.1 這個風格呢?,有點好奇這是什麼佈景,一看真不得了,原來是個超級佈景,去年九月ㄚ琪造了個山寨版JohnChow佈景工程以及寫了篇如何做像John Chow那樣的滑動重點文章,才弄出目前工作達人這樣的景象,估計也花了好幾天的時間來寫!現在有了這個佈景跟外掛幾分鐘你就可以搞定了,唉,科技真是進步啊,才9個月的時間,就變化這麼大!

    intrepidity

    這個佈景已經高度的SEO最佳化了,而且是個可以完全自訂設計的市場導向的產品,佈景的選項包括自訂表頭、頁尾跟背景圖片、logo的上傳、自訂首頁、社交網路的整合等等,Ad-Sense的廣告服務可以使用、在WP 2.8.x 使用Firefox、IE6/7/8、Google Chrome及Safari等環境測試過!

    下載intrepidity

    Featured Content Gallery

    這個外掛式用來搭配intrepidity顯示類似幻燈片播放功能,你可以下載http://downloads.wordpress.org/plugin/featured-content-gallery.3.2.0.zip

    也有中文語言包跟安裝操作可以參閱!

    script.aculo.us Web 2.0 JavaScript 翻譯

    星期一, 五月 3rd, 2010點閱人數:46次

    script.aculo.us 是一組用來增強使用者介面的 JavaScript函式庫網站,它提供了一個視覺化效果引擎,一個拖拉函式庫(包括可排序的列表), 數個以上的控制(Ajax基礎的自動完成、就地編輯、滑塊)等等,可以到示範頁確認一下效果!

    API文件和參考手冊

    這個維基的資料是使用 V1.8版的函式庫,這個函式庫是script.aculo.us目前最常使用的版本 。

    程式碼效果:
    反白提醒效果, 變形(Morph)效果, 移動效果, 模糊(Opacity)效果, 比例(Scale)效果, 平移(Parallel)效果,
    佇列(Queues)效果

    組合效果:
    顯示效果, 由上往下舖展的顯示效果, 由下往上消失的效果, 下沉效果, 淡入淡出效果, 由下往上逐漸變小的消失效果, 逐步放大效果, 拉伸消失的效果, 閃爍效果, 左右抖動效果, 收縮效果, 由上往下舖展的顯示效果, 由下往上消失的效果, 收縮並消失於左上角, 閃爍一下然後收縮消失的效果, 捲動瀏覽器的效果

    輔助效果:
    轉場效果, 一些方法的效果, 視覺標籤的效果, 多重效果, 切換效果

    行為: 可拖動的, 可曳的, 可排序的, Form.Element.DelayedObserver

    控制: Ajax.InPlaceEditor, Ajax.InPlaceCollectionEditor, Ajax.Autocompleter, Autocompleter.Local, Slider

    其他: Builder, Sound, Unit Testing

    script.aculo.us是開放原始碼,請閱讀如何貢獻來找出錯誤,產生錯誤報告跟協助修正。

    幫助移植舊的或死的維基到github並且賺取 BIG BROWNIE POINTS! 你可以在http://script.aculo.us/docs找到舊的維基內容的一份拷貝,見移植有一些幫助的提示並請跟著樣式指南

    快速入門

    1. 下載 & 安裝

    使用script.aculo.us很簡單!首先,到script.aculo.us 下載頁面 抓你自己最方便的套件跟最新的版本,照著操作作,然後回來這裡。

    接下來,將prototype.js、scriptaculous.js、builder.js、effects.js、dragdrop.js、slider.js跟controls.js到你網站的目錄裡,例如,/javascripts。

    第三,在你的網頁載入script.aculo.us,可以在你的文件表頭連結指令碼。

    <script src="javascripts/prototype.js" type="text/javascript"></script>
    <script src="javascripts/scriptaculous.js" type="text/javascript"></script>
    

    scriptaculous.js 載入器指令碼會自動載入其他的函式庫。

    預設情形scriptaculous.js載入拖拉、滑塊效應等所有其它所需的javascript檔案以及所有其他的script.aculo.us功能,假如你不需要所有的功能,你可以用逗號分隔的列表來限制指令碼的使用,例如:<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

    這個指令碼被指定:builder、effects、dragdrop、controls跟slider

    注意一些指令碼需要其他的指令碼才能有完整功能。

    2. 使用!

    要呼叫函式,使用HTML指令碼標籤。

    最好的方式就是這樣定義:

    <script type="text/javascript" language="javascript">
      // <![CDATA[
      $('element_id').appear();
      // ]]>
    </script>
    

    這種方式你不需擔心在你的JavaScript程式碼中使用到像是<跟>的字元,你也可以使用內建的事件處理器內的效果:

    <div onclick="$(this).switchOff()">
      Click here if you've seen enough.
    </div>
    

    假如你想要很技巧地使用,你可以傳遞額外的選項像是duration、fps (frames per second)跟delay之類的選項給效果。

    <div onclick="$(this).blindUp({ duration: 16 })">
      Click here if you want this to go slooooow.
    </div>
    

    接下來

    看一下demos示範來看看你要完成的項目,閱讀文件,建立殺手級的應用程式!

    用Eclipse開發jQuery

    星期二, 四月 20th, 2010點閱人數:322次

    今天手上有了巧用jQuery這本書,看到1.5 用Eclipse開發jQuery這裡,訝異說Eclipse也可以開發jQuery喔!趕緊用心看這一章!

    看了之後,才知道還有3種,課本的Eclipse版本較舊,我貼我新的版本照片給各位瞧瞧:

    1.JSDT

    2010-04-20_150755

    Name:隨意打

    Location:http://download.eclipse.org/webtools/updates

    2010-04-20_152441 2010-04-20_153432

    比較特別的是有一個認證的需要,只有勾選了,不然就沒戲唱了!

    2.JSEclipse

    2010-04-20_155512

    按Add鈕操作就省略了!

    Location:http://download.macromedia.com/pub/labs/jseclipse/autoinstall/site.xml

    2010-04-20_155551

    也是有一個特別的安全警告,一樣是OK,不然也是沒戲唱!

    3.Spket

    2010-04-20_160223

    Location:http://www.spket.com/update/

    2010-04-20_160432

    Spket是免費的商業用版本,所以呢?就出來這張畫面,也只能接受了,不然也是沒戲唱!

    2010-04-20_160741 2010-04-20_160757

    要配置Spket進行jQuery開發,基本上動作跟課本說的一樣,所以就不贅言,只貼圖:

    2010-04-20_161537

    Windows->Preference->Spket->在JavaScript Profile處 New

    2010-04-20_161558

    Add Library

    2010-04-20_161845

    Add File 找你的jQuery.js檔位置

    2010-04-20_162016

    jQuery UI入門

    星期五, 二月 5th, 2010點閱人數:1,573次

    jQuery UI是什麼?

    jQuery UI是一個建立在jQuery JavaScript函式庫上的小工具跟互動式函式庫,你可以用來建立高互動的web應用程式,本指南的目的是讓你提高jQuery UI工作速度,跟著下面開始吧。

    從查閱示範開始

    要感覺一下jQuery UI的功能,可以查閱jQuery UI 的 Demos展示及說明文件

    在範例那裡,導覽列出所有jQuery UI提供的互動跟小工具,選一個互動或是小工具,你會看到特定外掛的幾個範例組態,每個範例允許你檢視原始碼,改變佈景,將網址加入書籤,舉一個例,查閱小工具的可折疊內容展示頁

    建構你自訂的jQuery UI下載

    一旦你對jQuery UI有基礎的瞭解,你就可以準備嘗試一下!現在是你絞盡腦汁到jQuery UI 網站的Download Builder下載一份jQuery UI的時候了,jQuery UI的下載生成器允許你選擇想要下載的部份來取得你專案自訂的版本,這裡有三個步驟來建構你自訂的jQuery UI下載:

    步驟 1:選擇你需要的部份

    下載生成器的主要欄位列出jQuery UI所有的分類:核心、互動、小工具跟效果,jQuery UI的有些部份依賴另一個部份,只要勾選你要下載的小工具的核選框,任何需要的小工具也會自動被勾選,如果有不相依的情況,也會有警告出現,你選擇的部份會自動結合進入自訂的jQuery UI javascript的檔案叫做jquery-ui-1.7.1.custom.min.js

    Image:JQuery-UI---Configure-your-download.png

    2010-02-26_101209

    步驟 2:選擇一個佈景 (或是使用你自己的自訂佈景)

    在下載生成器的右邊欄位,你會發現有一個欄位有很多預先設計好的佈景可以選擇給你的小工具用,你可以選擇我們提供的佈景,也可以使用ThemeRoller設計你自己的佈景(後面有更多的介紹)。

    進階佈景設定:下載生成器的佈景部份也提供了一些進階的組態設定給你的佈景,假如你計畫使用多重佈景在單一頁面上,這些欄位就會派上用場,假如你只是在一個頁面上使用一個佈景,你可以完全忽略這些設定。

    步驟 3:選一個jQuery UI版本

    在下再生成器這裡最後一個步驟選擇一個版本編號,這是很重要的一個步驟因為jQuery UI版本被設計來配合特定版本的jQuery,目前的版本是:jQuery UI 1.7.1:跟jQuery 1.3搭配以及 jQuery UI 1.6:跟jQuery 1.2.6搭配。

    按下Download!

    你已經完成了下載生成器的設定!按下download按鈕,你會得到一個你選擇部份的自訂zip檔案,順著那些步驟,在這裡你也可以取得預設的jQuery UI 1.7 ( zip ~240k )下載,這個檔案包含UI 1.7的所有部份跟Smoothness佈景。

    下載之後:介紹使用jQuery UI

    一旦你下載了 jQuery UI,你會得到一個zip有下列的檔案:

    • /css/
    • /development-bundle/
    • /js/
    • index.html

    基本概觀:在web網頁上使用jQuery UI

    用文字編輯器打開index.html,你會看到連結:你的佈景、jQuery跟jQuery UI,一般來說,你會需要將這3個檔案放在任何要使用jQuery UI小工具跟互動的網頁上:

    <link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

    一旦你放入了必要檔案,你就可以加些jQuery的工具在你的頁面上,舉例來說,要作一個日期選取的小工具,你可以文字輸入的元素到你的頁面上然後呼叫.datepicker(),項這樣: HTML: <input type="text" name="date" id="date" />

    JS:

    $('#date').datepicker();

    Image:Datepickerexample.png

    T這是這樣!

    所有jQuery UI小工具跟互動展示,可以查閱jQuery UI 的 Demos展示及說明文件

    自訂你需要的jQuery UI

    jQuery UI允許你用幾個方法來自訂,你已經見過下載生成器如何允許你自訂你的jQuery UI那一份來收入你要的部份,但是還有一個別的方法可以自訂你要實作的的程式碼。

    基本的jQuery UI:使用選項

    每一個jQuery UI外掛都有一個預設的配置可以迎合最基本常用的使用情況,但是假如你想要一個不同預設組態的外掛,你可以使用”options”來覆蓋每一個預設組態,這些選項的參數是一些傳進jQuery UI小工具的特性,舉例來說,滑塊的小工具有個定位的選項,它允許你指定滑塊應該是水平或垂直方向的,要載你的頁面上設定滑塊的選項,你只要使用一個參數傳入,像這樣:

    $('#mySliderDiv').slider({
          orientation: 'vertical'
    });

    你可以傳入很多不同你要的選項,每個選項後加一個逗號(除了最後一個之外):

    $('#mySliderDiv').slider({
          orientation: 'vertical',
          min: 0,
          max: 150,
          value: 50
    });

    只要記得要大括號{}刮起你的選項,你就可以弄得很好,當然,上面的例子僅僅提到你可以對jQuery UI作什麼,要取得jQuery UI小工具詳細的資訊,請瀏覽jQuery UI 文件說明

    視覺化自訂:設計一個jQuery UI佈景

    假如你想要設計你自己的佈景jQuery UI有一個很炫的應用程式可以達到這個目的,叫做ThemeRoller,你可以按下在jQuery UI導覽裡的design a custom theme來取得,或只是進入這一頁:ThemeRoller.com(註:參閱本頁ThemeRoller中文說明)。

    ThemeRoller提供了自訂的介面來設計jQuery UI小工具的所有元素,當你在左邊欄位調整”levers”,右邊的小工具就會反應你的設計,ThemeRoller的Gallery標籤提供很多預先設計好的佈景(這跟下載生成器提供的一樣)the same ones offered by the download builder) 讓你調整或下載使用。

    Image:Themerollerexample.png

    下載你的佈景

    當你在ThemeRoller那頁按下”Download theme”按鈕,你會直接到下載生成器,並且在佈景下拉選單中有一個自訂的佈景自動被選,可以在那裡進一步地設定你的下載套件,一旦你下載了,你就會看到example.html這一頁是照你自訂佈景的樣式做的。

    快速提示:假如你也想要編輯你的佈景,只要開啟CSS檔,在43行那裡有這樣說著 “To view and modify this theme, visit …” 該網址會打開ThemeRoller的佈景來編輯。

    支援:我可以得到什麼幫助?

    JQuery UI使用者跟開發者資源在Support Center持續更新中。

    徵求開發者!

    想加入jQuery UI團隊嗎?我們很愛你的幫助!拜訪UI Development Center有關於如何加入的詳細資料。

    回顧我們的開發指南有關於如何發展jQuery UI小工具的資訊。

    jQuery UI 的 Demos展示及說明文件

    星期五, 一月 8th, 2010點閱人數:873次

    去年我曾翻譯過ThemeRoller,今天再繼續介紹它的一些功能的demo展示及說明文件,說明文件如果有空的話,就再翻譯給大家閱讀!

    jQuery UI 使用jQuery-風格、事件驅動架構及專注在網路標準、可及性、彈性樣式跟便於使用的的設計上提供了一整套核心互動的外掛程式、使用者介面的小工具(UI widgets)及視覺效果(visual effects),所有的外掛程式在IE 6.0+、 FF 2+、 Safari 3.1+、 Opera 9.0+、跟Google Chrome上經過測試相容。

    互動

    一些像是拖拉、調整大小、選擇跟排序等複雜的行為。

    小工具

    全功能的使用者介面控制 — 每個控制都有一些選項以及完全使用佈景。

    佈景

      ThemeRoller

      星期一, 十二月 21st, 2009點閱人數:142次

      jquery ui有一個ThemeRoller功能看起來滿炫的,看它的說明好瞭解他在搞什麼?

      使用 ThemeRoller

      ThemeRoller 允許你設計訂製的jQuery UI佈景主體來跟你的專案緊密結合,要建構一個訂製的佈景主題,選擇Roll your own tab這一頁然後稍稍調整設定,在設定的時候,右邊的UI組件會根據你的設計來更新,然後你就可以下載你喜歡的佈景主題。

      假如你想要使用已經設計好的佈景主題,選擇Theme Gallery tab 這一頁,在陳列頁選擇其中一個佈景主題,你可以從那裡選擇下載或訂製任何佈景主題,然後要儲存佈景主題,只要將該網址加入書籤或是複製該網址。

      外掛程式開發者

      jQuery UI 現在採用了強大的自定義的CSS架構,這個架構不只用在我們自己的jQuery UI組件,也用在訂製的UI容器(wediget)的開發!!!參閱 jQuery UI 說明文件來學習更多關於新的jQuery UI CSS 架構。

      瀏覽器支援的注意

      ThemeRoller 使用CSS3 border-radius的屬性來做圓角,因為缺乏支援,在Internet Explorer圓角會變成方形出現,ThemeRoller目前也可以產生透明png圖像,我們會很快更新支援IE6的圖示,但暫時您會需要使用pngfix外掛程式來取得IE6漂亮的圖示。

      這個看起來真的很炫,可以好好利用!