jQuery LigerUI 是一種基于 jQuery 的 UI 組件庫,它提供了多種常用的 UI 組件,如圖表、表格、下拉框、對話框等,可以快速構(gòu)建界面。
接下來我們看一下 jQuery LigerUI 的使用方法。
//引入jQuery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
//引入LigerUI
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/LigerUI/3.3.6/css/ligerui-all.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/LigerUI/3.3.6/js/core/base.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/LigerUI/3.3.6/js/plugins/ligerGrid.js"></script>
引入后,我們就可以使用 LigerUI 提供的各種組件了。例如,要使用表格組件:
<div id="grid"></div>
<script>
$(function() {
$("#grid").ligerGrid({
columns: [
{ display: "姓名", name: "name", width: "100" },
{ display: "年齡", name: "age", width: "100" },
{ display: "性別", name: "sex", width: "100" },
],
data: [
{ name: "張三", age: 18, sex: "男" },
{ name: "李四", age: 20, sex: "女" },
]
});
});
</script>
這樣就能渲染出一張表格,包含姓名、年齡、性別三列數(shù)據(jù)。
除了表格組件,LigerUI 還提供了很多其他的 UI 組件,用法也基本類似。希望大家可以去官網(wǎng)查看具體的 API 文檔,掌握更多使用方法。