📌  相关文章
📜  jQWidgets jqxTagCloud rtl 属性(1)

📅  最后修改于: 2023-12-03 14:43:27.260000             🧑  作者: Mango

jQWidgets jqxTagCloud rtl 属性

简介

jQWidgets jqxTagCloud 是一款基于 jQuery 和 jQWidgets 的标签云插件。它允许用户建立一个可视化的、动态的、有层次的标签云，支持自定义标签样式、标签间距、标签排序等。

对于使用右到左（RTL）语言的用户，jqxTagCloud 还提供了一系列 RTL 属性和 API，以保证插件在 RTL 模式下的正确显示和交互。

RTL 属性
rtl
  • 类型：Boolean
  • 默认值：false
  • 描述：设置插件是否采用 RTL 模式显示。
displayMemberRtl
  • 类型：String
  • 默认值：无
  • 描述：设置标签显示名称的 RTL 属性名。

比如，如果你希望显示的标签名称为“نص بالعربي”（阿拉伯文），则需要将该标签的名称放在一个包含 RTL 属性的对象中，比如 { text: "نص بالعربي", rtl: true }。那么，你需要将 displayMemberRtl 属性设置为“rtl”，以告诉插件识别并正确显示 RTL 属性值。

valueMemberRtl
  • 类型：String
  • 默认值：无
  • 描述：设置标签值的 RTL 属性名。

比如，如果你希望设置的标签值为“5”（阿拉伯数字），则需要将该标签的值放在一个包含 RTL 属性的对象中，比如 { text: "نص بالعربي", value: 5, rtl: true }。那么，你需要将 valueMemberRtl 属性设置为“rtl”，以告诉插件识别并正确读取 RTL 属性值。

tagRendererRtl
  • 类型：Function
  • 默认值：无
  • 描述：设置用于自定义标签渲染的 RTL 回调函数。该函数应该返回一个表示 HTML 内容的字符串。
使用示例

以下是一个基于 jqxTagCloud 的 RTL 模式标签云的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jqxTagCloud Demo</title>
  <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
  <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
  <style type="text/css">
    #tagCloudRTL {
      direction: rtl;
    }
  </style>
  <script type="text/javascript">
    $(document).ready(function(){
      var tags = [
        { text: "دليل المرأة المسلمة", value: 20, rtl: true },
        { text: "مقالات حول التكنولوجيا", value: 15, rtl: true },
        { text: "التغذية الصحية", value: 25, rtl: true },
        { text: "أسرار السعادة الزوجية", value: 14, rtl: true },
        { text: "حكايات من الأدب الروسي", value: 22, rtl: true }
      ];

      $("#tagCloudRTL").jqxTagCloud({
        rtl: true,
        width: 500,
        height: 300,
        source: tags,
        displayMemberRtl: "rtl",
        valueMemberRtl: "rtl",
        tagRendererRtl: function(tag){
          return '<div style="margin: 3px;"><a href="#" style="color: black;">' + tag.text + '</a></div>';
        }
      });
    });
  </script>
</head>
<body>
  <div id="tagCloudRTL"></div>
</body>
</html>

在该代码中，我们采用了 jQuery-library 和 jQWidgets-library，在第13~28行定义了一些 RTL 属性的值，如 displayMemberRtl、valueMemberRtl、tagRendererRtl 等。

在第49行，我们调用 jqxTagCloud 插件，并将 RTL 属性设置为 true，以使插件进入 RTL 模式。通过“source”属性指定了插件所需的标签数据。

在“tagRendererRtl”属性内定义了一个回调函数，用于自定义标签的显示效果。该函数的返回值是一个表示 HTML 内容的字符串。

最终，我们得到了一个如下图所示的标签云：

jQWidgets jqxTagCloud RTL Demo

参考文献
  • jQWidgets. (n.d.). jqxTagCloud API. Retrieved from https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtagcloud/jquery-tagcloud-api.htm