当前位置： 代码迷 >> Web前端 >> 几个WEB中惯用的js方法
  详细解决方案

几个WEB中惯用的js方法

热度：298   发布时间：2012-11-08 08:48:12.0
几个WEB中常用的js方法
  1. /**
  2. ? *现应用于http://www.bt285.cn?http://www.5a520.cn?这两个网站j?
  3. ??*@class?DOM工具类，提供了一些方便的函数页面元素的一些操作
  4. ??*@constructor
  5. ??*@return?DomUtils
  6. */
  7. function?DomUtils(){
  8. }
  9. /**
  10. ?*从待选列表移动一项到已经选择列表
  11. ?*@param?{Object}?fbox??-待选项目列表
  12. ?*@param?{Object}?tbox??-选择了的项目列表
  13. ?*@param?{string}?fmsg?-提示信息（待选项目列表无数据...）
  14. ?*@param?{string}?tmsg??-提示信息（请选择数据....）
  15. ?*@version?1.0?适用范围：IE6.0/opera?8.5/firefox1.5
  16. ?*
  17. ?*/
  18. DomUtils.move=function(fbox,tbox,fmsg,tmsg)??{
  19. ????var?id?=0;
  20. ????if(fbox.options.length==0){
  21. ??????alert(fmsg);
  22. ??????return?false;
  23. ????}
  24. ????for(var?i=0;?i<fbox.options.length;?i++)??{
  25. ?????if(fbox.options[i].selected)??{
  26. ?????????id?=?1;
  27. ????????//?增加项目列表到右侧
  28. ????????var?no?=?new?Option();
  29. ????????no.value?=?fbox.options[i].value
  30. ????????no.text?=?fbox.options[i].text
  31. ????????tbox.options[tbox.options.length]?=?no;
  32. ????????//??清空左侧的项目列表
  33. ????????fbox.options[i].value?=?""
  34. ????????fbox.options[i].text?=?""
  35. ?????}
  36. ???}
  37. ???if(id==0){
  38. ???????alert(tmsg);
  39. ???????return?false;
  40. ???}
  41. ???DomUtil.bumpUp(fbox);
  42. }
  43. /**
  44. ?*一般不直接调用该方法，该方法用于
  45. ?*把列表中value属性为""的option清空，其他相应的移上去。
  46. ?*@param?{Object}?box??-列表框对象
  47. ?*@version?1.0?适用范围：IE6.0/opera?8.5/firefox1.5
  48. ?*
  49. ?*/
  50. DomUtils.bumpUp=function(box)??{
  51. ??for(var?i=0;?i<box.options.length;?i++)??{
  52. ?????if(box.options[i].value?==?"")??{
  53. ???????for(var?j=i;?j<box.options.length-1;?j++)??{
  54. ?????????box.options[j].value?=?box.options[j+1].value;
  55. ?????????box.options[j].text?=?box.options[j+1].text;
  56. ???????}
  57. ???????var?ln?=?i;
  58. ???????break
  59. ?????}
  60. ???}
  61. ???if(ln?<?box.options.length)??{
  62. ?????box.options.length?-=?1;
  63. ?????DomUtil.bumpUp(box);
  64. ???}
  65. }
  66. /**
  67. ?*全部移动到已选择列表
  68. ?*@param?{Object}?fbox??-待选项目列表
  69. ?*@param?{Object}?tbox??-选择了的项目列表
  70. ?*@param?{string}?msg??-提示信息（待选项目列表无数据...）
  71. ?*@version?1.0?适用范围：IE6.0/opera?8.5/firefox1.5
  72. ?*
  73. ?*/
  74. DomUtils.moveAll=function(fbox,tbox,msg){
  75. ????if(fbox.options.length==0){
  76. ??????alert(msg);
  77. ??????return?false;
  78. ????}
  79. ????for(var?i=0;?i<fbox.options.length;?i++)??{
  80. ????????//?增加项目列表到右侧
  81. ????????var?no?=?new?Option();
  82. ????????no.value?=?fbox.options[i].value
  83. ????????no.text?=?fbox.options[i].text
  84. ????????tbox.options[tbox.options.length]?=?no;
  85. ????????//??清空左侧的项目列表
  86. ????????fbox.options[i].value?=?""
  87. ????????fbox.options[i].text?=?""
  88. ?????}
  89. ???DomUtil.bumpUp(fbox);
  90. }
  91. /**
  92. ?*子复选框改变父复选框状态,当父复选框对应的子复选框的选中状态改变后父复选框的状态也要跟着变化,在这里我们改变父复选框的background样式。
  93. 当名为b的复选框的被点击时，名为a的复选框的选中状态将会发生相应变化。如b全选中，则a也呈现选中状态，如b不全选，则b的background呈现#949494颜色，如b全不选，则a呈现未选中状态
  94. ?*@param{string}?arentCheck:父复选框的引用,
  95. ?*@param{string}?childCheck:子复选框名
  96. ?*@param{boolean}?isChild:是否是子复选框主动变化了，true表示是，false表示是父复选框变化
  97. ?*@type?无
  98. ?*@returns?无
  99. ?*@version?1.0??适用范围：IE6.0
  100. ?*/
  101. DomUtils.changeCheckbox=function(parentCheckBoxName,childCheckBoxName,isChild){
  102. ????//子checkbox
  103. ????var?childCheckboxs=document.getElementByName(childCheckBoxName);
  104. ????//父checkbox
  105. ????var?parentCheckBox=document.getElementByName(parentCheckBoxName);
  106. ????//如果是父checkbox变化，则让子checkbox状态和父保持一致
  107. ????if(!isChild){
  108. ????????????for?(var?j=0;j<childCheckboxs.length;j++){
  109. ????????????if?(?childCheckboxs[j].type?==?"checkbox"){
  110. ????????????????childCheckboxs[j].checked?=?parentCheckBox[0].checked;
  111. ????????????}
  112. ????????}
  113. ????}
  114. ????
  115. ????//所有子复选框长度
  116. ????var?childNum?=?0;
  117. ????//所有被选复选框长度
  118. ????var?checkedNum?=?0;
  119. ????
  120. ????for?(var?j=0;j<childCheckboxs.length;j++){
  121. ????????if?(childCheckboxs[j].type?==?"checkbox"){
  122. ????????????????childNum++;
  123. ????????????if(childCheckboxs[j].checked){
  124. ????????????????checkedNum++;
  125. ????????????}
  126. ????????}
  127. ????}
  128. ????//一个都没有选中
  129. ????if(checkedNum?==?0){
  130. ????????parentCheckBox[0].checked?=?false;
  131. ????}else?if(childNum?!=?checkedNum){
  132. ????????parentCheckBox[0].checked?=?false;
  133. ????}else?if(childNum?==?checkedNum){
  134. ????????parentCheckBox[0].checked?=?true;
  135. ????}
  136. ????return;
  137. }
  138. /**
  139. ?*
  140. ?*?选择复选框
  141. ?*@param{string}?checkboxname:复选框名字
  142. ?*@param{string?or?array}?targetValue:要设定的值或值数组
  143. ?*@type?无
  144. ?*@returns?无
  145. ?*@version?1.0??适用范围：IE6.0
  146. ?*/
  147. DomUtils.selectCheckbox=function(checkboxname,targetValue){
  148. ?var?objs?=?document.getElementByName(checkboxname);
  149. ??if(objs){
  150. ????var?array=targetValue;
  151. ????if(false==(targetValue?instanceof?Array)){//不是数组,，则转换为数组
  152. ????????array=new?Array();
  153. ????????array.push(targetValue);
  154. ????}
  155. ?
  156. ?????for(var?i=0;i<objs.length;i++){
  157. ????????var?obj=objs[i];
  158. ???????if(existInArray(obj.value)){
  159. ??????????obj.checked=true;
  160. ???????}
  161. ?????}
  162. ??}else{
  163. ????alert('no?checkbox?named?['+checkboxname+']');
  164. ????return?false;
  165. ??}
  166. ??return?true;
  167. }
  168. DomUtils.existInArray=function(array,value){
  169. ?for(var?i=0;i<array.length;i++){
  170. ???if(array[i]==value){
  171. ??????return?true;
  172. ???}
  173. ?}
  174. ?return?false;
  175. }
  176. /**
  177. ?*
  178. ?*?选择单选
  179. ?*@param{string}?radioname:单选名字
  180. ?*@param{string?}?targetValue:要设定的值
  181. ?*@type?无
  182. ?*@returns?无
  183. ?*@version?1.0??适用范围：IE6.0
  184. ?*/
  185. DomUtils.selectRadio=function(radioname,targetValue){
  186. ?var?objs?=?document.getElementByName(radioname);
  187. ??if(objs){
  188. ?????for(var?i=0;i<objs.length;i++){
  189. ????????var?obj=objs[i];
  190. ???????if(obj.value==targetValue){//找到了
  191. ??????????obj.checked=true;
  192. ??????????break;
  193. ???????}
  194. ?????}
  195. ??}else{
  196. ????alert('no?radio?named?['+radioname+']');
  197. ????return?false;
  198. ??}
  199. ??return?true;
  200. }
  201. /**
  202. *
  203. *?选择下拉框中的指定值的元素
  204. ?*?eg:?DomUtils.selectOption('ids',1)
  205. */
  206. DomUtils.selectOption=function(objId,?targetValue){
  207. ??var?obj?=?document.getElementById(objId);
  208. ??if(obj){
  209. ????var?options?=?obj.options;
  210. ????if(options){
  211. ??????var?len?=?options.length;
  212. ??????for(var?i=0;i<len;i++){
  213. ????????if(options[i].value?==?targetValue){
  214. ??????????options[i].defaultSelected?=?true;
  215. ??????????options[i].selected?=?true;
  216. ??????????return?true;
  217. ????????}
  218. ??????}
  219. ????}?else?{
  220. ??????alert('missing?element(s)!');
  221. ????}
  222. ??}?else?{
  223. ????alert('missing?element(s)!');
  224. ??}
  225. }



这几个方法用处在哪里呢？我分别举例说明一下：
??? DomUtils.move这个方法，适用于两个select选择框，比如A和B，要把A和B中的元素相互移动的情况，可能A是待选择的美女，B是你已选择的美女，那么你还想选几个的话，你就可以用DomUtils.move(A,B,'没美女可以选了','你还选美女啊')

??? DomUtils.changeCheckbox，适用于那种全选或者去掉全选的checkbox处理，例如：A是全选checkbox，剩下的全部是同名字的其他checkbox，如果你选择了A，那么其他的checkbox就默认全选，如果你取消了A就默认取消其他全部选项。如果你一个一个的选择了checkbox，当你选择完的时候，A也默认勾选上了。
??
??? DomUtils.selectCheckbox，这个适用于你有一个或者几个值，他们对应都是某个名字组下checkbox的值，自动让他们选中。
?? DomUtils.selectRadio 同上面一样，和制定值相等的radio才选择。

?? DomUtils.selectOption 这个是选择只有指定值的选项。


?一般情况下，我们页面的功能都是增删改查， 当你修改某个页面的时候，你页面中可能会有这些元素出现，那么你可能就得选中某些值，那么用这些工具方法，一句JS代码就搞定了。岂不是很简单！呵呵，欢迎扔砖头！

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.