【jQuery】jQuery官方基本教程的学习笔记8-界面库jQuery UI

高和通

2023-12-01

一、Getting Started with jQuery UI

http://jqueryui.com/demos/——UI Demos

1.Build Your Custom jQuery UI Download 构建jQuery UI

1）下载自己需要的组件http://jqueryui.com/download/

2）选择主题

3）选择jQuery UI版本

4）点击下载

2.Basic Overview：在页面上使用jQuery UI

需要引用下载的ui文件库

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>

完整小示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI</title>
	<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.min.css">
</head>

<body>
<input type="text" name="date" id="date">
</body>
<script src="jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script>
	$("#date").datepicker();
</script>
</html>

3.jQuery UI Basics：Using options使用选项配置

使用一个或多个选项改变默认配置：

$( "#mySliderDiv" ).slider({
    orientation: "vertical",
    min: 0,
    max: 150,
    value: 50
});

API ：http://jqueryui.com/demos/

4.Visual Customization:Desiging a jQuery UI Theme 定制自己的主题

二、How jQuery UI Works

1.initialization初始化

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

2.Methods 使用方法改变默认值或初始值

$( "#elem" ).progressbar( "value" );
$( "#elem" ).progressbar( "value", 40 );
$( "#elem" )
    .progressbar( "value", 90 )
    .addClass( "almost-done" );

3.Common Methods公共方法

1）option

把"option"设置为第一个参数

$( "#elem" ).progressbar( "option", "value", 30 );//设置当前选项
$( "#elem" ).progressbar( "option", "value" );//获取当前选项
$( "#elem" ).progressbar( "option", {//改变多个选项
    value: 100,
    disabled: true
});

2）disable

$( "#elem" ).progressbar( "disable" );

3）enable

$( "#elem" ).progressbar( "enable" );

4）destroy

$( "#elem" ).progressbar( "destroy" );

5）widget

$( "#elem" ).progressbar( "widget" );

4.Events事件绑定

$( "#elem" ).bind( "progressbarchange", function() {
    alert( "The value has changed!" );
});

$( "#elem" ).progressbar({
    change: function() {
        alert( "The value has changed!" );
    }
});

三、Theming jQuery UI

jQuery UI CSS Framework====http://api.jqueryui.com/theming/css-framework/

1.Download a ThemeRoller theme

2.Modify the CSS files

3.Write completely custom CSS

四、Widget Factory