一、界面控件庫
JQWidgets是一個基於jQuery的HTML5和AJAX的UI組件庫，它提供了豐富的、可定製化的用戶界面組件，可以極大的簡化開發過程，大幅提高製作Web界面的效率。
其中，包括了諸如Grids、繪圖、圖表、表單、菜單、下拉列表等超過50個基本控件，可以輕鬆地創建出不同類型和風格的Web應用程序。
下面是JQWidgets提供的一個簡單的表格控件示例：
<div id="jqxgrid"></div>
<script type="text/javascript">
$(document).ready(function () {
var data = [
{ "firstname": "Alfred", "lastname": "sdsdf", "productname": "11" },
{ "firstname": "Alfred", "lastname": "sdsdf", "productname": "11" },
{ "firstname": "Alfred", "lastname": "sdsdf", "productname": "11" }
];
$("#jqxgrid").jqxGrid({
source: data,
columns: [
{ text: 'First Name', datafield: 'firstname' },
{ text: 'Last Name', datafield: 'lastname' },
{ text: 'Product', datafield: 'productname' }
]
});
});
</script>
其中，我們只需要提供數據和列定義，就可以輕鬆地創建一個擁有排序、分頁和編輯功能的表格。
二、可定製的外觀和主題
JQWidgets中的每個控件都有豐富的選項，可以輕鬆地自定義它的外觀和行為。比如表格控件可以定義列寬、列頭名稱、排序規則、分頁大小、行選中效果、編輯方式等。而外觀方面可以定製各種主題，甚至包括自己的CSS樣式。
比如下面是一個自定義的主題示例：
<!-- 定義一個名為jqi的主題 -->
<link rel="stylesheet" href="jqwidgets/jqx.base.css">
<link rel="stylesheet" href="jqwidgets/jqx.mytheme.css" media="screen">
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = [
{ "firstname": "Alfred", "lastname": "sdsdf", "productname": "11" },
{ "firstname": "Alfred", "lastname": "sdsdf", "productname": "11" },
{ "firstname": "Alfred", "lastname": "sdsdf", "productname": "11" }
];
$("#jqxgrid").jqxGrid({
source: data,
columns: [
{ text: 'First Name', datafield: 'firstname' },
{ text: 'Last Name', datafield: 'lastname' },
{ text: 'Product', datafield: 'productname' }
],
theme: 'mytheme
});
});
</script>
這裡我們只需要在jqx.base.css的基礎上定義一個新的CSS樣式，設置負責控件的背景、字體和邊框，最後在代碼中指定當前使用的主題即可。
三、強大的數據綁定
在Web應用程序中，數據是最重要的部分。JQWidgets提供了多種數據綁定方式，可以輕鬆地將數據源和控件綁定在一起，實現自動化和實時更新。
比如下面是一個使用JSON數據源的例子：
<!-- 定義一個名為jqi的主題 -->
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtreegrid.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = [
{
"id": 1, "name": "Corporate Headquarters", "budget": "none",
"children":
[
{
"id": 2, "name": "Finance Division", "budget": "500,000",
"children":
[
{ "id": 3, "name": "Accounting Department", "budget": "150,000" },
{ "id": 4, "name": "Budget Department", "budget": "350,000" }
]
},
{
"id": 5, "name": "Operations Division", "budget": "1,200,000",
"children":
[
{ "id": 6, "name": "Manufacturing Department", "budget": "600,000", "parentid": 5 },
{ "id": 7, "name": "Public Relations Department", "budget": "100,000", "parentid": 5 },
{ "id": 8, "name": "Sales Department", "budget": "500,000", "parentid": 5 },
{ "id": 9, "name": "Training Department", "budget": "100,000", "parentid": 5 }
]
},
{ "id": 15, "name": "Investor Relations", "budget": "150,000" },
{ "id": 20, "name": "Benefits Department", "budget": "200,000" }
]
}
];
var source = {
dataType: "json",
dataFields: [
{ name: 'name', type: 'string' },
{ name: 'budget', type: 'string' },
{ name: 'id', type: 'number' },
{ name: 'parentid', type: 'number' }
],
hierarchy: {
root: 'children'
},
localData: data
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'children');
$('#jqxtreegrid').jqxTreeGrid('records', records);
}
});
$("#jqxtreegrid").jqxTreeGrid({
width: 680,
source: dataAdapter,
columns: [
{ text: 'Department Name', dataField: 'name', minWidth: 200, width: 250 },
{ text: 'Budget', dataField: 'budget', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }
]
});
});
</script>
通過將數據以經過JSON格式編碼的字符串形式嵌入頁面中，再利用數據適配器將數據解析為可以直接傳遞給控件的對象結構，可以實現非常便捷的數據綁定和更新。
四、交互動畫效果
除了在界面和數據方面提供豐富的支持外，JQWidgets還允許用戶以非常簡單的方式添加交互動畫效果。這些效果不僅能夠讓界面更加動態生動，還可以在較長時間的處理任務中提供顯著的反饋，使用戶可以追蹤進度並且保持耐心和興趣。
比如下面是一個使用JQWidgets提供的動畫效果進行數據加載的例子：
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxtabs").jqxTabs({
width: '100%',
height: '100%',
position: 'top',
selectionTracker: true,
animationType: 'fade'
});
var dataAdapter = new $.jqx.dataAdapter({
url: "data.php?action=gettemperatures",
datatype: 'json'
});
$("#loadimg").fadeIn('slow');
dataAdapter.dataBind(function (loadedData) {
$("#loadimg").fadeOut('slow');
var humidity = [];
var temperature = [];
var length = loadedData.length;
for (var i = 0; i < length; i++) {
temperature.push([loadedData[i].Date, loadedData[i].Temperature]);
humidity.push([loadedData[i].Date, loadedData[i].Humidity]);
}
plot1 = $.jqplot('chartdiv', [temperature, humidity], {
title: 'Weather Forecast',
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%b %#d%y' },
min: '2012-07-31',
tickInterval: '1 day'
},
yaxis: {
tickOptions: { formatString: '%d°C' }
}
},
highlighter: { show: true },
series: [
{ label: 'Temperature', pointLabels: { show: true } },
{ label: 'Humidity', pointLabels: { show: true } }
],
cursor: {
show: true,
zoom: true
}
});
});
});
</script>
在這個例子中，當數據開始加載前顯示加載動畫，在加載完成後隱藏動畫，並將數據適配器中獲取的數據解析為jqPlot所需的展示格式。最後，還添加了一些與鼠標交互的效果，可以讓用戶更加方便地對圖表進行操作。
五、遠程服務器支持
當Web應用程序越來越複雜時，往往需要遠程服務器支持以便管理和維護。JQWidgets提供了多種用於遠程訪問的JavaScript類，可以輕鬆地在瀏覽器和服務器之間進行通信，並處理來自服務器的異步請求。
比如下面是一個使用AJAX來提交表單，並獲得服務器返回的處理結果的例子：
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxButton").jqxButton({ width: '150', height: '25' });
$("#form").submit(function () {
var data = $('#form').serialize();
$.ajax({
url: 'processform.php',
type: 'POST',
data: data,
success: function (result) {
$("#result").html(result);
}
});
return false;
});
});
</script>
在這個例子中，我們將表單的數據使用JavaScript序列化函數，作為AJAX請求的參數，以POST方式提交到指定的服務器處理程序中，並在處理結果返回後將其嵌入頁面中。這樣，我們就可以在Web應用程序中輕鬆地處理各種服務器交互和操作。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/244674.html
微信掃一掃 
支付寶掃一掃 