-
-
-
-
-
- function DomUtils(){
- }
-
-
-
-
-
-
-
-
-
- DomUtils.move=function(fbox,tbox,fmsg,tmsg) {
- var id =0;
- if(fbox.options.length==0){
- alert(fmsg);
- return false;
- }
- for(var i=0; i<fbox.options.length; i++) {
- if(fbox.options[i].selected) {
- id = 1;
-
- var no = new Option();
- no.value = fbox.options[i].value
- no.text = fbox.options[i].text
- tbox.options[tbox.options.length] = no;
-
- fbox.options[i].value = ""
- fbox.options[i].text = ""
- }
- }
- if(id==0){
- alert(tmsg);
- return false;
- }
- DomUtil.bumpUp(fbox);
- }
-
-
-
-
-
-
-
- DomUtils.bumpUp=function(box) {
- for(var i=0; i<box.options.length; i++) {
- if(box.options[i].value == "") {
- for(var j=i; j<box.options.length-1; j++) {
- box.options[j].value = box.options[j+1].value;
- box.options[j].text = box.options[j+1].text;
- }
- var ln = i;
- break
- }
- }
- if(ln < box.options.length) {
- box.options.length -= 1;
- DomUtil.bumpUp(box);
- }
- }
-
-
-
-
-
-
-
-
- DomUtils.moveAll=function(fbox,tbox,msg){
- if(fbox.options.length==0){
- alert(msg);
- return false;
- }
- for(var i=0; i<fbox.options.length; i++) {
-
- var no = new Option();
- no.value = fbox.options[i].value
- no.text = fbox.options[i].text
- tbox.options[tbox.options.length] = no;
-
- fbox.options[i].value = ""
- fbox.options[i].text = ""
- }
- DomUtil.bumpUp(fbox);
- }
-
-
-
-
-
-
-
-
-
-
- DomUtils.changeCheckbox=function(parentCheckBoxName,childCheckBoxName,isChild){
-
- var childCheckboxs=document.getElementByName(childCheckBoxName);
-
- var parentCheckBox=document.getElementByName(parentCheckBoxName);
-
- if(!isChild){
- for (var j=0;j<childCheckboxs.length;j++){
- if ( childCheckboxs[j].type == "checkbox"){
- childCheckboxs[j].checked = parentCheckBox[0].checked;
- }
- }
- }
-
-
- var childNum = 0;
-
- var checkedNum = 0;
-
- for (var j=0;j<childCheckboxs.length;j++){
- if (childCheckboxs[j].type == "checkbox"){
- childNum++;
- if(childCheckboxs[j].checked){
- checkedNum++;
- }
- }
- }
-
- if(checkedNum == 0){
- parentCheckBox[0].checked = false;
- }else if(childNum != checkedNum){
- parentCheckBox[0].checked = false;
- }else if(childNum == checkedNum){
- parentCheckBox[0].checked = true;
- }
- return;
- }
-
-
-
-
-
-
-
-
-
- DomUtils.selectCheckbox=function(checkboxname,targetValue){
- var objs = document.getElementByName(checkboxname);
- if(objs){
- var array=targetValue;
- if(false==(targetValue instanceof Array)){
- array=new Array();
- array.push(targetValue);
- }
-
- for(var i=0;i<objs.length;i++){
- var obj=objs[i];
- if(existInArray(obj.value)){
- obj.checked=true;
- }
- }
- }else{
- alert('no checkbox named ['+checkboxname+']');
- return false;
- }
- return true;
- }
- DomUtils.existInArray=function(array,value){
- for(var i=0;i<array.length;i++){
- if(array[i]==value){
- return true;
- }
- }
- return false;
- }
-
-
-
-
-
-
-
-
-
- DomUtils.selectRadio=function(radioname,targetValue){
- var objs = document.getElementByName(radioname);
- if(objs){
- for(var i=0;i<objs.length;i++){
- var obj=objs[i];
- if(obj.value==targetValue){
- obj.checked=true;
- break;
- }
- }
- }else{
- alert('no radio named ['+radioname+']');
- return false;
- }
- return true;
- }
-
-
-
-
-
- DomUtils.selectOption=function(objId, targetValue){
- var obj = document.getElementById(objId);
- if(obj){
- var options = obj.options;
- if(options){
- var len = options.length;
- for(var i=0;i<len;i++){
- if(options[i].value == targetValue){
- options[i].defaultSelected = true;
- options[i].selected = true;
- return true;
- }
- }
- } else {
- alert('missing element(s)!');
- }
- } else {
- alert('missing element(s)!');
- }
- }
这几个方法用处在哪里呢?我分别举例说明一下:
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代码就搞定了。岂不是很简单!呵呵,欢迎扔砖头!
分享到:
相关推荐
### Web开发中几种常用的JS验证方法 在Web开发过程中,前端数据验证是非常重要的一个环节,它不仅能够提高用户体验,还能有效减轻后端服务器的压力。本文将详细介绍两种取得页面控件值的方法以及一种常用的验证方法...
本压缩包中的"几个比较常用的JS"包含了几个在实际开发中经常使用的JS代码片段或库,这些工具能够帮助开发者提高效率,实现各种功能。 1. DOM操作: JavaScript的核心之一就是Document Object Model(DOM) API,...
WebCalendar控件的基本结构通常包括以下几个部分: 1. **初始化**:在网页加载完成后,通过调用特定的JavaScript函数来初始化日历控件。这一步可能涉及到设置日历的初始显示日期、样式、语言等属性。 2. **DOM操作...
JavaScript特效大致可以分为以下几个类别: 1. 动画效果:包括滑动门、淡入淡出、旋转、缩放、平移等,这些特效能够使网页元素有流畅的动态展示,增强视觉吸引力。 2. 导航菜单:JavaScript可以创建响应式的导航栏...
在这个话题中,我们将深入探讨JavaScript中的一些常用方法,特别是`indexOf()`,并延伸到与定位相关的CSS属性。 `indexOf()`方法是JavaScript中字符串对象的一个内置方法,用于查找指定子字符串在原字符串中的首次...
首先,JavaScript(简称JS)是Web开发中的重要脚本语言,它主要用于控制浏览器的行为,如处理用户交互、动态更新内容和与服务器通信。在实现虚拟键盘时,JS主要负责监听用户的触摸事件,展示键盘界面,并根据用户...
要实现ActiveX控件回调JavaScript函数,主要涉及以下几个步骤: 1. **创建ActiveX控件**: 在VC6中,你可以创建一个新的ActiveX工程,定义一个接口,该接口包含要暴露给JavaScript的回调方法。例如,你可以定义一...
这通常涉及以下几个步骤: - 初始化图表对象,指定容器元素、图表类型、宽度和高度等属性。 - 设置图表的标题、轴标签、数据系列等属性。 - 调用DWR方法获取数据后,将数据填充到图表对象中。 - 最后,使用`draw...
在Web开发中,JavaScript(简称JS)是一种必不可少的编程语言,用于实现网页的动态效果和交互功能。然而,未经过优化的JS文件可能会导致页面加载速度变慢,影响用户体验。为了提升网页性能,开发者通常会采取压缩JS...
在IT行业中,"WEB + JS 扫码枪"是一个典型的前端技术应用场景,它结合了Web技术与JavaScript(JS)的功能,使得网页能够直接处理来自扫码枪的数据输入。在这个场景下,用户无需点击任何按钮,只需通过扫码枪扫描条形...
在这样的项目中,JavaScript的主要任务可能包括以下几个方面: 1. 用户界面交互:处理用户的输入,如点击按钮、填写表单等,更新页面内容。 2. 数据处理:可能涉及到JSON格式的数据解析,用于展示聊天记录或用户信息...
该方法的实现过程可以分为以下几个步骤: 1. 创建HTML文档:首先,需要创建一个HTML文档作为网页的基础结构。 2. 添加JavaScript代码:在HTML文档中添加JavaScript代码,以实现网页特效。 3. 定义网页特效:定义...
最近,我使用纯Javascript实现了一个批量修改文本框中的数据的功能,拖动鼠标即可选择页面上(包括GridView中)多个文本框,然后会自动弹出对话框要求用户输入新值。实现方法对TextBox没有侵入性,也不需要修改现有...
更进一步,我们可以通过QScriptEngine将QT对象暴露给JavaScript,以便在JavaScript中调用QT对象的方法。示例代码如下: ```cpp // 创建QScriptEngine实例 QScriptEngine engine; // 将QT对象暴露给JavaScript ...
在设计Web软键盘时,可以考虑以下几点: 1. **布局与样式**:软键盘的布局可以根据实际需求调整,常见的有QWERTY布局和数字键盘布局。样式设计应保持与网站整体风格一致,提供良好的用户体验。 2. **事件处理**:...
首先,`Window.print()`方法是JavaScript中用于调用浏览器内置的打印对话框的函数,用户可以在该对话框中选择打印机、页面设置等选项,然后开始打印操作。为了确保在各种浏览器中都能正常工作,我们需要关注以下几点...
"web管理后台常用的插件"这个主题涵盖了几个重要的技术领域,包括后台系统、数据图表、表单处理以及dialog弹框。以下是对这些知识点的详细介绍: 1. **后台系统**:后台系统通常是指服务器端的应用程序,负责处理...
开发者可以通过引入这些库并调用相应的函数,轻松地在JavaScript中实现文本加密和编码。 总之,了解和掌握这些加密方法对于Web前端开发者来说至关重要,它们是保障数据安全、提升用户体验的常用工具。在实际项目中...
这些标签揭示了项目的几个关键特性: 1. **Web**:这是一个面向Web的应用,可以在网页上直接使用。 2. **流程图**:主要功能是绘制和展示流程图。 3. **js**(JavaScript):使用JavaScript语言编写,这是一种...