EasyUI是一款非常流行的前端UI框架,它提供了豐富的UI組件以及強大的數據綁定功能,使得開發者可以快速構建出漂亮、實用的Web應用。其中,創建菜單功能是EasyUI的重要組件之一,本文將介紹如何使用EasyUI的JSON數據格式創建menu菜單。
// 定義菜單項數據 var menu_data = [{ "id": 1, "text": "菜單一", "iconCls": "icon-save", "children": [{ "id": 101, "text": "子菜單一-1", "iconCls": "icon-add", "attributes": { "url": "#" } }, { "id": 102, "text": "子菜單一-2", "iconCls": "icon-add", "attributes": { "url": "#" } }] }, { "id": 2, "text": "菜單二", "iconCls": "icon-open", "attributes": { "url": "#" } }]; // 創建menu組件 $('#menu').menu({ data: menu_data, onClick: function(item) { var url = item.attributes['url']; if (url) { window.location.href = url; } } });
以上代碼中,我們首先定義了一個JSON格式的數據,包含了menu的所有菜單項以及其子菜單項。然后,使用EasyUI的menu組件,將數據傳入組件中,同時還綁定了一個點擊事件,當用戶點擊某個菜單項時,將會自動跳轉到指定的頁面。
通過上述代碼,我們可以輕松創建出一個帶有菜單的Web應用。除了menu組件,EasyUI還提供了很多其他的UI組件及數據綁定接口,非常方便實用,值得每位Web開發者去嘗試。
上一篇vue依賴管理界面