vista

回顾※展望                     潜心技术&&不再搁浅

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  12 Posts :: 1 Stories :: 13 Comments :: 0 Trackbacks
vista精神之 －－javascript篇
这是一个小东东，有的时候用的着，呵呵。

<script language="javascript" >
    function leftToRight(aa,bb,cc){
        var selected;

        var b = false;
        var bLength = bb.length;
        for(var i=0; i < aa.length; i ++ ){
            if(aa[i].selected){
                
                selected = aa[i].value;
                for(var j=0; j < bLength; j++){
                    if(bb[j].value == selected)
                    b = true;
                }
                if(!b){
                bb[bLength] = new Option(aa[i].text,selected);
                bLength ++ ;
                
                }
                if(cc)
                    aa[i] = null;
            }
        }
    
    }
    function ee(){
        var blist = form1.b;
        var result = "";
        for(var i = 0; i < blist.length; i++){
            result += blist[i].value
            result += "-";
        }
        alert(result);
    }
    function search(){
        var sear = form1.sear.value;
        var alist = form1.a;
        for(var i = 0; i < alist.length; i++){
            //alert(sear.indexOf(alist[i].text));
            if(alist[i].text.indexOf(sear) == 0){
                if(!alist[i].selected){
                alist[i].selected = true;
                return true;
                }
            }
            //return true;
        }
    }

</script>
<form name="form1" >
<input type="text" name="sear" /><input type="button" value="search" onClick="search();" />
<table width="40%" align="center"><tr><td height="200">
<select multiple name="a"  style="height:200px;width:100px;">
    <option value="1">管理员1</option>
    <option value="2">管理员2</option>
    <option value="3">管理员3</option>
    <option value="4">管理员4</option>


</select></td>
<td>
    <input type="button" value=" >> " onClick="leftToRight(form1.a,form1.b);" /><br />
    <input type="button" value=" << " onClick="leftToRight(form1.b,form1.a,true);" />
</td>
<td height="150">
<select multiple name="b" style="height:200px;width:100px;" >
    
    <option value="11">管理员5</option>
    <option value="22">管理员6</option>
</select>
</td></tr>
<tr><td colspan="2"><input type="button" value="提交" onClick="ee();" /></td></tr>
</table></form>

一个非常简单但使用的东东，呵呵
        <script language="javascript">
    function chMode(num){
        var a = document.getElementById(num);
        if(a.style.display == "block"){
            a.style.display = "none";
        }
        else{
                    a.style.display = "block";
        }
    }
        </script>

例如，我们需要将一个table在需要的时候在页面显示，不需要的时候在页面隐藏，我们可以使用下面的代码：
<a href="#" onClick="chMode('table1');" >点我</a>
<table id="table1" style="display:none">
.
</table>

第一次点击时，显示table，再次点击时，则隐藏了table.     ^_^

今天遇到一个问题，就是需要通过javascript代码判断上传图片的文件大小，上网搜索了下，找了些代码，整理个小例子如下：

<script language="javascript" >
function CheckFileSize()    
  {    
        var FileMaxSize = 100;//限制上传的文件大小，单位(k) 
      var   s   =   document.RegForm.Img_1.value;   
      //if(s==""){alert("No image,please select again!");document.RegForm.Img_1.focus(); return   false;}    
     var   img   =   new   Image();    
     img.src   =   s;  
     alert(img.fileSize);
     if(img.fileSize>FileMaxSize*1024){
         alert("文件太大！");
         document.RegForm.Img_1.focus();
         return false;
     }
     if(img.fileSize == -1){
             alert("请上传图片！！");
             return false;
         }
     return true;
}
</script>   
<form action="a.htm" method="post"  enctype="multipart/form-data" name="RegForm"> 
    <input type="file" name="Img_1" >
<input  type="button"  value="Save" onClick="return CheckFileSize()">
</form>

加一个判断并控制显示图片大小的代码：
<html><head>
    <script language="javascript">
        function reSize(){
            var a = document.getElementById("img1");
            var   img   =   new   Image(); 
            img.src = a.value;
            if(a.width > 600)
                a.width = 600;
        }
    </script>
    </head>
<body onload="reSize();">
<IMG src="1.jpg" style="border:1px #ff0000 solid" name=ntimg id="img1" >
</body></html>

加个 location.href , location.reload();
posted on 2006-10-13 20:39 Vista 阅读(1814) 评论(10)  编辑  收藏 所属分类: web相关

Feedback

# re: vista精神之 －－javascript篇 2006-10-13 22:17 坏男孩
顶~~~  回复  更多评论
  

# re: vista精神之 －－javascript篇 2006-10-13 22:23 马嘉楠
1）function leftToRight()可以做点修改啊
原来的我操作了一下有点问题，左面的管理员进入右面之后
左面的list里面依然存在

可以去掉leftToRight()中的cc参数，以及if(cc)语句，调用该函数的时候也不需要第三个参数了


2）function ee() 看你写的代码就是显示右侧列表内容，原来也是要实现这个功能么？

修改后的 leftToRight()

function leftToRight(aa,bb){//aa原来的列表，bb目的列表
var selected;

var b = false;
var bLength = bb.length;
for(var i=0; i < aa.length; i ++ ){
if(aa[i].selected){

selected = aa[i].value;
for(var j=0; j < bLength; j++){
if(bb[j].value == selected)
b = true;
}
if(!b){
bb[bLength] = new Option(aa[i].text,selected);
bLength ++ ;

}
aa[i] = null;//删除原来列表中选中的管理员

}
}

}


修改后的 function ee()
function ee(){
var blist = form1.b;
var result = "";
for(var i = 0; i < blist.length; i++){
result += "right list " + (i+1) + " = " + blist[i].text;
result += "\n";
}
alert(result);
}
这样看得更明白，呵呵  回复  更多评论
  

# re: vista精神之 －－javascript篇 2006-10-14 01:41 vista--
二楼的看的仔细啊，改了也可以，没改的话，也是和具体需求相关的，呵呵  回复  更多评论
  

# re: vista精神之 －－javascript篇 2006-10-14 09:32 马嘉楠
哈哈，明白了
是我想当然了^+^
很有用的东西  回复  更多评论
  

# re: vista精神之 －－javascript篇 2006-10-16 14:50 尤士期
请问为什么点击“<<”和“点我”时，那两个多选框会闪动呢？有没有办法不闪呀？:-)  回复  更多评论
  

# re: vista精神之 －－javascript篇 2006-10-17 10:15 greco
我现在不太用自己写的Javascript代码，一般都会用一些JS的框架,比如JQuery,Prototype等等。比如你那个显示隐藏Table就只要 Element.hide();Element.show();就可以了。  回复  更多评论
  

# re: vista精神之 －－javascript篇 2006-10-17 12:42 cwocwo
第一个例子有bug， 多选的时候有问题。
有时项已移到右边， 可左边没去掉
  回复  更多评论
  

# re: vista精神之 －－javascript篇 2006-10-17 14:03 Vista
回 cwocwo：
我在具体业务的时候，左边是不需要去掉的，如果要去掉的话，也很简单，
因为具体业务的时候，左边是所有供选择的集合，而右边的是用户选择的，
呵呵  回复  更多评论
  

# re: vista精神之 －－javascript篇 2006-10-18 15:29 123bingbing
增开7群,号码 30440732
8群 30756649
9群 30178567
10群 28694497

我们的qq群:15096318 学习程序的都可以来
  回复  更多评论
  

# re: vista精神之 －－javascript篇 2006-10-28 03:28 Dedian
hi, buddy, i have sent an email to u about customized Google Search engine  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: