今天的主題是Jquery的UI

當我們進官網 http://jquery.com/   可以看到上方tab

當游標移過去擇有顯示UI字樣就點選進去

或直接 http://jqueryui.com/   進入其網址點

接下來我們就可以來看他的範例

在 Widgets (譯: 小工具) 中我們可以看到幾個選項

Accordion (譯:手風琴，其實就是如 手風琴的功能) 、Autocomplete.....

以第一個Accordion範例來看，點進去後

首先我們先來下載他UI的套件，請至Downloand  tab 點進去

去下載最新版的套件，下載完後把他解壓縮到你的專案內

記得分類一下，js、css、image....等

再來我們可以看到一個小範例，也就是Accordion 所會呈現的功能

接著我們來看他的code，往下看會看到:

此時我們就來點選 view source(觀看原始碼)

可以看到他的架構上是:

<h3> title <h3>

   <div>

        <p>  content </p>

   </div>

那麼往後要用此範例，就已他這個版型來套即可

當然這樣還沒完，我們還要在加入他所提供的Css、及Jquery程式和圖片

再來哩，我們繼續看他範例那一頁最下面有一行:

Want to learn more about the accordion widget? Check out the API documentation.

Yes，看到這一行就代表他要叫我們進入他的Api內去學習如何使用

進入後:

The markup of your accordion container needs pairs of headers and content panels:

這邊也告訴你了他這範例的架構

但我們這次近來的目的是要找:

Dependencies  (譯:依賴關係)

• UI Core
• Widget Factory
• Effects Core (optional; for use with the animate option)

也就是說，要用的話我們得加入已上這三個參考

這三個標題點進去，都可以看到我們參考的這些jquery  API中提供了哪些功能

先不多說，把他們匯入

UI Core  我們就來找 :ui/jquery.ui.core.js  這個檔匯入

Widdget Factory  就是: ui/jquery.ui.widget.js

Effects Core 就是他本身的: ui/jquery.ui.accordion.js"

<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.accordion.js"></script>

By The Way :

如果嫌麻煩就直接匯入:jquery-ui-1.10.3.custom.min.js

這裡包含了所有的UI了

結束後，我們來跑看看，此時仍然會怪怪的，那就是我們的Css沒套

<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.3.custom.min.css" >

加min是壓縮後的檔比較小，也可選不是min的，但若有甚麼錯誤就自己在換一下吧!!

此時在跑就正確拉

值得注意的是:

我們在套版時，他是有順序性的

首先最主要的Jquery 要放在頭

<script src="js/jquery-1.10.2.js"></script>

接著才依 dependencies 內順序

而Css 則順序放哪都無所謂  ~~

最後再來補充課程前辦多有講了一些選擇器及 .bind()

表單選擇器(:)

$('#myform :text') from內 屬性選擇器

<script type="text/javascript">
$(document).ready(function() {
var content = $('#myform :text').val() +"\n";
content += $('#myform :password').val() +"\n";
content += $('#myform :checkbox').val() +"\n";
content += $('#myform :radio').val() +"\n";
content += $('#myform :image').val() +"\n";

alert(content);

// .bind()
//
});
</script>

<form id="myform" name=form1>
<input type="text" value="AAA"/><br>
<input type="password" value="BBB"/><br>
<input type="checkbox" value="checkboxCCC"/><br>
<input type="radio" value="radioDDD"/><br>
<input type="file" name="EEE"/><br>
</form>

以上是表單內的屬性資料抓取

.bind()

再來也可使用 <a> 連結內的href 的資訊來抓資料:

<script type="text/javascript">

   $(document).ready(function() {
      $("a[href='com']").click(function(){
      alert($(this).html());
      return false;
   });

   $("a[href='org']").click(function(event){
      alert($(this).html()+"\neventObj(x:"+event.pageX
      +",y:"+event.pageY+")\n"+$(event.target).attr("href"));
      return false;
   });

//可去官網查bind()範例 可看到範例中有 eventType 就是要告訴要做甚麼動作 ex bind()
   $("a[href='idv']").bind("click",function(event){
      alert($(this).html());
      return false;
   });

// 加入evendata 也就是帶餐數 
   $("a[href='edu']").bind("click",{name:"Mark"},function(event){
      alert($(this).html()+"\neventObj(x:"+event.pageX
      +",y:"+event.pageY+")\n"+$(event.target).attr("href") +"\n"
      + "object name:"+event.data.name);
      return false;
   });

});

</script>

<a href="com" >Com Link</a><BR/>
<a href="org" >Org Link</a><BR/>
<a href="idv" >Idv Link with EventObj</a><BR/>
<a href="edu" >Edu Link with EventObj and EventData</a><BR/>

首先我們可以到Jquery官網 去看Api 左邊選單有一個Event 點進去

接著就可以看到 

.bind(): Attach a handler to an event for the elements.

.click(): Bind an event handler to the “click” JavaScript event,

or trigger that event on an element.

.change(): Bind an event handler to the “change” JavaScript event,

or trigger that event on an element.

等等.. 好多事件，但我們要看的事.bind() 而 .click及.change也都很常用

.bind( eventType [, eventData ], handler(eventObject) )

 eventType 就是要告訴要做甚麼動作 :A string containing one or more DOM event types,

 such as "click" or "submit," or custom event names.

另外上面有個範例是有帶參數的,evendata  可參考官網的解說:

Because the handlers are closures that both have message in their environment,

both will display the message Not in the face! when triggered.

The variable's value has changed. To sidestep this,

we can pass the message in using eventData:

ex:

可知 參數是用Json格式