forked from johnnyzheng/MonthPicker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample.html
118 lines (115 loc) · 2.87 KB
/
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>MonthPicker Demo</title>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./monthPicker.js"></script>
<link rel="stylesheet" type="text/css" href="./monthPicker.css"/>
<style type="text/css">
::selection {
background-color: #E13300;
color: white;
}
::moz-selection {
background-color: #E13300;
color: white;
}
::webkit-selection {
background-color: #E13300;
color: white;
}
body {
background-color: #fff;
margin: 40px;
font: 12px /20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
}
a {
color: #003399;
background-color: transparent;
font-weight: normal;
}
input {
color: #333333;
font: 12px /1.5 Tahoma, Helvetica, 'SimSun', sans-serif;
}
code {
font-family: Consolas, Monaco, Courier New, Courier, monospace;
font-size: 12px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}
h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 19px;
font-weight: normal;
margin: 0 0 14px 0;
padding: 14px 15px 10px 15px;
}
.wrapper {
margin: 0 15px 0 15px;
}
</style>
</head>
<body bgcolor="white" text="black">
<h1>MonthPicker Demo</h1>
<div class="wrapper">
<!-- monthPicker demo1 :start -->
<h4>一、月份选择：</h4>
<!-- 这个区域的面板触发结构完全交由业务系统自己来定义 -->
<div class="ta_date" id="div_month_picker">
<span class="date_title" id="month_picker"></span>
<a class="opt_sel" id="month_trigger" href="javascript:void(0);">
<i class="i_orderd" id="month_ico"></i>
</a>
</div>
<a id="user_trigger" href="#">触发器</a>
<br/>
<script type="text/javascript">
monthPicker.create('month_picker', {
trigger : ['month_trigger', 'month_ico', 'user_trigger'],
autoCommit : true,
defaultMonth : '201510',
all_month_valid : true,
callback : function(obj){
//设置回调句柄,obj是当前已经选择的时间对象
}
});
</script>
<br/>
<p>
示例代码：(更多参数，参见用户手册)
</p>
<code>
<script type="text/javascript">
<br/>
monthPicker.create('month_picker', {
<br/>
trigger : ['month_trigger', 'month_ico', 'user_trigger'],
<br/>
autoCommit : true,
<br/>
defaultMonth : '201510',
<br/>
callback : function(obj) {
<br/>
//设置回调句柄
<br/>
}
<br/>
});
<br/>
</script>
<br/>
</code>
<!-- monthPicker demo1 :end -->
</div>
</body>
</html>