JqueryUI-显示

JqueryUI是一款基于Jquery的UI组件库，提供了一系列易于定制和使用的UI组件。JqueryUI的显示组件包含了对话框、选项卡、进度条、滑块、按钮等等。

对话框

对话框是JqueryUI中一个常用的组件，其可以用来展示一些信息或者弹出一个表单，常见的应用场景有登录框、提示框等等。

<div id="dialog" title="Basic dialog">
  <p>This is an example dialog!</p>
</div>

$( function() {
    $( "#dialog" ).dialog();
} );

上面的代码片段将会生成一个对话框，标题为"Basic dialog"，内容为"This is an example dialog!"。

选项卡

选项卡是一种将内容切换显示的UI组件，其允许将多个内容组织在同一个区域展示，用户通过点击不同的选项卡来切换不同的内容。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>This is the content for Tab 1</p>
  </div>
  <div id="tabs-2">
    <p>This is the content for Tab 2</p>
  </div>
  <div id="tabs-3">
    <p>This is the content for Tab 3</p>
  </div>
</div>

$( function() {
    $( "#tabs" ).tabs();
} );

上面的代码片段将会生成一个选项卡组件，其中有三个选项卡，分别是"Tab 1"、"Tab 2"和"Tab 3"。

进度条

进度条是一种用于展示任务进度的UI组件，其可以用来展示上传进度、下载进度等等。

<div class="progress-bar"></div>

$( function() {
    $( ".progress-bar" ).progressbar({
        value: 50
    });
} );

上面的代码片段将会生成一个进度条，其进度为50%。

滑块

滑块是一种用户可以通过拖动来选择值的UI组件，其可以用于展示一些数值选择功能。

<div id="slider"></div>

$( function() {
    $( "#slider" ).slider();
} );

上面的代码片段将会生成一个滑块，用户可以通过拖动滑块来选择数值。

按钮

按钮是一种用户可以点击来触发某种操作的UI组件，其可以用于提交表单、显示/隐藏某些元素等等。

<button id="button">Click me!</button>

$( function() {
    $( "#button" ).button();
} )

上面的代码片段将会生成一个按钮，其文字为"Click me!"。

以上就是JqueryUI中的显示组件，通过学习这些组件，可以快速构建出一个漂亮、易用的UI界面。