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

在開始使用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 具有選項設置的預定義的配置，所以在你初始化完成后可以立即使用。如果你現在通過瀏覽器打開你的工程，你將發現一個功能完整的日歷部件，如下圖所示：

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

$("#calendar1").wijcalendar({

    showOtherMonthDays: false

});

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

你可以向一個部件傳遞多個參數。如果你需要這么做，只需要在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更新）!

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。