漂亮的日历插件-Web Calendar
AJAX实例：根据邮编自动完成地址信息

18th

2008,04

表单元素onfous()改变样式

Javascript脚本, Web实例cngothic

表单元素onfous()改变样式 当表单内的文本框获取焦聚时其文件框的样式改变。看这句以为Cngothic当时会以为是在每个表单元素上面加一句JS。如：onfous=”..”.今个在织梦里看到一个不错例子便收录下来.有兴趣的朋友可以看看。

  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" xml:lang="en" lang="en">
  3. <head>
  4. <style type="text/css">
  5. form{
  6. margin: 0px auto;
  7. width: 450px;
  8. border: solid 1px #CCCCCC;
  9. }
  10.  
  11. .bo{
  12. border-bottom: solid 1px #CCCCCC;
  13. }
  14.  
  15. label{
  16. float: left;
  17. padding: 10px 0px 4px 30px;
  18. }
  19.  
  20. input{
  21. padding: 1px;
  22. }
  23.  
  24. input,textarea{
  25. border: 1px solid #CCCCCC;
  26. margin: 5px 0px;
  27. }
  28.  
  29. textarea{
  30. padding: 2px;
  31. }
  32.  
  33. .bt{
  34. width: 38px;
  35. height: 20px;
  36. font-size: 11px;
  37. border: solid 1px #CCCCCC;
  38. background: #FBFBFB;
  39. text-align: center;
  40. }
  41.  
  42. .btcenter{
  43. text-align: center;
  44. clear: left;
  45. padding: 4px 0px 0px;
  46. }
  47.  
  48. .sffocus {
  49. background: #F0F9FB; /*----for IE----*/
  50. border: 1px solid #1D95C7;
  51. }
  52.  
  53. textarea:focus, input:focus {
  54. background: #F0F9FB; /*----for firefox......----*/
  55. border: 1px solid #1D95C7;
  56. }
  57.  
  58. body {
  59. font-family: Arial, Helvetica, sans-serif;
  60. font-size: 12px;
  61. color: #666666;
  62. margin-top: 20px;
  63. }
  64. </style>
  65. <script  type="text/javascript">
  66. function suckerfish(type, tag, parentId) {
  67. if (window.attachEvent) {
  68. window.attachEvent("onload", function() {
  69. var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
  70. type(sfEls);
  71. });
  72. }
  73. }
  74.  
  75. sfHover = function(sfEls) {
  76. for (var i=0; i<sfEls.length; i++) {
  77. sfEls[i].onmouseover=function() {
  78. this.className+=" sfhover";
  79. }
  80. sfEls[i].onmouseout=function() {
  81. this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  82. }
  83. }
  84. }
  85.  
  86. sfFocus = function(sfEls) {
  87. for (var i=0; i<sfEls.length; i++) {
  88. sfEls[i].onfocus=function() {
  89. this.className+=" sffocus";
  90. }
  91. sfEls[i].onblur=function() {
  92. this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
  93. }
  94. }
  95. }
  96.  
  97. sfActive = function(sfEls) {
  98. for (var i=0; i<sfEls.length; i++) {
  99. sfEls[i].onmousedown=function() {
  100. this.className+=" sfactive";
  101. }
  102. sfEls[i].onmouseup=function() {
  103. this.className=this.className.replace(new RegExp(" sfactive\\b"), "");
  104. }
  105. }
  106. }
  107.  
  108. sfTarget = function(sfEls) {
  109. var aEls = document.getElementsByTagName("A");
  110. document.lastTarget = null;
  111. for (var i=0; i<sfEls.length; i++) {
  112. if (sfEls[i].id) {
  113. if (location.hash==("#" + sfEls[i].id)) {
  114. sfEls[i].className+=" sftarget";
  115. document.lastTarget=sfEls[i];
  116. }
  117. for (var j=0; j<aEls.length; j++) {
  118. if (aEls[j].hash==("#" + sfEls[i].id)) aEls[j].targetEl = sfEls[i];
  119. aEls[j].onclick = function() {
  120. if (document.lastTarget) document.lastTarget.className = document.lastTarget.className.replace(new RegExp(" sftarget\\b"), "");
  121. if (this.targetEl) this.targetEl.className+=" sftarget";
  122. document.lastTarget=this.targetEl;
  123. return true;
  124. }
  125. }
  126. }
  127. }
  128. }
  129. suckerfish(sfHover, "p");
  130. suckerfish(sfActive, "p");
  131. suckerfish(sfHover, "INPUT");
  132. suckerfish(sfActive, "TEXTAREA");
  133. suckerfish(sfFocus, "INPUT");
  134. suckerfish(sfFocus, "TEXTAREA");
  135. suckerfish(sfTarget, "H5");
  136. suckerfish(sfHover, "pre");
  137. suckerfish(sfActive, "pre");
  138. </script>
  139. </head>
  140. <body>
  141. <form action="#" method="post" name="myform" id="myform">
  142. <div class="bo">
  143. <label for="name">姓名：</label>
  144. <input type="text"size="20" name="name" id="name" maxlength="10" />
  145. </div>
  146. <div class="bo">
  147. <label for="tel">电话：</label>
  148. <input type="text" size="20" name="tel" id="tel" maxlength="16" />
  149. </div>
  150. <div class="bo">
  151. <label for="mo">主题：</label>
  152. <input type="text" size="30" name="mo" id="mo" maxlength="20" />
  153. </div>
  154. <div class="bo">
  155. <label for="mo">邮件：</label>
  156. <input type="text" size="30" name="email" id="email" maxlength="20" />
  157. </div>
  158. <div class="bo">
  159. <label for="con">内容：</label>
  160. <textarea cols="40" rows="8" name="con" id="con"></textarea>
  161. </div>
  162. <div class="btcenter">
  163. <input type="submit" class="bt" value="Send" />
  164. <input type="reset" class="bt" value="Reset" />
  165. </div>
  166. </form>
  167. </body>
  168. </html>

, ,

Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

Related Post

Leave a reply？