挂号时精选阅读条目款项,左右平移

**注册时选取阅读条约

注册时选取阅读条约
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> 
<html> 
  <head> 
    <title>demo2.html</title> 
     
    <meta http-equiv=”keywords”
content=”keyword1,keyword2,keyword3″> 
    <meta http-equiv=”description” content=”this is my page”> 
    <meta http-equiv=”content-type” content=”text/html;
charset=UTF-8″> 
     
    <!–<link rel=”stylesheet” type=”text/css”
href=”./styles.css”>–> 
 
<script type=”text/javascript”
src=”../js/jquery-1.9.1.js”></script> 
 
<script type=”text/javascript”> 
    $(document).ready(function(){ 
        var $submitBtn=$(“#submitBtn”);//获取按键对象 
        //为按键注册点击事件 
        $submitBtn.click(function(){ 
            //alert(“小编被点击了!”); 
        }); 
         
        //第三种  绑定事件
第三个参数是绑定事件的花色,第叁个参数是接触的函数 
        $(submitBtn).bind(“click”,function(){ 
            var $check=$(“#agree”);//获取checkbook的成分对象 
            //把jQuery转换成Dom对象 
            /*var checkDom=$check[0]; 
            if(checkDom.checked){ 
                alert(“同意注册!”); 
            }else{ 
                alert(“请选取同意条目挂号时精选阅读条目款项,左右平移。!”); 
            }*/ 
             
            if($check.is(“:checked”)){ 
                alert(“同意注册!”);  
            }else{ 
                alert(“请采纳同意条约!”); 
            } 
        }); 
    }); 
     
         
     
 
</script> 
 
  </head> 
   
  <body> 
    注册条约:<input type=”checkbox”
id=”agree”/>小编已周全阅读并接受csdn注册条目。 
挂号时精选阅读条目款项,左右平移。    <input type=”submit” value=”注册” id=”submitBtn”/> 
  </body> 
</html>

近年用jQuery来写下拉框的选项值的左右活动,代码如下:

*<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN”> 
<html> 
  <head> 
    <title>demo2.html</title> 
    <meta http-equiv=”keywords”
content=”keyword1,keyword2,keyword3″> 
    <meta http-equiv=”description” content=”this is my page”> 
    <meta http-equiv=”content-type” content=”text/html;
charset=UTF-8″> 
    <!–<link rel=”stylesheet” type=”text/css”
href=”./styles.css”>–> 
<script type=”text/javascript”
src=”../js/jquery-1.9.1.js”></script> 
<script type=”text/javascript”> 
    $(document).ready(function(){ 
        var $submitBtn=$(“#submitBtn”);//获取按键对象 
        //为按钮注册点击事件 
        $submitBtn.click(function(){ 
            //alert(“小编被点击了!”); 
        }); 
        //第三种  绑定事件
第二个参数是绑定事件的花色,第三个参数是触发的函数 
        $(submitBtn).bind(“click”,function(){ 
            var $check=$(“#agree”);//获取checkbook的要素对象 
            //把jQuery转换成Dom对象 
            /\
var checkDom=$check[0]; 
            if(checkDom.checked){ 
                alert(“同意注册!”); 
            }else{ 
                alert(“请选择同意条约!”); 
            }*/ 
            if($check.is(“:checked”)){ 
                alert(“同意注册!”);  
            }else{ 
                alert(“请选拔同意条目!”); 
            } 
        }); 
    }); 
</script> 

左右平移  ————————————————————

复制代码 代码如下:

  </head> 
  <body> 
    注册条目:<input type=”checkbox”
id=”agree”/>笔者已周到阅读并接受csdn注册条目。 
    <input type=”submit” value=”注册” id=”submitBtn”/> 
  </body> 
</html>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> 
<html> 
  <head> 
    <title>demo03.html</title> 
     
    <meta http-equiv=”keywords”
content=”keyword1,keyword2,keyword3″> 
    <meta http-equiv=”description” content=”this is my page”> 
    <meta http-equiv=”content-type” content=”text/html;
charset=UTF-8″> 
     
    <!–<link rel=”stylesheet” type=”text/css”
href=”./styles.css”>–> 
<script type=”text/javascript”
src=”../js/jquery-1.9.1.js”></script> 
<script type=”text/javascript”> 
     
     
     $(document).ready(function(){ 
            var $romve=$(“#romve”); 
            var $romves=$(“#romves”); 
             
            $romve.click(function(){ 
                var $opts=$(“#ropt>option:selected”); 
                $opts.appendTo(“#lopt”); 
             
            }); 
             
            $romves.bind(“click”,function(){ 
                var $opts=$(“#ropt>option”); 
                alert($opts.length); 
                $opts.appendTo(“#lopt”); 
            }); 
             
            //双击 
            $(“#ropt”).bind(“dblclick”,function(){ 
                var $pots=$(“#ropt>option:checked”); 
                $pots.appendTo(“#lopt”); 
            }); 
          
         }); 
      
     $(document).ready(function(){ 
            var $lromve=$(“#lromve”); 
            var $lromves=$(“#lromves”); 
            //注册click事件 
            $lromve.click(function(){ 
                var $opts=$(“#lopt>option:selected”); 
                $opts.appendTo(“#ropt”); 
             
            }); 
            //绑定事件 
             $lromves.bind(“click”,function(){ 
                var $opts=$(“#lopt>option”);//获取具备的option 
                 
                //alert($opts.length); 
                $opts.appendTo(“#ropt”); 
                //$(“#ropt”).append($opts); 
             }); 
             
            //双击 
            $(“#lopt”).bind(“dblclick”,function(){ 
                var
$opts=$(“#lopt>option:checked”);//获取具备的option 
                $opts.appendTo(“#ropt”); 
            }); 
             
        }); 
 
</script> 
  </head> 
   
  <body> 
        
       <h1 align=”center”>左右漂移</h1> 
        
       <div style=”position: absolute; left: 450px; top:
120px”> 
          <div style=”float:left; width: 200px; height: 300px;
background-color:lightsteelblue; text-align:
center;”><br><br> 
                       
                      <select id=”lopt” multiple=”multiple” size=”9″
style=”width: 80px;”> 
                                         
<option>aa</option> 
                                         
<option>bb</option> 
                                         
<option>cc</option> 
                                         
<option>dd</option> 
                                         
<option>ee</option> 
                                         
<option>ff</option> 
                                         
<option>gg</option> 
                                         
<option>hh</option> 
                                         
<option>pp</option>               
                      </select> 
                       <br/><br/> 
                      <input type=”button” id=”lromve”
value=”选中的右移” style=”width: 80px;”/><br/><br/> 
                      <input type=”button” id=”lromves”
value=”全体右移” style=”width: 80px;”/> 
           
          </div> 
          <div style =”width: 200px; height: 300px; background-color:
#bbffaa; text-align: center;”><br><br> 
            
                      <select id=”ropt” multiple=”multiple” size=”9″
style=”width: 80px;”> 
                                         
<option>选项1</option> 
                                         
<option>选项2</option> 
                                         
<option>选项3</option> 
                                         
<option>选项4</option> 
                                         
<option>选项5</option> 
                                         
<option>选项6</option> 
                                         
<option>选项7</option> 
                                         
<option>选项8</option> 
                                         
<option>选项9</option>          
                      </select> 
                       
                       <br/><br/> 
                      <input type=”button” id=”romve”
value=”选中的左移” style=”width: 80px;”/><br/><br/> 
                      <input type=”button” id=”romves”
value=”全体左移” style=”width: 80px;”/> 
           
          </div> 
       </div> 
  </body> 
</html> 
 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>无标题文档</title>
<script type=”text/javascript”
src=”../js/jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(function(){
$(“input”).hover(function(){
$(this).val(“”)
},
function(){
$(this).val(this.defaultValue)
}
)
})

**左右平移 

**<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN”> 
<html> 
  <head> 
    <title>demo03.html</title> 
    <meta http-equiv=”keywords”
content=”keyword1,keyword2,keyword3″> 
    <meta http-equiv=”description” content=”this is my page”> 
    <meta http-equiv=”content-type” content=”text/html;
charset=UTF-8″> 
    <!–<link rel=”stylesheet” type=”text/css”
href=”./styles.css”>–> 
<script type=”text/javascript”
src=”../js/jquery-1.9.1.js”></script> 
<script type=”text/javascript”> 
     $(document).ready(function(){ 
            var $romve=$(“#romve”); 
            var $romves=$(“#romves”); 
            $romve.click(function(){ 
                var $opts=$(“#ropt>option:selected”); 
                $opts.appendTo(“#lopt”); 
            }); 
            $romves.bind(“click”,function(){ 
                var $opts=$(“#ropt>option”); 
                alert($opts.length); 
                $opts.appendTo(“#lopt”); 
            }); 
            //双击 
            $(“#ropt”).bind(“dblclick”,function(){ 
                var $pots=$(“#ropt>option:checked”); 
                $pots.appendTo(“#lopt”); 
            }); 
         }); 
     $(document).ready(function(){ 
            var $lromve=$(“#lromve”); 
            var $lromves=$(“#lromves”); 
            //注册click事件 
            $lromve.click(function(){ 
                var $opts=$(“#lopt>option:selected”); 
                $opts.appendTo(“#ropt”); 
            }); 
            //绑定事件 
             $lromves.bind(“click”,function(){ 
                var $opts=$(“#lopt>option”);//获取具有的option 
                //alert($opts.length); 
                $opts.appendTo(“#ropt”); 
                //$(“#ropt”).append($opts); 
             }); 
            //双击 
            $(“#lopt”).bind(“dblclick”,function(){ 
                var
$opts=$(“#lopt>option:checked”);//获取具备的option 
                $opts.appendTo(“#ropt”); 
            }); 
        }); 
</script> 
  </head> 
  <body> 
       <h1 align=”center”>左右浮泛</h1> 
       <div style=”position: absolute; left: 450px; top:
120px”> 
          <div style=”float:left; width: 200px; height: 300px;
background-color:lightsteelblue; text-align:
center;”><br><br> 
                      <select id=”lopt” multiple=”multiple” size=”9″
style=”width: 80px;”> 
                                         
<option>aa</option> 
                                         
<option>bb</option> 
                                         
<option>cc</option> 
                                         
<option>dd</option> 
                                         
<option>ee</option> 
                                         
<option>ff</option> 
                                         
<option>gg</option> 
                                         
<option>hh</option> 
                                         
<option>pp</option>               
                      </select> 
                       <br/><br/> 
                      <input type=”button” id=”lromve”
value=”选中的右移” style=”width: 80px;”/><br/><br/> 
                      <input type=”button” id=”lromves”
value=”全部右移” style=”width: 80px;”/> 
          </div> 
          <div style =”width: 200px; height: 300px; background-color:
#bbffaa; text-align: center;”><br><br> 
                      <select id=”ropt” multiple=”multiple” size=”9″
style=”width: 80px;”> 
                                         
<option>选项1</option> 
                                         
<option>选项2</option> 
                                         
<option>选项3</option> 
                                         
<option>选项4</option> 
                                         
<option>选项5</option> 
                                         
<option>选项6</option> 
                                         
<option>选项7</option> 
                                         
<option>选项8</option> 
                                         
<option>选项9</option>          
                      </select> 
                       <br/><br/> 
                      <input type=”button” id=”romve”
value=”选中的左移” style=”width: 80px;”/><br/><br/> 
                      <input type=”button” id=”romves”
value=”全体左移” style=”width: 80px;”/> 
          </div> 
       </div> 
  </body> 
</html> 

 

jQuery(function(){
//左侧加到左侧
jQuery(“#add”).click(function(){$(“#select1
option:selected”).appendTo(“#select2”)})

你恐怕感兴趣的稿子:

  • 根据jquery+thickbox仿校内登录注册框
  • jquery
    弹出层注册页面等(asp.net后台)
  • 依靠jquery的剧情循环滚动小模块(仿天涯论坛乐乎未登入首页滚动天涯论坛突显)
  • 行使Jquery搭建最棒用户体验的登入页面之记住密码自动登入成效(含后台代码)
  • jQuery获取注册新闻并提示达成代码
  • jQuery回车达成登陆轻松达成
  • jQuery达成用户注册的表单验证示例
  • jQuery达成弹出窗口中切换登陆与登记表单
  • 遵照jquery完成三个轮转的分步注册向导-附源码
  • jquery完毕的用户注册表单提醒操作作用代码分享
  • jquery达成的弹出层登入和全屏层注册特效代码分享

!DOCTYPE HTML PUBLIC
-//W3C//DTD HTML 4.01 Transitional//EN html head titledemo2.html/title
meta http-equiv=keywords content=keyword1,keyword2,keyword3…

//右边加到左侧
jQuery(“#remove”).click(function(){$(“#select2
option:selected”).appendTo(“#select1”)})

//全体加到侧面
jQuery(“#add_all”).click(function(){$(“#select1
option”).appendTo(“#select2”)})

//全体运动左侧
$(“#remove_all”).click(function(){$(“#select2
option”).appendTo(“#select1”)})

//双击加到侧面
$(“#select1”).dblclick(function(){$(“option:selected”,this).appendTo(“#select2”)})
//双击移动侧面
$(“#select2”).dblclick(function(){$(“option:selected”,this).appendTo(“#select1”)})
})

function len(){
亚洲城欢迎您,var sel = document.getElementById(“select2”);
alert(sel.length);
}

</script>
<style type=”text/css”>
*{ margin:0; padding:0;}
input{ color:#ccc;}

div.centent {
float:left;
text-align: center;
margin: 10px;
}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;
}
</style>
</head>

<body>
<input type=”text” value=”aaaaa” /><br />

<div class=”centent”>
<select multiple=”multiple” id=”select1″
style=”width:100px;height:160px;”>
<option value=”1″>选项1</option>
<option value=”2″>选项2</option>
<option value=”3″>选项3</option>
<option value=”4″>选项4</option>
<option value=”5″>选项5</option>
<option value=”6″>选项6</option>
<option value=”7″>选项7</option>
</select>
<div>
<img id=”add” src=’../img/content/arrowRight_disabled.gif’
width=”24″ height=”24″ border=’0′ style=”cursor:pointer;
vertical-align:middle;” />
<span id=”add_all” >全体抬高到右边手>></span>
</div>
</div>

<div class=”centent”>
<select multiple=”multiple” id=”select2″ style=”width:
100px;height:160px;”>
<option value=”8″>选项8</option>
</select>
<div>
<img id=”remove” src=’../img/content/arrowLeft_disabled.gif’
height=”22″ border=’0′ style=”cursor:pointer; vertical-align:middle;”
/>
<span id=”remove_all”><<全体删减到左边</span>
</div>
</div>
<input name=”sub” type=”submit” onClick=”len()” value=”提交” />
</body>
</html>

用这几个文件浏览的时候是足以用的,不过放到jsp里面就无法用了。笨方法来化解,写个alert方法看看报什么错,开掘了难点所在:
jQuery的function前面包车型大巴$与JSP页面的JSTL的$争辩了,直接产生不认知此目标方法。
解决办法:
把jQuery代码里面包车型地铁$全改成jQuery就足以健康使用了!

您也许感兴趣的篇章:

  • jquery绑定事件不见效的化解方法
  • js和jquery使开关失效为不可用状态的点子
  • Jquery修改页面标题title其余JS失效的消除措施
  • 浅谈jQuery增添的HTML,JS失效的主题材料

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注