jQuery MiniUI實例

jQuery MiniUI是一款基于jQuery的UI組件庫，具有輕量級、易用性和擴展性等特點。下面我們來看一個簡單的實例。

<script src="jquery.min.js"></script>
<script src="jquery.miniui.js"></script>
<link href="themes/bootstrap/miniui.css" rel="stylesheet" type="text/css" />
<div id="myGrid" class="mini-datagrid" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
$(function(){
$('#myGrid').miniDataGrid({
url: 'data.php', // 數據源
columns: [{ field: 'id', header: 'ID', width: 50 }, { field: 'name', header: '姓名', width: 100 }, { field: 'age', header: '年齡', width: 50 }, { field: 'address', header: '地址', width: 150 }]
});
});
</script>

上述代碼實現了一個簡單的數據表格，使用了miniDataGrid組件。數據來源于data.php頁面，表格共有4列，分別為ID、姓名、年齡和地址。

上面的代碼中還用到了miniui.css文件，它是MiniUI提供的樣式文件，可以使表格看起來更加美觀。

MiniUI還提供了許多其他的組件，如下拉菜單、日歷、對話框等等。使用MiniUI可以大大提高開發效率，減少代碼量。