Wijmo 更優美的jQuery UI組件集：發現 Wijmo

 

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/13332515W-0.png" border="0" alt="" />

內容

 1 什麼是Wijmo？

 2 jQuery 文法

 3 jQuery 選取器

     3.1 jQuery 元素選取器

     3.2 jQuery 屬性選取器

     3.3 jQuery CSS 選取器

 4 檔案準備功能

 5 jQuery 選項

 6 如何引用Wijmo

 7 建立你的第一個jQuery 工程

 

什麼是 Wijmo?

Wijmo 是一個基於jQuery UI的UI組件的套件。Wijmo 組件對用戶端Web開發進行了最佳化，並且充分利用了jQuery的強大能力以達到出色的效能和易用性。所有的Wijmo 組件都配備了超過二十個主題，並且支援了ThemeRoller。

本指南將介紹jQuery的概念，然後讓你開始你的第一個Wijmo 項目。通過這種方式，你可以進一步的深入我們的示範庫，更加強烈的體會到Wijmo能為你帶來什麼。

 

jQuery 文法

jQuery 文法的設計目的是讓開發人員可以輕鬆的選擇一個或者多個DOM元素，然後對選中的一個或者多個元素進行操作。基本的文法如下所示：

 

 

  
$(selector).action() 
 

 

$ 表示使用了 jQuery； (selector) 查詢一個或者多個DOM元素；同時 .action() 在元素上執行動作。

jQuery 文法樣本：

$(this).hide() 隱藏當前元素。

$(“p”).hide() 隱藏所有段落。

$(“p.wow”).hide() 隱藏所有“wow”類型的段落。

