首页 > 其他分享 >无涯教程-jQuery - Progressbar组件函数

无涯教程-jQuery - Progressbar组件函数

时间:2023-07-30 12:33:10浏览次数:48  
标签:jQuery 进度条 示例 37 无涯 progressbar Progressbar

小部件进度条功能可与JqueryUI中的小部件一起使用。一个简单的进度条显示有关进度的信息。一个简单的进度条如下所示。

Progressbar - 语法

$( "#progressbar" ).progressbar({
   value: 37
});

Progressbar - 示例

以下是显示进度条用法的简单示例-

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Progressbar - Default functionality</title>
		
      <link rel="stylesheet" 
         href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
			
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>

      <script>
         $(function() {
            $( "#progressbar" ).progressbar({
               value: 37
            });
         });
      </script>
   </head>
	
   <body>
      <div id="progressbar"></div>
   </body>
</html>

这将产生以下输出-

参考链接

https://www.learnfk.com/jquery/widget-progressbar.html

标签:jQuery,进度条,示例,37,无涯,progressbar,Progressbar
From: https://blog.51cto.com/u_14033984/6899719

相关文章

  • 无涯教程-jQuery - Menu组件函数
    小部件菜单功能可与JqueryUI中的小部件一起使用。一个简单的菜单显示项目列表。Menu-语法$("#menu").menu();Menu-示例以下是显示菜单用法的简单示例-<!doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>jQueryUIM......
  • 无涯教程-jQuery - Dialog组件函数
    小部件对话框函数可与JqueryUI中的小部件一起使用。对话框是在HTML页面上显示信息的一种不错的方法。对话框是一个带有标题和内容区域的浮动窗口。此窗口可以移动,调整大小,并且默认情况下可以使用"X"图标关闭。Dialog-语法$("#dialog").dialog();Dialog-示例以下是显示......
  • 无涯教程-jQuery - Datepicker组件函数
    WidgetDatePicker函数可与JqueryUI中的窗口小部件一起使用。重点放在输入上,以小巧的方式打开交互式日历。Datepicker-语法$("#datepicker").datepicker();Datepicker-示例以下是显示DatePicker用法的简单示例-<!doctypehtml><htmllang="en"><head><m......
  • 无涯教程-jQuery - Accordion组件函数
    小部件手风琴功能可与JqueryUI中的小部件一起使用。手风琴与Tabs相同,当用户单击标题以展开分成逻辑部分的内容时,Accordion与Tabs相同。Accordion-语法这是使用手风琴的简单语法-$(function(){$("#accordion").accordion();});Accordion-示例以下是显示手风琴用......
  • 无涯教程-jQuery - Sortable排序函数
    能够排序功能可与JqueryUI中的交互配合使用。此功能可在任何DOM元素上启用可排序功能。单击并将其拖动到列表中的新位置,其他项将调整以适合。默认情况下,可排序项目共享可拖动属性。Sortable-语法$(function(){$("#sortable").sortable();$("#sortable").disabl......
  • 无涯教程-jQuery - Resizeable调整大小函数
    能够调整大小功能可与JqueryUI中的交互配合使用。可以在任何DOM元素上启用"调整大小功能"功能。使用光标抓住右边框或底边框并拖动到所需的宽度或高度。Resizeable-语法$("#resizable").resizable();Resizeable-示例以下是显示可调整大小的用法的简单示例-<!doctype......
  • 无涯教程-jQuery - Dropable移动函数
    Drop-able功能可与JqueryUI中的交互一起使用。此功能可在任何DOM元素上启用可放置功能。Dropable-语法$("#droppable").droppable();Dropable-示例以下是一个简单的示例,显示了drop-able的用法-<html><head><title>ThejQueryExample</title><s......
  • 无涯教程-jQuery - Transfer方法函数
    Transfer效果可以与effect()方法一起使用。这会将元素的轮廓转移到另一个元素。尝试可视化两个元素之间的交互时非常有用。Transfer-语法selector.effect("transfer",{arguments},speed);这是所有参数的描述-className  - 传输元素将收到的可选类名。to  ......
  • 无涯教程-jQuery - Slide方法函数
    幻灯片效果可以与show/hide/toggle一起使用。这会将元素滑出视口。Slide-语法selector.hide|show|toggle("slide",{arguments},speed);这是所有参数的描述-direction -效果的方向。可以是"左(left)","右(right)","上(up)","下(down)"。默认值:left。distance  -......
  • 无涯教程-jQuery - Scale方法函数
    Scale效果可以与show/hide/toggle一起使用。这会使元素缩小或增长一个百分比因子。Scale-语法selector.hide|show|toggle("scale",{arguments},speed);这是所有参数的描述-direction        -方向。可以是"both","垂直(vertical)"或"horizontal"。......