/help.html
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"><script type="text/javascript" src="calendar.js"></script></div> 83 <br /> 84 注意以下点： 85 <ul> 86 <li> calendar.js 文件内容编写是UTF-8，请一定要将此文件的编码设置为UTF-8</li> 87 <li> 上面的代码内容<span class="color_red b">一定要放在HTML的<body></body>之间</span>，特别是在符合XHTML规范的文档中</li> 88 <li>包含此文件后，此页面已经自动实例化了一个日历对象 calendar，现在就可以使用了</li> 89 </ul> 90 <h2>4.2、一个最简单的例子<br /> 91 </h2> 92 <div class="source">用预定义的 calendar 对象生成日历代码：<input name="date" type="text" id="date" onclick=<strong>"calendar.show(this);</strong>" size="10" maxlength="10" readonly="readonly" /><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 一个新的日历对象并生成日历代码：<input name="date" type="text" id="date" onclick=<strong>"new Calendar().show(this);</strong>" size="10" maxlength="10" readonly="readonly "/><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"> 指定开始年份和结束年份的日历代码：<input name="range_date" type="text" id="range_date" onclick="new Calendar(2000, 2008).show(this);" size="10" maxlength="10" readonly="readonly" /><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"> 中文日历代码： <input name="cn_date" type="text" id="cn_date" onclick="new Calendar().show(this);" size="10" maxlength="10" readonly="readonly" /><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"> 繁体中文日历代码： <input name="tw_date" type="text" id="tw_date" onclick="new Calendar(null, null, 3).show(this);" size="10" maxlength="10" readonly="readonly" /><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"> 英文日历代码： <input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 1).show(this);" size="10" maxlength="10" readonly="readonly" /><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"> 日文日历代码： <input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 4).show(this);" size="10" maxlength="10" readonly="readonly" /><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 <input name="control_date" type="text" id="control_date"size="10" maxlength="10" readonly="readonly" /><br /> 148 <input type="button" name="button" id="button" value="选择日期" onclick="new Calendar().show(this.form.control_date);" /><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>