EasyUI jQuery侧边菜单小工具

标题：EasyUI jQuery侧边菜单小工具攻略

EasyUI jQuery侧边菜单小工具可以在网站中方便地创建侧边栏菜单，便于用户浏览网站中的不同页面。本文将详细介绍EasyUI jQuery侧边菜单小工具的安装、使用和示例说明。

安装

EasyUI jQuery侧边菜单小工具可以通过下载EasyUI框架进行安装，其中EasyUI是一个基于jQuery的UI插件框架。下载完成后，在html页面中引入EasyUI框架和EasyUI jQuery侧边菜单小工具的js和css文件即可完成安装。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EasyUI侧边栏菜单</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
...
</body>
</html>

使用

EasyUI jQuery侧边菜单小工具的使用非常简单，只需要配置相应的json数据即可。下面是一个简单的json数据示例：

[{
    "text": "菜单1",
    "iconCls": "icon-save",
    "url": "http://www.example.com/menu1.html"
}, {
    "text": "菜单2",
    "iconCls": "icon-search",
    "children": [{
        "text": "子菜单1",
        "iconCls": "icon-help",
        "url": "http://www.example.com/menu2-1.html"
    }, {
        "text": "子菜单2",
        "iconCls": "icon-help",
        "url": "http://www.example.com/menu2-2.html"
    }]
}, {
    "text": "菜单3",
    "iconCls": "icon-reload",
    "url": "http://www.example.com/menu3.html"
}]

其中，text为菜单项显示的文本，iconCls为菜单项图标，url为菜单项链接地址。若菜单项有子菜单，则在children中配置相应的子菜单项。配置完成后，通过调用EasyUI jQuery侧边菜单小工具的初始化函数即可生成侧边栏菜单。示例代码如下：

$(function () {
    $('#menu').tree({
        data: [{
            "text": "菜单1",
            "iconCls": "icon-save",
            "url": "http://www.example.com/menu1.html"
        }, {
            "text": "菜单2",
            "iconCls": "icon-search",
            "children": [{
                "text": "子菜单1",
                "iconCls": "icon-help",
                "url": "http://www.example.com/menu2-1.html"
            }, {
                "text": "子菜单2",
                "iconCls": "icon-help",
                "url": "http://www.example.com/menu2-2.html"
            }]
        }, {
            "text": "菜单3",
            "iconCls": "icon-reload",
            "url": "http://www.example.com/menu3.html"
        }]
    });
});

示例说明

下面通过两个示例说明EasyUI jQuery侧边菜单小工具的使用方法。

示例一

在这个示例中，我们需要创建一个包含多个子菜单项的侧边栏菜单。下面是json数据示例：

[{
    "text": "首页",
    "iconCls": "icon-home",
    "url": "http://www.example.com/index.html"
}, {
    "text": "文档",
    "iconCls": "icon-docs",
    "url": "http://www.example.com/docs.html"
}, {
    "text": "关于",
    "iconCls": "icon-add",
    "children": [{
        "text": "联系我们",
        "iconCls": "icon-man",
        "url": "http://www.example.com/contact.html"
    }, {
        "text": "公司介绍",
        "iconCls": "icon-search",
        "url": "http://www.example.com/about.html"
    }]
}]

通过调用EasyUI jQuery侧边菜单小工具的初始化函数即可生成侧边栏菜单。示例代码如下：

$(function () {
    $('#menu').tree({
        data: [{
            "text": "首页",
            "iconCls": "icon-home",
            "url": "http://www.example.com/index.html"
        }, {
            "text": "文档",
            "iconCls": "icon-docs",
            "url": "http://www.example.com/docs.html"
        }, {
            "text": "关于",
            "iconCls": "icon-add",
            "children": [{
                "text": "联系我们",
                "iconCls": "icon-man",
                "url": "http://www.example.com/contact.html"
            }, {
                "text": "公司介绍",
                "iconCls": "icon-search",
                "url": "http://www.example.com/about.html"
            }]
        }]
    });
});

示例二

在这个示例中，我们需要创建一个包含筛选条件的侧边栏菜单，用户可通过该菜单筛选商品。下面是json数据示例：

[{
    "text": "价格区间",
    "iconCls": "icon-dollar",
    "state": "closed",
    "children": [{
        "text": "100元以下",
        "iconCls": "icon-dollars",
        "checked": false
    }, {
        "text": "100-500元",
        "iconCls": "icon-dollars",
        "checked": false
    }, {
        "text": "500元以上",
        "iconCls": "icon-dollars",
        "checked": false
    }]
}, {
    "text": "品牌",
    "iconCls": "icon-tag",
    "state": "closed",
    "children": [{
        "text": "苹果",
        "iconCls": "icon-apple",
        "checked": false
    }, {
        "text": "华为",
        "iconCls": "icon-huawei",
        "checked": false
    }, {
        "text": "小米",
        "iconCls": "icon-xiaomi",
        "checked": false
    }]
}]

通过调用EasyUI jQuery侧边菜单小工具的初始化函数和check方法即可生成侧边栏筛选条件菜单。示例代码如下：

$(function () {
    $('#menu').tree({
        data: [{
            "text": "价格区间",
            "iconCls": "icon-dollar",
            "state": "closed",
            "children": [{
                "text": "100元以下",
                "iconCls": "icon-dollars",
                "checked": false
            }, {
                "text": "100-500元",
                "iconCls": "icon-dollars",
                "checked": false
            }, {
                "text": "500元以上",
                "iconCls": "icon-dollars",
                "checked": false
            }]
        }, {
            "text": "品牌",
            "iconCls": "icon-tag",
            "state": "closed",
            "children": [{
                "text": "苹果",
                "iconCls": "icon-apple",
                "checked": false
            }, {
                "text": "华为",
                "iconCls": "icon-huawei",
                "checked": false
            }, {
                "text": "小米",
                "iconCls": "icon-xiaomi",
                "checked": false
            }]
        }]
    });

    // check筛选条件
    $('#menu').tree('getChildren')[0].checkbox = true;
    $('#menu').tree('getChildren')[1].checkbox = true;
    $('#menu').tree('getChecked').forEach(function (node) {
        console.log(node.text);
    });
});

以上就是EasyUI jQuery侧边菜单小工具的安装、使用和示例说明。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：EasyUI jQuery侧边菜单小工具 - Python技术站

EasyUI jQuery侧边菜单小工具

安装

使用

示例说明

示例一

示例二

相关文章