/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. <!--
  8. body {
  9. font-family: "微软雅黑", Tahoma, Verdana;
  10. font-size: 12px;
  11. font-weight: normal;
  12. margin: 50px 10px;
  13. }
  14. span, label, p, input {
  15. font-family: "微软雅黑", Tahoma, Verdana;
  16. font-size: 12px;
  17. font-weight: normal;
  18. }
  19. form {
  20. margin: 0;
  21. padding: 0;
  22. }
  23. ul {
  24. margin: 0;
  25. }
  26. h1 {
  27. font-family: "微软雅黑", Tahoma, Verdana;
  28. font-size: 16px;
  29. font-weight: bold;
  30. }
  31. h2 {
  32. font-family: "微软雅黑", Tahoma, Verdana;
  33. font-size: 14px;
  34. font-weight: bold;
  35. }
  36. div.effect {
  37. border: 1px dotted #3C78B5;
  38. background-color: #D8E4F1;
  39. padding: 10px;
  40. width: 98%;
  41. }
  42. div.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>2kimsoft-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>5Apache 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>6License:</h1>
  166. <ul>
  167. <li>基于 Apache license 2.0商业友好可免费使用自由修改传播但请保留版权信息</li>
  168. </ul>
  169. </form>
  170. <script type="text/javascript"><!--
  171. google_ad_client = "pub-4212279479115850";
  172. /* 728x90, 创建于 08-12-23 */
  173. google_ad_slot = "7934960061";
  174. google_ad_width = 728;
  175. google_ad_height = 90;
  176. //-->
  177. </script>
  178. <script type="text/javascript"
  179. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  180. </script>
  181. </body>
  182. </html>