JQuery精选实例

1.jQuery实现CheckBox全选、全不选
<!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 runat="server">
<title>jQuery实现CheckBox全选、全不选</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>    <script type="text/javascript">
        $(function() {
           $("#checkAll").click(function() {
                $('input[name="subBox"]').attr("checked",this.checked); 
            });
            var $subBox = $("input[name='subBox']");
            $subBox.click(function(){
                $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
            });
        });
    </script>
</head>
<body>
    <div>
        <input id="checkAll" type="checkbox" />全选
        <input name="subBox" type="checkbox" />项1
        <input name="subBox" type="checkbox" />项2
        <input name="subBox" type="checkbox" />项3
        <input name="subBox" type="checkbox" />项4
    </div>
</body>
</html>
2.JQuery实现滑动菜单和布局
<!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=utf-8" />
<title>滑动菜单</title>
<style>
a,body,div,h1,h2,li,ul{
    margin:0;
    padding:0
}
a{display:block;text-decoration:none;height:25px;color:#456;background-color:#ABC;cursor:pointer;}
a:hover{color:#123;background-color:#789;font-weight:bold;}
body{
    font:12px/18px "Times New Roman",Times,"宋体",serif;
    text-align:center;
}
h1{
    height:100px;
    width:25px;
    position:absolute;
    top:-1px;
    left:123px;
    cursor:pointer;
    color:#89A;
    font-size:18px; 
    line-height:50px;
    background-color:#234;
}
h2{
    height:24px;
    font-size:12px;
    border-bottom:1px solid #4C6CB9;
    color:#BBB;
    font-weight:600;
    cursor:pointer;
}
li{height:25px;list-style:none}
#Container{width:800px;background-color:#DDD;border: 1px solid #999;margin:10px auto}
#Top{height:30px;background-color:#DDD;border: 1px solid #999;}
#Logo{height:100px;background-color:#DDD;border: 1px solid #999;}
#Nav{height:30px;background-color:#DDD;border: 1px solid #999;}
#SideBar{
    position:fixed!important;
    position:absolute;
    top:200px;
    left:0px;
}
#SideBar a,#SideBar h2,#SideBar li,#SideBar ul{width:120px}
#Main{height:800px;background-color:#DDD;border: 1px solid #999;}
#Footer{height:60px;background-color:#DDD;border: 1px solid #999;}
.Extracted{width:0px;}
.Extrended{border:1px solid #555;background-color:#000;padding:1px}
</style>
</head>
<body>
<div id="Container">
    <div id="Top">顶条</div>
    <div id="Logo">Logo</div>
    <div id="Nav">导航条</div>
    <div id="SideBar" class="Extrended">
        <h1>菜单</h1>
        <ul>
            <h2>功能栏1</h2>
            <li><a href="">功能1</a></li>
            <li><a href="">功能2</a></li>
            <li><a href="">功能3</a></li>
            <li><a href="">功能4</a></li>
            <li><a href="">功能5</a></li>
        </ul>
        <ul>
            <h2>功能栏2</h2>
            <li><a href="">功能1</a></li>
            <li><a href="">功能2</a></li>
            <li><a href="">功能3</a></li>
            <li><a href="">功能4</a></li>
            <li><a href="">功能5</a></li>
        </ul>
        <ul>
            <h2>功能栏3</h2>
            <li><a href="">功能1</a></li>
            <li><a href="">功能2</a></li>
            <li><a href="">功能3</a></li>
            <li><a href="">功能4</a></li>
            <li><a href="">功能5</a></li>
        </ul>
        <ul>
            <h2>功能栏4</h2>
            <li><a href="">功能1</a></li>
            <li><a href="">功能2</a></li>
            <li><a href="">功能3</a></li>
            <li><a href="">功能4</a></li>
            <li><a href="">功能5</a></li>
        </ul>
        <ul>
            <h2>功能栏5</h2>
            <li><a href="">功能1</a></li>
            <li><a href="">功能2</a></li>
            <li><a href="">功能3</a></li>
            <li><a href="">功能4</a></li>
            <li><a href="">功能5</a></li>
        </ul>
        <ul>
            <h2>功能栏6</h2>
            <li><a href="">功能1</a></li>
            <li><a href="">功能2</a></li>
            <li><a href="">功能3</a></li>
            <li><a href="">功能4</a></li>
            <li><a href="">功能5</a></li>
        </ul>
    </div>
    <div id="Main">内容区</div>
    <div id="Footer">底条</div>
</div>
<script type="text/javascript">
function $(e){return document.getElementById(e)}
function Slide(Element,Mod){
    var LongthMax,LongthMin,Property,Count=25,Accum,ID,Dlt,DltDlt;
    if(Mod){
        Property='left';
        LongthMax=0;
        LongthMin=-124;
    }
    else{
        Property='height';
        LongthMax=Element.children.length*25;
        LongthMin=25;
    }
    DltDlt=(LongthMax-LongthMin)/(Count*5);
    if(Element.style[Property]==LongthMax+'px')DltDlt=-DltDlt;
    Accum=parseInt(Element.style[Property]);
    Dlt=7*DltDlt;
    ID=setInterval(function(){
        if(Count--){
            if(!(Count%5))Dlt-=DltDlt;
            Accum+=Dlt;
            Element.style[Property]=Math.floor(Accum)+'px';
            return
        }
        clearInterval(ID);
        Element.style[Property]=(DltDlt>0)? LongthMax+'px':LongthMin+'px';
    },20);
}
$('SideBar').style.left='0px';
$('SideBar').children[0].onclick=function(){
    Slide(this.parentNode,1);
};
(function(Menu,i,tmp){
    Menu=document.getElementsByTagName('ul');
    for(i=Menu.length;i--;){
        tmp=Menu[i];
        tmp.style.overflow='hidden';
        tmp.style.height='25px';
        tmp.children[0].onclick=function(){
            Slide(this.parentNode,0);
        };
    }
}());
</script>
</body>
</html>


你可能感兴趣的:(JQuery精选实例)