	资讯中心	网站运营	平面设计	网站设计	网络技术	网络编程	网页特效	下载中心

您现在的位置：文章频道 → 网页特效 → 窗口特效 → 文章内容

前端效果图的jquery实现过程（左右加减传值）

作者：佚名文章来源：本站整理发布时间：2010-1-5 23:48:34 []

减小字体增大字体

以下是程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery实现左右加减</title>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script language="javascript">
//第一步
$(document).ready(function(){//控制div显示隐藏
   $("#input_name").focus(function(){
  $("#listdiv").css("display","block"); 
   $(".tree_right").find("li").each(function(){
    var str02=$(this).text(); 
   if(str02.substring(str02.length-1)==";"){//当onfocus时候坚持右侧显示的li里值是否有";"
         $(this).text(str02.replace(";",""));//若有";"，则用空白替代掉
      }
      });
      }); 
$("h5").click(function(){
   $("#listdiv").css("display","none");   
 })
$("#cancel").click(function(){
   $("#listdiv").css("display","none");     
})
});
//第二步
$(document).ready(function(){//控制ul列表显示隐藏
     $(".tree ul:first").show();//选择缺省状态下，tree下的第一个ul里所有元素都显示
     $('.tree').find('b').click(function(){
     var li_ul = $(this).next();//控制列表隐藏显示
     var img_icon=$(this).find('img');//控制片加减图片轮换
    if (li_ul.is(':visible')) {
     img_icon.attr("src","/html/UploadPic/2010-1/201015234825430.jpg");     
      li_ul.hide();
    } else {
     img_icon.attr("src","/html/UploadPic/2010-1/201015234825161.jpg");    
     li_ul.show();
      }
 });
});
//第三步
$(document).ready(function(){
     $(".mepig li").click(function(){//往右侧增加li，及点击li自动删除
      var abc=$(this);
      if(abc.attr("class")=="a0"){
  $("#num").text($(".tree_right li").length+1);//添加动态显示添加数目
   abc.attr("class","a1").clone().appendTo(".tree_right").click(function(){
   $(this).remove();
   abc.attr("class","a0");
   $("#num").text($(".tree_right li").length);//删除动态显示添加数目
      }); 
         }
    });
});
//第四步
$(document).ready(function(){
$("#subbtn").click(function(){//确定提交按钮触发事件
     $("#input_name").val($(".tree_right").find("li").each(function(){
  var str01=$(this).text();//设置右侧每个li里的字符串为变量
  if(str01.substring(str01.length-1)!=';'){$(this).html($(this).html()+";");}//检测判断右侧每个li里最后一个字符串
  }).text());
     $("#listdiv").css("display","none");  
  });
})
</script>
<style>
*{padding:0; margin:0; list-style:none; font-size:12px;}
.tree li ul li{background:url(/html/UploadPic/2010-1/201015234825975.jpg) no-repeat right; cursor:pointer;}
.tree_right li{cursor:pointer;background:url(/html/UploadPic/2010-1/201015234825964.jpg) no-repeat right;}
.boxlist{border:3px solid #D4E0F0; background-color:#fcfcfc; width:150px; padding:6px; height:220px;  overflow-x:hidden;overflow-y:auto; float:left; margin:10px;display:inline;}
#listdiv{width:380px; height:320px; border:1px solid #7E9DB9; position:absolute; left:88px; background:#EBEFF3; display:none;}
#listdiv h5{height:25px; background:#8DAED1 url(/html/UploadPic/2010-1/201015234825175.jpg) no-repeat right; padding:5px 0px 0px 10px; cursor:pointer;}
.mepig{display:none;}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
发送用户：
    <input name="text" type="text"  id="input_name" size="50" on/>
      <div id="listdiv">
 <h5>选择客户</h5>
      <div class="boxlist">
   <ul class="tree">
  <li><b><img src="/html/UploadPic/2010-1/201015234825161.jpg">潜在1客</b>
  <ul class="mepig">
  <li class="a0">aaaa</li>
  <li class="a0">bbbb</li>
  <li class="a0">cccc</li>
  </ul>
  </li>
  <li><b><img src="/html/UploadPic/2010-1/201015234825430.jpg">潜在2客</b>
  <ul class="mepig">
  <li class="a0">dddd</li>
  <li class="a0">eeee</li>
  <li class="a0">ffff</li>
  </ul>
  </li>
  <li><b><img src="/html/UploadPic/2010-1/201015234825430.jpg">潜在客3</b>
  <ul class="mepig">
  <li class="a0">gggg</li>
  <li class="a0">hhhh</li>
  <li class="a0">uuuuu</li>
  </ul>
  </li>
      </ul>
 </div>
 <div class="boxlist">
     <ul class="tree_right">
     <b>选中的客户<span id="num"></span></b>
      </ul>
 </div>
 <div align="center"><input name="button" type="button" id="subbtn" value="保 存"/>
      <input name="button2" type="button" value="取 消" id="cancel"/></div>
   </div>
</div> 
</form>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上一篇：文章：仿美橙互联(cndns)导航菜单
下一篇：文章：拖拽翻页效果

文章评论

（评论内容只代表网友观点，与本站立场无关！）
　　评论人：dancing 　　打分：85 分　　发表时间：2010-3-16 17:36:33
· 可以用但是右边不能默认选中

您现在的位置：文章频道 → 网页特效 → 窗口特效 → 文章内容

文章评论

最近更新

推荐文章

浏览排行