一、界面控件库
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/n/244674.html
微信扫一扫 
支付宝扫一扫 