`

左右推拉 javascript

阅读更多

 

1. jsp 页面中:

<tr>
          <td colspan="2" class="td_tr1"> 
          
          <select name="receivers" multiple="multiple"  size="10" id="receivers" style="width:300">
          <%
          ContentList list2 = new ContentList();
              Iterator<Content> iter2 = list2.getList(request.getParameter("page"));
           totalNum = list2.getTotalrow();
           
              while (iter2.hasNext())
              {
                  Content db = iter2.next(); 
                  System.out.println(db.getCtid());
          %>
          
          <option value='<%=db.getCtid()%>'><%=db.getTitle()%> </option>
          
          
          <%} %>
          </select>
          </td>
          <td class="td_tr1">
          <input type="hidden" name="cid" value="<%=cid %>">
          
           <input  id=addInd type="button" value="增加&gt;&gt;" name="addInd"  onClick="addChildNodes(receivers,receiver,'ddd');" >
                                <br><br>
                                <input  id=removeInd type="button" value="删除&lt;&lt;" name="removeInd"  onClick="removeChildNodes(receivers,receiver);">
          </td>
          
          <td class="td_tr1">
          
          <select  multiple name="receiver" size="10"  style="width:300px ">
       <%
        
       //String sqlWhere ="where bulletinid="+ dblist.getBulletinid(); //out.println(DDListOut.getReceiverDDList1("receiver",Tools.checkNull(request.getParameter("//receiver")),true,"",sqlWhere));
        %> 
        </select>
          </td>

         
          </tr>

 

2. 提交函数 javascript

  function doAdd()
    {
     getNodes(document.all.receivers,document.all.receiver);
        document.myform.action="addRelation.jsp";
        myform.submit();
        document.all.btnadd.disabled=true;
    }
   
    function getNodes(srcObj,desObj)
 {
  var strNodes="";
  if(desObj.options[0].value == "")
  {
   var desLen=srcObj.length;
  
   for(var i=1;i<desLen;i++)
   { 
    //alert("i="+i);
    var srcOpt=srcObj.options[i].value ;
    strNodes = strNodes +","+ srcOpt ;
    
   }
  
  
  }
  else if(desObj.options[0].value != "")
  {
   var desLen=desObj.length;
 
   for(var i=0;i<desLen;i++)
   { 
    var srcOpt=desObj.options[i].value ;
    strNodes = strNodes +","+ srcOpt ;
    
   }
  }
  alert("strNodes="+strNodes);
  document.all.rece.value=strNodes.substring(1);

 }

 

 

3. 推拉javascript:


  
//添加
function addChildNodes(srcObj,desObj,alertMessage)
{
    //如果已经选择了不限,则不增添加任何项
    var desLen=desObj.length;
 //alert("desLen="+desLen);
   //循环每个选项
    var srcLen=srcObj.length;
 //alert("srcLen="+srcLen);
 
    for(var i=0;i<srcLen;i++)
    {
  
  
        var srcOpt=srcObj.options[i];
        if(srcOpt.selected)
        {
           //如果已经选择了不限,则不添加任何项
    // alert(srcOpt.value);
   if(srcOpt.value=="")
   {
    
    clearListObj(desObj,srcObj);
    //removeChildNodes(srcObj,desObj)
    
    desObj.options.add(new Option(srcOpt.text,srcOpt.value));
    //srcObj.options.remove(i);
    return;
   }
            //如果已经选择了该项,则不再添加
            var desLen=desObj.length;
            var isContinue=false;
            for(var j=0;j<desLen;j++)
            {
    
            
                //选择其他后,删除已经选择的“不限”选项
                if(desObj.options[j].value=="")
    {
     desObj.remove(j);

     //isContinue=true;
                   // continue;
     //srcObj.options.add(new Option(desObj.options[j].text,desObj.options[j].value));
     //desObj.options.add(new Option(srcOpt.text,srcOpt.value));
     //srcObj.options.remove(i);
    }
            }
            //if(isContinue==true) continue; 
  
            desObj.options.add(new Option(srcOpt.text,srcOpt.value));
   srcObj.options.remove(i);
   break;

   
           
         }
    }
}


//判断是否超过限定项数(默认为5项)
function IsSelectFlow(srcObj,selectObj)
{
    var selectLen=selectObj.length;
    if(selectLen>=5 && srcObj.value!=NOTLIMITID)
    {
        return true;                   
    }       
    return false;
}

//移除
function removeChildNodes(srcObj,desObj)
{
    var len=desObj.length;
    for(var i=len-1;i>=0;i--)
    {       
        if(desObj.options[i].selected)
        {
   
   if(desObj.options[i].value=="")
   {
    //srcObj.options.add(new Option(desObj.options[i].text,desObj.options[i].value));
    desObj.remove(i);
   }
   else
   {
    srcObj.options.add(new Option(desObj.options[i].text,desObj.options[i].value));
    desObj.remove(i);
   }
        }

  
    }
}

//清除obj
function clearListObj(obj,obj1)
{
    var len=obj.length;
    for(var i=0;i<len;i++)
 {
  
  obj1.options.add(new Option(obj.options[0].text,obj.options[0].value));
  obj.remove(0);

 }

}


//初始化ExpectTrade
function initExpectTradeNodes(srcObj,desObj,idstr)
{     
    clearListObj(srcObj);   
    var len=__ExpectTradeIds.length;   
    for(var i=0;i<len;i++)
    {    
        srcObj.options.add(new Option(__ExpectTradeNames[i],__ExpectTradeIds[i]));
    }       
   
    var ids=idstr.split(',');
    for(var i=0;i<ids.length;i++)
   {
      var isFind=false;
      for(var j=0;j<len;j++)
      {
          if(ids[i]==srcObj.options[j].value)
          {
              desObj.options.add(new Option(__ExpectTradeNames[j],__ExpectTradeIds[j]));
              isFind=true;
              break;
          }
      }     
  }
}

//全选
function selectAll(obj)
{
    var len=obj.length;
    for(var i=0;i<len;i++)
    {
        obj.options[i].selected=true;
    }
}


          

分享到:
评论

相关推荐

    JavaScript相册左右推拉窗

    JavaScript相册左右推拉窗是一种常见的网页交互设计,主要用于展示多张图片,用户可以通过点击或滑动来切换图片。这种效果能提供一个直观且有趣的用户体验,尤其在展示产品细节、艺术作品或者个人照片集时非常实用。...

    javaScript+html实现9种推拉门.zip

    在推拉门效果中,HTML可能会包含一个或多个容器元素,比如`&lt;div&gt;`,用来容纳门的左右两部分。这些元素的宽度、高度以及相对位置将被精确设置,以便在JavaScript的控制下能够平滑地移动。 接下来,JavaScript的介入...

    左右可伸缩滑动门漂亮效果(js 源码)

    "左右可伸缩滑动门"是一种常见的网页特效,它通过JavaScript和CSS技术实现,尤其在广告设计和界面展示中颇为流行。本教程将深入探讨如何利用JQuery、div+css技术创建这种效果。 首先,JQuery是一个广泛使用的...

    推拉门效果.rar

    2. JavaScript/jQuery:如果需要更复杂的交互,如响应用户的点击事件,或者与其他元素的交互,可以使用JavaScript或jQuery来控制推拉门的开关状态。例如,监听`click`事件,然后改变门的状态(打开或关闭)。 3. ...

    JavaScript实例精通

    12_2.htm 推拉门式样的菜单。 12_3.htm 浮动顶部的菜单。 12_4.htm 浮动底部的菜单。 12_5.htm 渐显效果下拉菜单。 第13章(\13) 示例描述:背景特效。 13_1.htm 背景时钟。 13_2.htm 永远居中的背景...

    《JavaScript实例精通》[源代码]

    12_2.htm 推拉门式样的菜单。 12_3.htm 浮动顶部的菜单。 12_4.htm 浮动底部的菜单。 12_5.htm 渐显效果下拉菜单。 第13章(\13) 示例描述:背景特效。 13_1.htm 背景时钟。 13_2.htm 永远居中的背景...

    纯css3带动画效果的左右滑动按钮

    CSS3作为层叠样式表的第三个版本,引入了许多新的选择器、布局模式以及动画和过渡效果,使得开发者无需依赖JavaScript或其他脚本语言即可实现动态视觉效果。 在这款左右滑动按钮中,主要运用了以下几个CSS3的关键...

    基于jQuery实现图片推拉门动画效果的两种方法

    例如,如果关注点在于图片内容的动态展开和收缩,而不需要考虑到图片左右滑动,那么使用改变图片宽度的方法可能更加简单有效;如果希望用户界面更富有动感,产生类似拖拽图片的视觉效果,那么使用改变图片偏移值的...

    图片轮播效果

    本项目是基于网络资源,利用jQuery这一强大的JavaScript库,对一个现有的jQuery插件进行了改造,以实现更多样化的图片轮播功能。 jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画...

    一个经典的CSS滑动门学习实例

    通常,我们会为一个包含两个子元素的容器设置固定宽度,这两个子元素分别代表元素的左右两部分。通过调整子元素的宽度和隐藏超出部分,可以实现滑动的效果。 例如,我们有一个导航菜单,它由一个左侧的箭头和一个...

    html 推箱子.rar

    3. `34.js`: 这可能是JavaScript脚本文件,负责处理游戏逻辑,如玩家移动、箱子推拉检测、游戏胜利条件判断等。 HTML和CSS的组合使得我们可以创建出具有视觉吸引力的界面,而JavaScript则赋予了游戏交互性和动态性...

    bootstrap表格

    在本篇中,我们将深入探讨Bootstrap表格的实现、特性以及如何实现排序、推拉效果和分页功能。 首先,Bootstrap表格的基本结构是通过HTML的`&lt;table&gt;`元素来创建的,同时使用Bootstrap的CSS类来应用样式。例如: ```...

    支持触摸手势滑动立体式banner切换效果

    接着,"滑动"是触摸手势的一种常见形式,它允许用户通过在屏幕上左右滑动来浏览多个页面或元素。在banner切换效果中,滑动手势可以使用户平滑地从一个广告跳转到下一个,无需等待自动轮播或者点击导航箭头。 再来...

    jQuery图片轮播插件多种切换效果.zip

    - 还包括其他如随机、旋转、推拉等创新特效,让网页更具动感。 2. **自定义参数**: - 自动播放:可以设置轮播是否自动进行,以及间隔时间。 - 导航按钮:是否显示左右切换按钮,以及按钮样式。 - 缩略图导航:...

    wowslider.rar

    哇滑动器提供了多种预设的动画样式,包括淡入淡出、左右滑动、上下滑动、旋转、推拉等多种效果,每种效果都可以自定义速度,使得轮播的节奏感可以按照个人喜好调整。此外,还可以设置轮播的自动播放功能,以及是否...

    css3+jquery实现的手机app页面转换动画特效源码.zip

    接下来,jQuery作为一个强大的JavaScript库,提供了便利的DOM操作和事件处理功能,它可以帮助我们更轻松地控制动画的触发和执行。使用jQuery的`.animate()`方法,我们可以自定义更复杂的动画效果,包括非线性的运动...

    幻灯片放映带解说特效代码

    4. **多变效果**:幻灯片不仅限于简单的左右滑动,还可以有淡入淡出、推拉、缩放等多种过渡效果。这些效果可以通过改变元素的透明度、大小、位置等属性,结合jQuery的动画函数来实现。 5. **解说功能**:幻灯片带...

Global site tag (gtag.js) - Google Analytics