常見前端效果實現_ZenDei技術網路在線

常見前端效果實現

-Advertisement-

一、選中左右側內容到另一側：選中左側內容到右側，選中右側內容到左側 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ...

一、選中左右側內容到另一側：選中左側內容到右側，選中右側內容到左側

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        select {
            width: 100px;
            height: 140px;
        }
        
        div {
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        
        $(function(){
            $("button:eq(0)").click(function(){
                $("select[name=sel01] :selected").each(function(){
                    $(this).appendTo("select[name=sel02]");
                });
            });
            
            $("button:eq(1)").click(function(){
                $("select[name=sel01] option").each(function(){
                    $(this).appendTo("select[name=sel02]");
                });
            });
            
            $("button:eq(2)").click(function(){
                $("select[name=sel02] :selected").each(function(){
                    $(this).appendTo("select[name=sel01]");
                });
            });
            
            $("button:eq(3)").click(function(){
                $("select[name=sel02] option").each(function(){
                    $(this).appendTo("select[name=sel01]");
                });
            });
        });
    </script>
</head>
<body>
    <div id="left">
        <select multiple="multiple" name="sel01">
            <option value="opt01">選項1</option>
            <option value="opt02">選項2</option>
            <option value="opt03">選項3</option>
            <option value="opt04">選項4</option>
            <option value="opt05">選項5</option>
            <option value="opt06">選項6</option>
            <option value="opt07">選項7</option>
            <option value="opt08">選項8</option>
        </select>
        
        <button>選中添加到右邊</button>
        <button>全部添加到右邊</button>
    </div>
    <div id="rigth">
        <select multiple="multiple" name="sel02">
        </select>
        <button>選中刪除到左邊</button>
        <button>全部刪除到左邊</button>
    </div>

</body>
</html>

View Code

二、全選全不選

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function(){
        
        var $items = $(":checkbox[name=items]");
        
        $("#checkedAllBtn").click(function(){
            $items.add("#checkedAllBox").attr("checked",true);
        });
        $("#checkedNoBtn").click(function(){
            $items.add("#checkedAllBox").attr("checked",false);
        });
        $("#checkedRevBtn").click(function(){
            $(":checkbox[name=items]").each(function(){
                this.checked = !this.checked;
            });
            $("#checkedAllBox").attr("checked",($items.filter(":checked").length == $items.length));
        });
        $("#checkedAllBox").click(function(){
            $items.attr("checked",this.checked);
        });
        $items.click(function(){
            $("#checkedAllBox").attr("checked",($items.filter(":checked").length == $items.length));
        });
        $("#sendBtn").click(function(){
            $items.filter(":checked").each(function(){
                alert(this.value);
            });
        });
    });
</script>
</head>
<body>
    <form method="post" action="">
        你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選 
        
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="籃球" />籃球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全　選" />
        <input type="button" id="checkedNoBtn" value="全不選" />
        <input type="button" id="checkedRevBtn" value="反　選" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>
</body>
</html>

View Code

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

spring mvc 框架搭建及詳解

現在主流的Web MVC框架除了Struts這個主力外，其次就是Spring MVC了，因此這也是作為一名程式員需要掌握的主流框架，框架選擇多了，應對多變的需求和業務時，可實行的方案自然就多了。不過要想靈活運用Spring MVC來應對大多數的Web開發，就必須要掌握它的配置及原理下載地址。 ...
設計模式（十）：裝飾者模式

在《JavaScript設計模式》介紹中，裝飾者模式跟Mixin（混入）模式相比，是另一種可行的對象子類化（Mixin模式乾的事）的替代方案。裝飾者（Decorator）模式定義：給對象動態添加額外的功能。向基本對象添加（裝飾）屬性或方法，而不是進行子類化，它較為精簡。使用場景： java ...
【介面開發】淺談 SOAP Webserver 與 Restful Webserver 區別

介面，強大，簡單，交互，跨越平臺下麵簡單闡述這兩大介面思想一 REST： REST是一種架構風格，其核心是面向資源，REST專門針對網路應用設計和開發方式，以降低開發的複雜性，提高系統的可伸縮性。 REST提出設計概念和準則為： 1.網路上的所有事物都可以被抽象為資源(resource) 2.每 ...
基於AgileEAS.NET SOA 中間件領域模型數據器快速打造自己的代碼生成器

一、前言 AgileEAS.NET SOA 中間件平臺是一款基於基於敏捷並行開發思想和Microsoft .Net構件(組件)開發技術而構建的一個快速開發應用平臺。用於幫助中小型軟體企業建立一條適合市場快速變化的開發團隊，以達到節省開發成本、縮短開發時間，快速適應市場變化的目的。 AgileEAS. ...
web安全——防火牆

簡介用於實現伺服器（Linux）的訪問控制的功能的。分硬體和軟體防火牆。主要是控制訪問的流入和伺服器的流出。通過黑名單和白名單的思想來實現更細粒度的控制，這個一般結合其他的應用來定義策略實現。概念黑白名單可以說防禦的思想，主要就是黑白名單的思想！！！！是黑白名單的組合。黑名單指的是對 ...
(原) 1.3 zookeeper腳本使用

本文為原創文章，轉載請註明出處，謝謝 zookeeper自帶腳本使用 1、進入zookeeper客戶端找到安裝目錄下的bin目錄，執行以下腳本（中括弧標示被必填） ./zkCli.sh -timeout 5000 [-r] -server 127.0.0.1:2181 (-r指伺服器掛掉仍可提供讀 ...
[Effective JavaScript 筆記]第53條：保持一致的約定

不要修改這樣的約定。比如前端要處理多種語言html,css,js本來要記得東西都夠多的啦。不要引入一些不必要的改變，使工作變得複雜。就像在css中我們在描述矩形的四條邊的參數時，總是以上右下左的順序。因為這個和margin,padding等屬性約定相同順序。如果違反了這個約定，頁面表現一定會出錯。 ...
webview 中 svg的坑

在這裡不會詳細介紹如何繪製svg圖片，是講一個很小的bug，看圖在這張圖中，上面帶有紋理和弧度的圖片，原本是直接切了一張png的圖片，但是由於是在app的登錄註冊的首頁，那麼這個35k的圖片就會非常影響首頁的展示效果，耗費時間，那麼怎麼做呢？然後就像著，把後面的紋理切成一個GIF的圖片，作為背景 ...