jQuery UI 定制
warning:
这篇文章距离上次修改已过189天，其中的内容可能已经有所变动。
为了定制jQuery UI组件，你需要覆盖默认的CSS样式。以下是一个简单的例子，展示了如何通过CSS覆盖jQuery UI DatePicker的默认样式。
假设你想更改日期选择器的背景颜色和文本颜色，你可以在你的CSS文件中添加以下规则：
/* 覆盖 jQuery UI DatePicker 的默认背景颜色 */
.ui-datepicker { background-color: #f0f0f0; }
/* 覆盖 jQuery UI DatePicker 的默认文本颜色 */
.ui-datepicker-calendar .ui-state-default { color: #333; }然后，确保你的HTML页面包含了这些样式和jQuery UI DatePicker的脚本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery UI DatePicker Customization</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
/* 自定义样式 */
.ui-datepicker { background-color: #f0f0f0; }
.ui-datepicker-calendar .ui-state-default { color: #333; }
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</body>
</html>在这个例子中，我们使用了jQuery UI的默认主题，并在<style>标签中添加了自定义的CSS规则。这将覆盖默认的jQuery UI样式，使日期选择器具有不同的外观。
评论已关闭