jQWidgets jqxListMenu 主题属性

简介

jQWidgets jqxListMenu是一个高度可定制的菜单组件。通过使用jqxListMenu主题属性，程序员可以轻松地自定义组件的外观，以适应特定的应用程序要求。

主题属性列表

以下是jQWidgets jqxListMenu 主题属性列表：

| 属性名 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | itemHoverDuration | number | 300 | 当hover一个菜单项时，延迟时间，以毫秒为单位 | | itemDisabledOpacity | number | 0.5 | 当菜单项被禁用时的透明度 | | itemDisabled | object | { color: '#dddddd', backgroundColor: 'transparent' } | 菜单项禁用时的颜色和背景颜色 | | item | object | { height: 25, paddingLeft: 5, paddingRight: 5 } | 菜单项的高度以及左/右填充 | | arrowSize | number | 14 | 箭头的大小 | | arrowIcon | string | "jqx-icon-arrow-down" | 箭头图标的CSS类名 | | header | object | { height: 30, paddingLeft: 5, paddingRight: 5 } | 标题的高度以及左/右填充 | | headerItem | object | { height: 25, paddingLeft: 5, paddingRight: 5 } | 标题项（包括分隔符）的高度以及左/右填充 |

使用方法

要自定义jQWidgets jqxListMenu的外观，可以通过以下两种方法之一：

方法一：在CSS文件中定义

1. 把主题属性对象转换为CSS规则

    /* 按照属性名称定义CSS规则 */
    .jqx-listmenuitem-hoverDuration {
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }
    
    .jqx-listmenuitem-disabled {
        color: #dddddd;
        background-color: transparent !important;
        opacity: 0.5 !important;
    }
    
    .jqx-listmenuitem {
        height: 25px;
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .jqx-listmenu-arrow-down {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 7px solid #999999;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        margin-left: 3px;
        margin-right: 3px;
        vertical-align: middle;
    }
    
    .jqx-listmenu-header {
        height: 30px;
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .jqx-listmenu-header-item {
        height: 25px;
        padding-left: 5px;
        padding-right: 5px;
    }
   

2. 将CSS规则应用于jQWidgets jqxListMenu

    <link href="jqx.base.css" rel="stylesheet" type="text/css" />
    <link href="jqx.arctic.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
        .jqx-listmenuitem-hoverDuration {
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
        }
        
        .jqx-listmenuitem-disabled {
            color: #dddddd;
            background-color: transparent !important;
            opacity: 0.5 !important;
        }
        
        .jqx-listmenuitem {
            height: 25px;
            padding-left: 5px;
            padding-right: 5px;
        }
        
        .jqx-listmenu-arrow-down {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 7px solid #999999;
            border-right: 7px solid transparent;
            border-left: 7px solid transparent;
            margin-left: 3px;
            margin-right: 3px;
            vertical-align: middle;
        }
        
        .jqx-listmenu-header {
            height: 30px;
            padding-left: 5px;
            padding-right: 5px;
        }
        
        .jqx-listmenu-header-item {
            height: 25px;
            padding-left: 5px;
            padding-right: 5px;
        }
    </style>
   

方法二：使用主题生成器

jQWidgets jqxListMenu还提供了一个主题生成器，以图形方式定制主题属性。在生成完自定义主题后，程序员可以将主题文件包含在应用程序中。

1. 打开主题生成器界面，这里提供一个官方链接

2. 在"Settings"选项卡中选择需要的主题属性

3. 修改选中的属性值

4. 在"CSS"选项卡中获取生成的CSS代码

5. 将CSS代码复制到应用程序中

    <link href="jqx.base.css" rel="stylesheet" type="text/css" />
    <link href="jqx.arctic.css" rel="stylesheet" type="text/css" />
    <link href="myTheme.css" rel="stylesheet" type="text/css" />
   

6. 加载自定义主题

    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'myTheme';
            // 加载CSS文件
            var cssUrl = 'myTheme.css';
            var linkElement = $('<link rel="stylesheet" href="' + cssUrl + '"/>');
            $('head').append(linkElement);
        });
    </script>
   

结论

jQWidgets jqxListMenu主题属性提供了一种非常方便的方法来自定义组件的外观。通过使用CSS规则或主题生成器，程序员可以在不影响组件功能的情况下，为组件定制外观，以适应应用程序要求。