知问前端——日历UI(二)
datapicker外观选项
| 属性 | 默认值/类型 | 说明 |
| disabled | false/布尔值 | 禁用日历 |
| numberOfMonths | 1/数值 | 日历中同时显示的月份个数。默认为1，如果设置3就同时显示3个月份。也可以设置数组：[3,2]，3行2列共6个 |
| showOtherMonths | false/布尔值 | 如果设置为true，当月中没有使用的单元格会显示填充， 但无法使用。默认为false，会隐藏无法使用的单元格 |
| selectOtherMonths | false/布尔值 | 如果设置为true，表示可以选择上个月或下个月的日期。前提是showOtherMonths设置为true |
| changeMonth | false/布尔值 | 如果设置为true，显示快速选择月份的下拉列表 |
| changeYear | false/布尔值 | 如果设置为true，显示快速选择年份的下拉列表 |
| isRTL | false/布尔值 | 是否由右向左绘制日历 |
| autoSize | false/布尔值 | 是否自动调整控件大小， 以适应当前的日期格式的输入 |
| showOn | 'focus'/字符串 | 默认值为focus，获取焦点触发，还有button点击按钮触发和both任一事件发生时触发 |
| buttonText | '...'/字符串 | 触发按钮上显示的文本 |
| buttonImage | 无/字符串 | 图片按钮地址 |
| buttonImageOnly | false/布尔值 | 设置为true则会使图片代替按钮 |
| showButtonPanel | false/布尔值 | 开启显示按钮面板 |
| closeText | 'done'/字符串 | 设置关闭按钮的文本 |
| currentText | 'Today'/字符串 | 设置获取今日日期的按钮文本 |
| nextText | 'Next'/字符串 | 设置下一月的alt文本 |
| prevText | 'Prev'/字符串 | 设置上一月的alt文本 |
| navigationAsDateFormat | false/布尔值 | 设置prev、next和current的文字可以是format的日期格式 |
| yearSuffix | 无/字符串 | 附加在年份后面的文本 |
| showMonthAfterYear | false/布尔值 | 设置为true，则将月份放置在年份之后 |
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知问前端</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<div class="header_main">
<h1>知问</h1>
<div class="header_search">
<input type="text" name="search" class="search" />
</div>
<div class="header_button">
<button id="search_button">查询</button>
</div>
<div class="header_member">
<a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>
</div>
</div>
</div> <div id="reg" title="会员注册">
<p>
<label for="user">账号：</label>
<input type="text" name="user" class="text" id="user" title="请输入账号，不少于2位！"></input>
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="password" name="pass" class="text" id="pass" title="请输入密码，不少于6位！"></input>
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" class="text" id="email" title="请输入正确的邮箱！"></input>
<span class="star">*</span>
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input>
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input>
</p>
<p>
<label for="date">生日：</label>
<input type="text" name="date" readonly="readonly" class="text" id="date"></input>
</p>
</div> </body>
</html>
style.css：
body {
margin: 40px 0 0 0;
padding:;
font-size: 12px;
font-family: 宋体;
background: #fff;
}
/* 更改jQuery UI主题的对话框header的背景 */
.ui-widget-header {
background: url(img/ui_header_bg.png);
}
/* 按钮正常状态的背景 */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background:url(img/ui_header_bg.png);
}
/* 按钮点击状态的背景 */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background:url(img/ui_white.png);
}
/* 工具提示的文本颜色 */
.ui-tooltip {
color: #666;
}
/* 邮箱自动补全的悬停背景色 */
.ui-menu .ui-state-focus {
background:url(img/ui_header_bg.png);
}
.ui-menu {
color: #666;
}
/* 日历UI的今天单元格样式 */
.ui-datepicker-today .ui-state-highlight {
border:1px solid #eee;
color:#f60;
}
/* 日历UI的选定单元格样式 */
.ui-datepicker-current-day .ui-state-active {
border:1px solid #eee;
color:#06f;
}
#header {
width: 100%;
height: 40px;
background: url(img/header_bg.png);
position: absolute;
top:;
}
#header .header_main {
width: 800px;
height: 40px;
margin: 0 auto;
}
#header .header_main h1 {
font-size: 20px;
margin:;
padding:;
color: #666;
line-height: 40px;
float: left;
padding: 0 10px;
}
#header .header_search {
padding: 6px 0 0 0;
float: left;
}
#header .header_search .search {
width: 300px;
height: 24px;
border: 1px solid #ccc;
background: #fff;
color: #666;
font-size: 14px;
text-indent: 5px;
}
#header .header_button {
padding: 5px;
float: left;
}
#header .header_member {
float: right;
line-height: 40px;
color: #555;
font-size: 14px;
}
#header .header_member a {
text-decoration: none;
font-size: 14px;
color: #555;
}
#reg {
padding: 15px 0 0 15px;
}
#reg p {
margin: 10px 0;
padding:;
}
#reg p label {
font-size: 14px;
color: #666;
}
#reg .star {
font-size: 14px;
color: red;
}
#reg .text {
border-radius: 4px;
border: 1px solid #ccc;
background: #fff;
width: 200px;
height: 25px;
line-height: 25px;
text-indent: 5px;
font-size: 13px;
color: #666;
}
jQuery代码：
$("#date").datepicker({
dateFormat:"yy-mm-dd",
//dayNames:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
//dayNamesShort:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesMin:['日','一','二','三','四','五','六'],
monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
//appendText:"日历",
showWeek:true,
weekHeader:"周",
firstDay:1,
//disabled:true,
//numberOfMonths:3,
//numberOfMonths:[3,2],
showOtherMonths:true,
selectOtherMonths:true,
changeMonth:true,
changeYear:true,
//isRTL:true,
});
现在来测试autoSize属性，若style.css如下：
body {
margin: 40px 0 0 0;
padding:;
font-size: 12px;
font-family: 宋体;
background: #fff;
}
/* 更改jQuery UI主题的对话框header的背景 */
.ui-widget-header {
background: url(img/ui_header_bg.png);
}
/* 按钮正常状态的背景 */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background:url(img/ui_header_bg.png);
}
/* 按钮点击状态的背景 */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background:url(img/ui_white.png);
}
/* 工具提示的文本颜色 */
.ui-tooltip {
color: #666;
}
/* 邮箱自动补全的悬停背景色 */
.ui-menu .ui-state-focus {
background:url(img/ui_header_bg.png);
}
.ui-menu {
color: #666;
}
/* 日历UI的今天单元格样式 */
.ui-datepicker-today .ui-state-highlight {
border:1px solid #eee;
color:#f60;
}
/* 日历UI的选定单元格样式 */
.ui-datepicker-current-day .ui-state-active {
border:1px solid #eee;
color:#06f;
}
#header {
width: 100%;
height: 40px;
background: url(img/header_bg.png);
position: absolute;
top:;
}
#header .header_main {
width: 800px;
height: 40px;
margin: 0 auto;
}
#header .header_main h1 {
font-size: 20px;
margin:;
padding:;
color: #666;
line-height: 40px;
float: left;
padding: 0 10px;
}
#header .header_search {
padding: 6px 0 0 0;
float: left;
}
#header .header_search .search {
width: 300px;
height: 24px;
border: 1px solid #ccc;
background: #fff;
color: #666;
font-size: 14px;
text-indent: 5px;
}
#header .header_button {
padding: 5px;
float: left;
}
#header .header_member {
float: right;
line-height: 40px;
color: #555;
font-size: 14px;
}
#header .header_member a {
text-decoration: none;
font-size: 14px;
color: #555;
}
#reg {
padding: 15px 0 0 15px;
}
#reg p {
margin: 10px 0;
padding:;
}
#reg p label {
font-size: 14px;
color: #666;
}
#reg .star {
font-size: 14px;
color: red;
}
/*
#reg .text {
border-radius: 4px;
border: 1px solid #ccc;
background: #fff;
width: 200px;
height: 25px;
line-height: 25px;
text-indent: 5px;
font-size: 13px;
color: #666;
}
*/
jQuery代码：
$("#date").datepicker({
autoSize:true, //是否自动调整控件大小，以适应当前的日期格式的输入
});
再来看剩余的属性：
$("#date").datepicker({
showOn:"button",
buttonText:"日历",
buttonImage:"img/calendar.gif",
buttonImageOnly:true,
showButtonPanel:true,
closeText:"关闭",
currentText:"今天dd",
nextText:"下个月mm",
prevText:"上个月mm",
navigationAsDateFormat:true, //设置prev、next和current的文字可以是format的日期格式
yearSuffix:"年",
showMonthAfterYear:true
});
知问前端——日历UI(二)的更多相关文章
- 第一百八十二节，jQuery-UI，知问前端--日历 UI
jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...
- 知问前端——日历UI(一)
日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...
- 知问前端——日历UI(三)
datepicker日期选择选项 属性 默认值/类型 说明 minDate 无/对象.字符串或数值 日历中可以选择的最小日期 maxDate 无/对象.字符串或数值 日历中可以选择的最大日期 defa ...
- 知问前端——对话框UI(二)
dialog()方法的事件 除了属性设置外,dialog()方法也提供了大量的事件,这些事件可以给各种不同状态时的对话框提供回调函数,这些回调函数中的this值等于对话框内容的div对象,不是整个对话 ...
- 第一百七十八节，jQuery-UI，知问前端--对话框 UI
jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...
- 知问前端——对话框UI(一)
对话框(dialog),是jQuery UI非常重要的一个功能.它彻底的代替了JavaScript的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 开启多个dialog 我们 ...
- 知问前端——工具提示UI
工具提示(tooltip),是一个非常实用的UI.它彻底扩展了HTML中的title属性,让提示更加丰富,更加可控制,全面提升了用户体验. 调用tooltip()方法 在调用tooltip()方法之前 ...
- 知问前端——按钮UI
按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单可以设置按钮或文本,还可以设置单选按钮和多选按钮. 使用button按钮 使用button按钮UI的时候,不一定必须是 ...
- 第一百七十九节，jQuery-UI，知问前端--按钮 UI-图标
jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...
随机推荐
- 【Consul】关于健康检查的一点思考
健康检查是Consul提供的一项主要功能,其配置格式如下: { "check": { "id": "redis", "name&q ...
- 「日常训练」 神、上帝以及老天爷 （HDU 2048）
题意 数论中的错排问题.记错排为Dn" role="presentation">DnDn,求Dnn!" role="presentation&q ...
- C++学习005-循环
C++在循环方面,感觉个C没有身边么区别 while循环 for循环 do while循环 其实 使用Goto也可以写个循环 编写环境vs2015 1. while循环 int main() { in ...
- java---解析XML文件，通过反射动态将XML内容封装到一个类中
本博客讲的XML解析,使用的是dom4j. 首先建立一个maven项目,在dom.xml中引入相应的dom4j的版本.作者下载的是热度很高的1.6.1版本.maven的使用在这里不做详细讲解. 引入成 ...
- Python 3基础教程26-多行打印
本文来介绍多行打印.多行打印一般出现在欢迎界面,例如你玩过的游戏,第一个界面,很多文字显示. 我们随便打印几行,来模拟下这种多行打印情况. # 多行打印 print(''' 第一行内容 第二行内容 第 ...
- Python 3基础教程20-Python中导入模块和包
本文介绍Python中导入模块和包 #目录: # 导入模块和包--- # | # 上级包.上级模块.导入模块和包的init模块----- # | # 同级包.同级模块.上级包的init模块.test模 ...
- json格式化显示样式js代码分享
最近开发中需要在页面展示json.特整理了下代码,送给大家,希望能帮到有同样需求的朋友们. 代码: <html> <script src="http://cdn.bootc ...
- BZOJ 4408 FJOI2016 神秘数 可持久化线段树
Description 一个可重复数字集合S的神秘数定义为最小的不能被S的子集的和表示的正整数.例如S={1,1,1,4,13},1 = 12 = 1+13 = 1+1+14 = 45 = 4+16 ...
- Java——异常博客作业
本次任务地址 6. 为如下代码加上异常处理 6.1 改正代码,并增加如下功能.当找不到文件时,需提示用户找不到文件xxx,请重新输入文件名,然后尝试重新打开. 如果是其他异常则提示打开或读取文件失败! ...
- lintcode-115-不同的路径 II
115-不同的路径 II "不同的路径" 的跟进问题: 现在考虑网格中有障碍物,那样将会有多少条不同的路径? 网格中的障碍和空位置分别用 1 和 0 来表示. 注意事项 m 和 n ...