博客

jQWidgets jqxTabs closeButtonSize 属性

  • Post category:jquery

那我来详细讲解一下jQWidgets库中的jqxTabs插件的closeButtonSize属性。

jqxTabs closeButtonSize属性

属性概述

closeButtonSize属性用于设置jqxTabs插件中关闭按钮的大小。默认情况下，关闭按钮的大小为16×16像素。该属性值应为正整数。

语法

关闭按钮大小默认值为16，可以在初始化jqxTabs时设置closeButtonSize属性的值。如下所示：

$('#jqxTabs').jqxTabs({
    closeButtonSize: 32
});

示例说明

  1. 设置关闭按钮大小为32

这个示例会通过初始化jqxTabs插件，设置关闭按钮大小为32×32：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQWidgets jqxTabs closeButtonSize属性示例1</title>
    <link rel="stylesheet" href="//cdn.jqwidgets.com/3.9.1/jqwidgets/styles/jqx.base.css">
    <script src="//cdn.jqwidgets.com/3.9.1/jqwidgets/jqxcore.js"></script>
    <script src="//cdn.jqwidgets.com/3.9.1/jqwidgets/jqxbuttons.js"></script>
    <script src="//cdn.jqwidgets.com/3.9.1/jqwidgets/jqxtabs.js"></script>
</head>
<body>

<div id="jqxTabs">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#jqxTabs").jqxTabs({
            closeButtonSize: 32
        });
    });
</script>

</body>
</html>
  1. 设置关闭按钮大小为24

这个示例会通过初始化jqxTabs插件，设置关闭按钮大小为24×24：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQWidgets jqxTabs closeButtonSize属性示例2</title>
    <link rel="stylesheet" href="//cdn.jqwidgets.com/3.9.1/jqwidgets/styles/jqx.base.css">
    <script src="//cdn.jqwidgets.com/3.9.1/jqwidgets/jqxcore.js"></script>
    <script src="//cdn.jqwidgets.com/3.9.1/jqwidgets/jqxbuttons.js"></script>
    <script src="//cdn.jqwidgets.com/3.9.1/jqwidgets/jqxtabs.js"></script>
</head>
<body>

<div id="jqxTabs">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#jqxTabs").jqxTabs({
            closeButtonSize: 24
        });
    });
</script>

</body>
</html>

以上是jQWidgets jqxTabs closeButtonSize属性的完整攻略，希望对您有所帮助。

Tags: