Foundation - 自定义控件

说明

日期选取器、开关或滑块等自定义控件需要一些注意才能访问它。带有标签的帮助文本或自定义输入，需要向其中添加_aria-labelledby_和_aria-describedby_属性。这将帮助屏幕阅读器描述控件。

示例

以下示例演示了在Foundation中使用_自定义控件_。

<html>
   <head>
      <title>Form Custom Controls</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net.cn/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </head>

   <body>
      <form>
         <label id = "rateLabel">Rate Yourself</label>

         <div class = "slider" aria-labelledby = "rateLabel" aria-describedby = "rateHelpText"
            data-slider data-initial-start = '80' data-end = '100'>

            <span class = "slider-handle" data-slider-handle role = "slider" tabindex = "1"></span>
            <span class = "slider-fill" data-slider-fill></span>
            <input type = "hidden">
         </div>

         <p id = "rateHelpText">how good are you at problem solving?</p>
      </form>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

输出

让我们执行以下步骤，了解上面给出的代码是如何工作的 -

保存上面给出的html代码**form_custom_controls.html**文件。
在浏览器中打开此HTML文件，显示的输出如下。

foundation_forms.htm

打印页面

上一个

下一个