JQuery 自製集團組織架構

来源:http://www.cnblogs.com/spooking/archive/2016/10/31/6017076.html
-Advertisement-
Play Games

因集團的組織結構比較特別，為了很好的體現層級，又擺放美觀，自己謝了一個簡單的頁面，有需要的可供參考。 ...


先看效果圖：

下麵是代碼：

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>集團組織結構</title>
    <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js" type="text/javascript"></script>

</head>

<body>
    <STYLE type=text/css>
        ul,
        li {
            list-style: none;
            margin: 0px;
            padding: 0px;
            z-index:2px;
        }
        
        .jiegou {
            margin-left: 20px;
            font-size: 12px;
            linge-height: 20px;
        }
        
        .jiegou li {width:300px;}
        
        .jiegou b {
            font-weight: normal;
            border: 4px solid #ddd;
            border-radius:15px;
            padding: 0 10px 0 10px;
            background: #a00;
            color: #fff;
            height: 20px;
            display: inline-block;
            margin-bottom: 5px;
            line-height: 20px;
            min-width: 160px;
            cursor:pointer;
            transition:all 0.2s;
            z-index:9999;
background-color:#d0451b;
        }
        .jiegou b:hover {
            background-color:#fff;
            color:#900;
            opacity:0.8}
        
        .jiegou li {
            position: relative;
        }
        
        .jiegou ul {
            margin-left: 60px;

        }
        .jiegou li.jd {
            margin-left:150px;
            height:20px;
            margin-bottom:10px;

        }
        .jiegou li.jd > b {position:absolute;left:-90px;z-index:9999;left:-150px;} 
        .jiegou li.jd > div{ position:absolute;left:-20px;top:1px; }
        .xiantiao {
            width: 60px;
            border-left: 1px solid #666;
            border-bottom: 1px solid #666;
            position: absolute;
            left: 20px;
            top: 26px;
            z-index:-1;
        }
        
        .cl:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    </STYLE>

    <UL class=jiegou>
        <LI><B>董事長</B>
            <ul><LI><B>董事會</B></LI></ul>
        </LI>
        <LI><B>副董事長</B>
            <ul><LI><B>董事長辦公室</B></LI></ul>
        </LI>
        <LI><B>總經理</B>
            <ul>
                <LI><B>副總經理</B></LI>
                <LI><B>副總經理</B></LI>
                <LI><B>副總經理</B></LI>
                <LI><B>副總經理</B></LI>
                <li class="jd" style="margin-left:200px;">
                    <div style="top:-130px;">
                    <ul>
                        <LI><B>職能部門</B>
                            <ul>
                                <LI><B>集團公司辦公室</B></LI>
                                <LI><B>人力資源部</B></LI>
                                <LI><B>財務部</B></LI>
                                <LI><B>審計部</B></LI>
                                <LI><B>信息安全部</B></LI>
                                <LI><B>法律事務部</B></LI>
                                <LI><B>資產管理部</B></LI>
                                <LI><B>安全保衛部</B></LI>
                                <LI><B>物業管理部</B></LI>
                            </ul>
                        </LI>
                        <LI><B>子公司</B>
                            <ul>
                                <li class="jd" style="margin-left:350px;">
                                    <b>一級子地產開發有限公司</b><b style="margin-left:250px;min-width:50px;">二級公司</b>
                                    <div style="top:-510px;">
                                    <ul>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                    </ul>
                                    </div>
                                </LI>
                                <LI><B>一級子地產開發有限公司</B></LI>
                                <LI><B>一級子地產開發有限公司</B></LI>
                                <LI><B>一級子地產開發有限公司</B></LI>
                                <LI><B>一級子地產開發有限公司</B></LI>
                                <LI><B>一級子地產開發有限公司</B></LI>
                                <li class="jd"  style="margin-left:350px;">
                                    <b>一級子地產開發有限公司</b><b style="margin-left:250px;min-width:50px;">二級公司</b>
                                    <div style="top:-12px;">
                                    <ul>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                        <LI><B>二級子地產開發有限公司</B></LI>
                                    </ul>
                                    </div>
                                </li>
                            </ul>
                        </LI>
                        <LI><B>業務部門</B>
                            <ul>
                                <LI><B>規劃設計部</B>
                                    <ul>
                                        <LI><B>設計一部</B></LI>
                                        <LI><B>設計二部</B></LI>
                                        <LI><B>設計三部</B></LI>
                                        <LI><B>設計四部</B></LI>
                                        <LI><B>設計五部</B></LI>
                                    </ul>
                                </LI>
                                <LI><B>成本管理中心</B>
                                    <ul>
                                        <LI><B>審核部</B></LI>
                                        <LI><B>招投標部</B></LI>
                                        <LI><B>造價部</B></LI>
                                        <LI><B>採購部</B></LI>
                                    </ul>
                                </LI>
                                <LI><B>工程管理中心</B>
                                    <ul>
                                        <LI><B>總工辦</B></LI>
                                        <LI><B>工程一部</B></LI>
                                        <LI><B>工程二部</B></LI>
                                        <LI><B>工程三部</B></LI>
                                        <LI><B>工程四部</B></LI>
                                        <LI><B>工程五部</B></LI>
                                    </ul>
                                </LI>
                                <LI><B>融資中心</B>
                                    <ul>
                                        <LI><B>融資一部</B></LI>
                                        <LI><B>融資二部</B></LI>
                                        <LI><B>融資三部</B></LI>
                                        <LI><B>融資四部</B></LI>
                                        <LI><B>融資五部</B></LI>
                                    </ul>
                                </LI>

                            </ul>
                        </LI>
                    </ul>
                    </div>
                </li>
                <LI><B>副總經理</B></LI>
                <LI><B>副總經理</B></LI>
                <LI><B>副總經理</B></LI>
                <LI><B>副總經理</B></LI>
            </ul>
        </LI>

    </UL>
    <SCRIPT> 
        jQuery(document).ready(function() { 
            $(".jiegou li").each(function(){ 
                $(this).parent().append('<div class="xiantiao" style="height:'+($(this).offset().top-$(this).parent().offset().top+20)+'px;width:'+($(this).offset().left-$(this).parent().parent().offset().left-20)+'px;"></div>
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 仿照jquery封裝一個自己的js庫（二）
    本篇為完結篇。主要講述如何造出輪子的高級特性。 一. css方法的高級操作 先看本文第一部分所講的dQuery css方法 javascript //css方法 dQuery.prototype.css=function(attr,value){ if(arguments.length==2){// ...
  • CSS
    引入 <link rel=”stylesheet” type=”text/css” href="style.css"/> <style type="text/css">@import "style.css"</style>文字屬性 屬性名稱 屬性值 說明font-style normal 正常顯示 ...
  • 原生ajax基礎
    /*ajax對象的成員常用屬性:responseText:以字元串形式接收伺服器端返回的信息responseXML:以Xml Document對象形式接收伺服器返回的信息readyState:返回當前請求的狀態0:剛創建ajax對象1:已經調用open方法2:已經調用send方法3:已經返回部分數據 ...
  • 學習前端編程之前的一些建議
    這篇文章是對於編程小白新手來說的,對於已經在編程路上蹦躂的菜鳥,老鳥,大牛,請忽略~~哈哈! 1.打字速度是必備的素養！ a) 打字速度是必備的素養！ b) 可以使用市面上常見的打字練習工具,比如金山打字通等.不要練習中文打字，只練習英文打字就行了。英文文章一定要練習到每分鐘100字母以上。 2.認 ...
  • 實現checkbox的多選
    checkbox多選 技術一般水平有限，有什麼錯的地方，望大家指正。 全選，多選都是為了使用的方便，一般情況下全選就夠用了，但是用戶要求實現一個多選的功能也沒有辦法老老實實的做吧。 多選的實現也較為簡單，首先需要一個遮罩可以標識給用戶當前所選擇的區域，其次就是選中用戶所需要的信息，按照這個思路我們來 ...
  • node-sass報錯解決方法
    在Vue.js中，每一個vue文件都是一個組件，在.vue文件中可以將模板，腳本，樣式寫在一起，便於組織整個組件。在使用template，script時，編寫css樣式時，都進行的特別順利，唯獨當我想用sass來預處理css時，在style下使用lang='sass'一直報錯。 在.vue中是這樣的 ...
  • jQuery中$.ajax()方法參數解析
    本文實例為大家講解了jQuery $.ajax()方法參數，供大家參考，具體內容如下 $.ajax({ url:'test.do', data:{id:123,name:'xiaoming'}, type:'post', dataType:'json', success:function(data) ...
  • 詳解javascript事件綁定使用方法
    由於html是從上至下載入的，通常我們如果在head部分引入javascript文件，那麼我們都會在javascript的開頭添加window.onload事件，防止在文檔問載入完成時進行DOM操作所出現的錯誤。如果有多個javascript文件，那麼極有可能出現多個window.onload事件， ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類