$(“#wow”).hide() 隱藏一個ID為“wow”的元素。

 

jQuery 選取器

在開始使用jQuery之前，你需要理解jQuery 選取器的核心概念。 jQuery 選取器利用了CSS的文法，從而使得開發人員能夠精確的選擇一個元素並修改其顯示效果。通過使用這些選取器，你可以通過屬性名稱，標籤名稱，ID標識符，甚至按照內容選擇特定的DOM元素或者元素組。不同類型的選取器列舉如下：

 

jQuery 元素選取器

在 jQuery 中，你可以使用CSS選取器來選擇特定的DOM元素，例如：

$(this) 選擇當前的DOM元素。

$(“div”) 選擇所有的<div> 元素。

$(“.super”) 選擇所有的“super”類型的元素。

$(“div.super”) 選擇所有“super”類型的<div>元素。

$(“#wow”) 選擇第一個具有“wow”標識符的元素。

$(“div#wow”) 選擇第一個具有“wow”標識符的 <div> 元素。

 

jQuery 屬性選取器

如果你想通過屬性選擇元素，而不是通過DOM對象，你可以使用XPATH運算式來選擇具有特定屬性的元素。例如：

$(“[href]”) 選擇具有href屬性的所有元素。

$(“[href=”#”]”) 選擇具有href屬性值等於“#”的所有元素。

$(“[href!=”#”]”) 選擇具有href屬性不等於“#”的所有元素。

 

jQuery CSS 選取器

如果你想改變一個DOM元素的CSS屬性，你可以使用CSS選取器。例如，下面的jQuery 指令碼改變所有所有<div>元素的背景色為紅色：

 

 

  
$(“div”).css(“background-color”,”red”); 
 

 

檔案準備功能

為了防止在文檔完全載入之前運行jQuery 代碼，所有的jQuery函數應當放置在 $(document).ready函數中間。例如：

 

 

  
$(document).ready(function(){   
  
 
  
// 在檔案準備完成後做一些事情。 
  
 
  
}); 
 

 

如果你喜歡，可以使用一個縮短版本的$(document).ready 函數代替。例如：

 

 

  
$(function() { 
  
 
  
//在檔案準備完成後做一些事情。 
  
 
  
}); 
 

 

所有位於 $(document).ready 函數內的腳步將會在DOM載入時載入，並且會在頁面內容載入之前完成。

 

jQuery 選項

jQuery 選項是作為參數傳遞給一個組件的簡單屬性。每一個Wijmo 組件具有一個選項的預設配置；當然，會有一些情況，你希望覆蓋這些定製組件的屬性的預設值。舉一個例子，讓我們假設，wijprogressbar 組件的maxValue 選項的預設值為100，但是你希望這個值變成85。將maxValue選項從其預設值修改為85就像向wijprogressbar 傳遞一個參數一樣簡單：

 

 

  
$(‘#progressbar’).wijprogressbar({ 
  
 
  
    maxValue: 85 
  
 
  
}); 
 

 

通過將maxValue選項設定為85，wijprogressbar 組件的取值範圍將變成從0到85，其minValue屬性預設值為0。如果你想改變minValue選項為25，只需在maxValue參數後面添加一個逗號，然後書寫新的minValue參數值：

 

 

  
$(‘#progressbar’).wijprogressbar({ 
  
 
  
    maxValue: 85, 
  
 
  
    minValue: 25 
  
 
  
}); 
 

 

你可以通過參數向組件傳遞更多的選項值，只需要保證將他們用逗號分隔。

 

如何引用Wijmo

你可以通過使用內容傳遞網路CDN）輕鬆的將Wijmo載入到你的web頁面。CDN使得使用外部庫以及部署到終端使用者的過程變得更加方便快捷。CDN是遍布世界各地的電腦網路。理想的情況下，如果你在美國，並且你訪問一個使用了CDN的web頁面，你會從架設在美國的伺服器主機擷取你所需要的內容。如果你位於印度或者中國，即使是訪問同一個頁面，內容也會來自於最接近你所在位置的伺服器。當web瀏覽器載入內容時，它們通常會檢查是否已經擁有一份該檔案的緩衝。通過使用CDN，你可以從中受益。如果某個使用者曾經通過同一個CDN訪問過一個網站，他們將在他們的機器上保留一份檔案的緩衝版本。你所訪問的頁面會載入的更快，因為支援內容無需再次下載。

Wijmo 從最開始就支援了CDN。你可以在這裡

http://wijmo.com/downloads/cdn/找到CDN的頁面。載入Wijmo到你的頁面所需要的標記看起來類似下面的文法：

 

 

  
<!--jQuery 引用--> 
  
 
  
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script> 
  
 
  
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type="text/javascript"></script> 
  
 
  
<!—主題--> 
  
 
  
<link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" /> 
  
 
  
<!--Wijmo 組件的 CSS--> 
  
 
  
<link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.css" rel="stylesheet" type="text/css" /> 
  
 
  
<!--Wijmo 組件的 JavaScript--> 
  
 
  
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0.min.js" type="text/javascript"></script> 
  
 
  
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.js" type="text/javascript"></script> 
 

 

在以上標記文法中，你應當注意到了，有一些.js檔案標記為*.min.js。這些檔案已經被精簡併壓縮，換句話說，所有不必要的字元都已經被刪除以便網頁載入的速度更快。你也許同時注意到，沒有到獨立的.js檔案的引用。所有組件的JavaScript已經被合并成一個檔案，比如說，wijmo-complete.2.0.0.min.js 。如果你希望連結到單獨的.js檔案，請參考每一個組件的Dependencies主題。

 

建立你的第一個Wijmo工程

現在你已經掌握了jQuery的主要概念，已經可以開始招收建立你的第一個工程。在此樣本工程，你將學習添加一個Wijmo組件，wijcalendar，到你的工程，然後定製一些選項。

第一部是建立一個HTML頁面並向<head>標記內部添加工程依賴項的連結。你所要做的只是為每一個工程連結到內容傳遞網路CDN）：

注意：: 請從CDN引用依賴項的最新版本自http://www.wijmo.com/downloads/cdn。

 

 

  
<!--jQuery 引用--> 
  
 
  
  <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script> 
  
 
  
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type="text/javascript"></script> 
  
 
  
<!--Wijmo 組件的JavaScript--> 
  
 
  
  <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0.min.js" type="text/javascript"></script> 
  
 
  
  <script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.js" type="text/javascript"></script> 
 

 

你同時也會期望添加你的CSS樣式表，同樣可以在<head>標籤內部添加到CDN的連結：

 

 

  
<!—主題--> 
  
 
  
  <link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" /> 
  
 
  
<!--Wijmo 組件的CSS--> 
  
 
  
  <link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.css" rel="stylesheet" type="text/css" /> 
 

 

請將下面的標記放置在HTML文檔的主體，以建立wijcalendar HTML 對象：

 

 

  
<div id="calendar1" style="position:relative;left:40px;top:40px;"></div> 
 

 

現在，你需要通過向<head>標記中添加以下指令碼以初始化wijcalendar組件：

 

 

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

 

查看完整的 wijcalendar 標記樣本 頁面以瞭解最終的標記語言的效果。

該wijcalendar 具有選項設定的預定義的配置，所以在你初始化完成後可以立即使用。如果你現在通過瀏覽器開啟你的工程，你將發現一個功能完整的日曆組件，如所示：

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131228/1333252439-1.png" width="244" height="202" />

 

但是如果該工程希望制定今天之前以及隨後的幾個月的日期不顯示在日曆上，應當如何做呢？顯然刪除它們不是一個明智選擇。所有你需要做的就是將它作為一個參數傳遞給日曆組件，將showOterMonthDays選項設定為false：

 

 

  
$("#calendar1").wijcalendar({ showOtherMonthDays: false }); 
 

 

在web瀏覽器中開啟你的工程，可以看到其他月份的天不再出現在日曆上，它看起來就像這樣：

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131228/1333251b1-2.png" width="244" height="197" />

 

你可以向一個組件傳遞多個參數。如果你需要這麼做，只需要在showOtherMonthDays: false之後添加一個逗號，並將新的參數放置在它的後面。下面的樣本示範了如何除了showOtherMonthDays 選項之外將displayDate設定作為參數傳遞：

 

 

  
$("#calendar1").wijcalendar({ showOtherMonthDays: false, displayDate: new Date('2010/08/25') }); 
 

 

添加並定製一個Wijmo組件就是這麼簡單。然而，這個例子僅從表面揭示了通過Wijmo組件你能做什麼。

關於Wijmo組件的更詳細的資訊，請訪問 Wijmo 文檔，在那裡，你可以找到每一個獨立的組件的介紹和API參考。

如果你想快速上手Wijmo，請參考 Wijmo 完整的快速開始。

有關指令碼的更多進階樣本，請訪問示範頁面。

Wijmo下載，請進入Studio for ASP.NET Wijmo 2012 v1正式發布2012.03.22更新）!