当前位置: 首页 > 工具软件 > jOrgChart > 使用案例 >

jOrgChart横向的组织机构数插件

羊舌炯
2023-12-01

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>jOrgChart - A jQuery OrgChart Plugin</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

    <link rel="stylesheet" type="text/css" href="css/jquery.jOrgChart.css"/>

    <link rel="stylesheet" type="text/css" href="css/custom.css"/>

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <script type="text/javascript" src="jquery.jOrgChart.js"></script>

 

    <script type="text/javascript">

    

        jQuery(document).ready(function() {

            

             $("#org").jOrgChart({

           chartElement : '#chart',

           dragAndDrop  : false

       });

        });

    </script>

  </head>

 

  <body οnlοad="">

    <div class="topbar">

        <div class="topbar-inner">

            <div class="container">

                <a class="brand" href="#">jQuery Organisation Chart</a>

            </div>

        </div>

    </div>

    

    <ul id="org" style="display:none">

    <li>

       股票

       <ul>

         <li id="beer">深A</li>

         <li>新三板<a href="http://wesnolte.com" target="_blank">Click me</a>

           <ul>

             <li>新1</li>

             <li>

                <a href="http://tquila.com" target="_blank">新2</a>

                <p>A link and paragraph is all we need.</p>

             </li>

           </ul>

         </li>

         <li class="fruit">沪A

           <ul>

             <li>大蓝筹

               <ul>

                 <li>Granny Smith</li>

               </ul>

             </li>

             <li>工业4.0

               <ul>

                 <li>Blueberry</li>

                 <li><img src="images/raspberry.jpg" alt="Raspberry"/></li>

                 <li>Cucumber</li>

               </ul>

             </li>

           </ul>

         </li>

         <li>中小板</li>

         <li class="collapsed">创业板

           <ul>

             <li>Topdeck</li>

             <li>Reese's Cups</li>

           </ul>

         </li>

       </ul>

     </li>

   </ul>            

    

    <div id="chart" class="orgChart"></div>

    

</body>

</html>

 类似资料: