PageRenderTime 39ms CodeModel.GetById 21ms app.highlight 13ms RepoModel.GetById 1ms app.codeStats 0ms

/help.html

http://kimsoft-jscalendar.googlecode.com/
HTML | 182 lines | 128 code | 0 blank | 54 comment | 0 complexity | dc7ae42c815362510e62add27ed248cf MD5 | raw file
  1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2<html xmlns="http://www.w3.org/1999/xhtml">
  3<head>
  4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5<title>kimosft-jscalendar 开发文档</title>
  6<style type="text/css">
  7<!--
  8body {
  9	font-family: "微软雅黑", Tahoma, Verdana;
 10	font-size: 12px;
 11	font-weight: normal;
 12	margin: 50px 10px;
 13}
 14span, label, p, input {
 15	font-family: "微软雅黑", Tahoma, Verdana;
 16	font-size: 12px;
 17	font-weight: normal;
 18}
 19form {
 20	margin: 0;
 21	padding: 0;
 22}
 23ul {
 24	margin: 0;
 25}
 26h1 {
 27	font-family: "微软雅黑", Tahoma, Verdana;
 28	font-size: 16px;
 29	font-weight: bold;
 30}
 31h2 {
 32	font-family: "微软雅黑", Tahoma, Verdana;
 33	font-size: 14px;
 34	font-weight: bold;
 35}
 36div.effect {
 37	border: 1px dotted #3C78B5;
 38	background-color: #D8E4F1;
 39	padding: 10px;
 40	width: 98%;
 41}
 42div.source {
 43	border: 1px solid #CCC;/*#090*/
 44	background-color: #F5F5F5;/*#DFD*/
 45	padding: 10px;
 46	width: 98%;
 47}
 48.color_red {
 49	color:#FF0000;
 50}
 51.b {
 52	font-weight: bold;
 53}
 54-->
 55</style>
 56</head>
 57<body>
 58<script type="text/javascript" src="calendar.js"></script>
 59<form id="form1" name="form1" method="post" action="">
 60  <h1>1、什么是 kimsoft-jscalendar ?</h1>
 61  <ul>
 62    <li>一个简洁的avaScript日历控件,可在Java Web 项目,.NET Web 项目中使用</li>
 63  </ul>
 64  <h1>2、kimsoft-jscalendar 有什么特点?</h1>
 65  <ul>
 66    <li>1、小巧,单文件 </li>
 67    <li>2、支持多语言,并可自由扩充(目前支持简体中文,繁体中文,英语美国和英语英国)</li>
 68    <li> 3、兼容ie6.0+, firefox1.0+, Opera9,其它浏览器未测试</li>
 69    <li>4、回显选定的时间,这是很多其它日历控件没有的 </li>
 70    <li>5、Apache license 2.0,商业友好。可免费使用,自由修改传播,但请保留版权信息</li>
 71    <li>6、用 iframe 解决 IE 中层在 select 控件上显示的问题</li>
 72    <li>7、其它特点有待发现...</li>
 73  </ul>
 74  <h1>3、版本:</h1>
 75  <ul>
 76    <li>V20081226(加了日文版本,感谢网友 yangyuqi[at]gmail.com 提供的日文翻译)</li>
 77    <li>V20080409(制作了此帮助文档) <a href="http://code.google.com/p/kimsoft-jscalendar/downloads/list" target="_blank">下载</a></li>
 78    <li>V20080322(第一次在Google Code上发布)</li>
 79  </ul>
 80  <h1>4、使用说明:</h1>
 81  <h2>4.1、将 js 文件导入到页面中(可以是 html, jsp, asp, aspx, php)等。</h2>
 82  <div class="source">&lt;script type=&quot;text/javascript&quot; src=&quot;calendar.js&quot;&gt;&lt;/script&gt;</div>
 83  <br />
 84  注意以下点:
 85  <ul>
 86    <li>&nbsp;calendar.js 文件内容编写是UTF-8,请一定要将此文件的编码设置为UTF-8</li>
 87    <li>&nbsp;上面的代码内容<span class="color_red b">一定要放在HTML的&lt;body&gt;&lt;/body&gt;之间</span>,特别是在符合XHTML规范的文档中</li>
 88    <li>包含此文件后,此页面已经自动实例化了一个日历对象 calendar,现在就可以使用了</li>
 89  </ul>
 90  <h2>4.2、一个最简单的例子<br />
 91  </h2>
 92  <div class="source">用预定义的 calendar 对象生成日历代码:&lt;input name=&quot;date&quot; type=&quot;text&quot; id=&quot;date&quot; onclick=<strong>&quot;calendar.show(this);</strong>&quot; size=&quot;10&quot; maxlength=&quot;10&quot; readonly=&quot;readonly&quot; /&gt;<br />
 93  </div>
 94  <br />
 95  <div class="effect">效果:
 96    <input name="date" type="text" id="date" onclick="calendar.show(this);" size="10" maxlength="10" readonly="readonly" />
 97  </div>
 98  <br />
 99  当然也可以这样:<br />
100  </p>
101  <div class="source">new 一个新的日历对象并生成日历代码:&lt;input name=&quot;date&quot; type=&quot;text&quot; id=&quot;date&quot; onclick=<strong>&quot;new Calendar().show(this);</strong>&quot; size=&quot;10&quot; maxlength=&quot;10&quot; readonly=&quot;readonly &quot;/&gt;<br />
102  </div>
103  <br />
104  <div class="effect">效果:
105    <input name="date2" type="text" id="date2" onclick="new Calendar().show(this);" size="10" maxlength="10" readonly="readonly" />
106  </div>
107  <br />
108  <h2>4.3、指定开始年份和结束年份的日历<br />
109  </h2>
110  <div class="source"> 指定开始年份和结束年份的日历代码:&lt;input name=&quot;range_date&quot; type=&quot;text&quot; id=&quot;range_date&quot; onclick=&quot;new Calendar(2000, 2008).show(this);&quot; size=&quot;10&quot; maxlength=&quot;10&quot; readonly=&quot;readonly&quot; /&gt;<br />
111  </div>
112  <br />
113  <div class="effect"> 只能选择 2000 到 2008年间的日期:
114    <input name="range_date" type="text" id="range_date" onclick="new Calendar(2000, 2008).show(this);" size="10" maxlength="10" readonly="readonly" />
115  </div>
116  <h2>4.4、多语言版本支持(可自由扩充),目前支持的语言:0(zh_cn)|1(en_us)|2(en_en)|3(zh_tw)</h2>
117  <div class="source"> 中文日历代码:    &lt;input name=&quot;cn_date&quot; type=&quot;text&quot; id=&quot;cn_date&quot; onclick=&quot;new Calendar().show(this);&quot; size=&quot;10&quot; maxlength=&quot;10&quot; readonly=&quot;readonly&quot; /&gt;<br />
118  </div>
119  <br />
120  <div class="effect">中文日历效果:
121    <input name="cn_date" type="text" id="cn_date" onclick="new Calendar().show(this);" size="10" maxlength="10" readonly="readonly"/>
122  </div>
123  <br />
124  <div class="source"> 繁体中文日历代码:    &lt;input name=&quot;tw_date&quot; type=&quot;text&quot; id=&quot;tw_date&quot; onclick=&quot;new Calendar(null, null, 3).show(this);&quot; size=&quot;10&quot; maxlength=&quot;10&quot; readonly=&quot;readonly&quot; /&gt;<br />
125  </div>
126  <br />
127  <div class="effect">繁体中文日历效果:
128    <input name="tw_date" type="text" id="tw_date" onclick="new Calendar(null, null, 3).show(this);" size="10" maxlength="10" readonly="readonly" />
129    <br />
130  </div>
131  <br />
132  <div class="source"> 英文日历代码:    &lt;input name=&quot;en_date&quot; type=&quot;text&quot; id=&quot;en_date&quot; onclick=&quot;new Calendar(null, null, 1).show(this);&quot; size=&quot;10&quot; maxlength=&quot;10&quot; readonly=&quot;readonly&quot; /&gt;<br />
133  </div>
134  <br />
135  <div class="effect">英文日历效果:
136    <input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 1).show(this);" size="10" maxlength="10" readonly="readonly" />
137  </div>
138  <br />
139  <div class="source"> 日文日历代码:    &lt;input name=&quot;en_date&quot; type=&quot;text&quot; id=&quot;en_date&quot; onclick=&quot;new Calendar(null, null, 4).show(this);&quot; size=&quot;10&quot; maxlength=&quot;10&quot; readonly=&quot;readonly&quot; /&gt;<br />
140  </div>
141  <br />
142  <div class="effect">日文日历效果:
143    <input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 4).show(this);" size="10" maxlength="10" readonly="readonly" />
144    <span style="color:#F00; font-weight: bold;">(感谢网友 yangyuqi[at]gmail.com 提供的日文翻译)</span> </div>
145  <h2>4.5、在一个控件上点击选择,在另外一个控件上显示日期</h2>
146  <div class="source"> 代码:<br />
147    &lt;input name=&quot;control_date&quot; type=&quot;text&quot; id=&quot;control_date&quot;size=&quot;10&quot; maxlength=&quot;10&quot; readonly=&quot;readonly&quot; /&gt;<br />
148    &lt;input type=&quot;button&quot; name=&quot;button&quot; id=&quot;button&quot; value=&quot;选择日期&quot; onclick=&quot;new Calendar().show(this.form.control_date);&quot; /&gt;<br />
149  </div>
150  <br />
151  <div class="effect">效果:
152    <input name="control_date" type="text" id="control_date"size="10" maxlength="10" readonly="readonly" />
153    <label>
154      <input type="button" name="button" id="button" value="选择日期" onclick="new Calendar().show(this.form.control_date);" />
155    </label>
156  </div>
157  <h2>4.6、其它功能</h2>
158  其它功能请参考 calendar.js 源码,里面有详细的注释,本文档源码也是很好的代码资源,有问题请<a href="http://code.google.com/p/kimsoft-jscalendar/issues/list" target="_blank">提交ISSUES</a><br />
159  <h1>5、相关资源:</h1>
160  <ul>
161    <li>Google Code: <a href="http://code.google.com/p/kimsoft-jscalendar/" target="_blank">http://code.google.com/p/kimsoft-jscalendar/</a></li>
162    <li>kimsoft's Blog: <a href="http://blog.csdn.net/kimsoft" target="_blank">http://blog.csdn.net/kimsoft</a></li>
163    <li>kimsoft's Mail: <a href="mailto:jinqinghua@gmail.com">jinqinghua[at]gmail.com</a></li>
164  </ul>
165  <h1>6、License:</h1>
166  <ul>
167    <li>基于 Apache license 2.0,商业友好。可免费使用,自由修改传播,但请保留版权信息</li>
168  </ul>
169</form>
170<script type="text/javascript"><!--
171google_ad_client = "pub-4212279479115850";
172/* 728x90, 创建于 08-12-23 */
173google_ad_slot = "7934960061";
174google_ad_width = 728;
175google_ad_height = 90;
176//-->
177</script>
178<script type="text/javascript"
179src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
180</script>
181</body>
182</html>