jQueryUI——控件的使用

最新推荐文章于 2023-11-17 19:41:30 发布

来一杯java压压惊

最新推荐文章于 2023-11-17 19:41:30 发布

阅读量341

点赞数

分类专栏：前端 # jQuery

本文链接：https://blog.csdn.net/ShiZaolin/article/details/104419336

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

jQueryUI是一个定制好界面样式的一个js框架,依赖jquery.js文件。
jQueryUI包含了许多维持状态的小部件，因此，它与典型的jQuery插件使用模式略有不同。所有的jQueryUI小部件使用相同的模式，所以，只要学会使用一个，就知道如何使用其他小部件。
jQueryUI只要分为三个部分：交互，微件和效果库。
教程参考:
http://www.jqueryui.org.cn/tutorial/27.html
http://www.runoob.com/jqueryui/jqueryui-tutorial.html

jQueryUI使用步骤

1.只需在官网http://jqueryui.com上下载jQuery文件解压
2.把解压的文件导入到项目中即可
3.在使用的HTML中导入js和css文件

日期控件datapicker的使用

<head>
<link rel="stylesheet" href="./js/jqueryui/jquqery-ui.css">
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="./js/jqueryui/jquery-ui.js"></script>
<scirpt type="text/javascript">
$(function(){
//给birthday绑定日期控件
/*
年份两个y就可以了，不用四个y
月份：MM是英文月份，mm是数字月份
*/
$('#birthday').datepick
</script>
</head>
<body>
生日:<input type="text" name="birthday" id="birthday">
</body>

对话框控件的使用

最原始的对话框，没有确认和取消按钮

<head>
<link rel="stylesheet" href="./js/jqueryui/jquqery-ui.css">
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="./js/jqueryui/jquery-ui.js"></script>
<scirpt type="text/javascript">
$(function(){
//一开始不显示对话框
//添加按钮参数
var params={button:[
									{text:'确定',click:function(){
																				console.log('确定');
																				//执行某些操作
																							//localhost.href='${pageContext.requext.contextPath}/DeleteBookById?id='+id;
																				}},
									{text:'取消',click:function(){
																				console.log('取消');
																				$('#dialog').dialog('close');
																				}}
					]};
//1.给div绑定对话框
$('#dialog').dialog();
//2.关闭
$('#dialog').dialog('close');
$('#delete').click(function(){
//给div绑定对话框
//打开对话框
$('#dialog').dialog();
});
});
</script>
</head>
<body>
<div id="dialog" title="基本的对话框">
<p>这是一个默认的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可以通过‘x’图标关闭。</p>
</div>
<button id="delete">删除</button>
</body>

来一杯java压压惊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQueryUI——控件的使用

jQueryUI是一个定制好界面样式的一个js框架,依赖jquery.js文件。jQueryUI包含了许多维持状态的小部件，因此，它与典型的jQuery插件使用模式略有不同。所有的jQueryUI小部件使用相同的模式，所以，只要学会使用一个，就知道如何使用其他小部件。jQueryUI只要分为三个部分：交互，微件和效果库。教程参考:http://www.jqueryui.org.cn/tut...
复制链接

扫一扫