Difference between revisions of "Template:NAU-CHINA/header"

 
(79 intermediate revisions by 2 users not shown)
Line 14: Line 14:
 
         * {
 
         * {
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 +
            font-size:18px;
 
         }
 
         }
 
         body {margin:0;padding:0;}
 
         body {margin:0;padding:0;}
−
         #LOGO {
+
         #LOGObg {
 
             position:fixed;
 
             position:fixed;
−
             top:0px;
+
             top:22px;
−
             left:70px;
+
             left:115px;
−
             z-index:10;
+
             width: 80px;
 +
            height: 80px;
 +
            border-radius: 50%;
 +
            background-color: white;
 +
            box-shadow: 0px 5px 30px gray;
 
         }
 
         }
 +
        #LOGO {
 +
            z-index: 999;
 +
            position: fixed;
 +
            top: 22px;
 +
            left: 115px;
 +
            width:80px;
 +
        }
 +
 +
 +
 
         .menu {
 
         .menu {
−
             width: 100%;
+
             /*width: 100%;*/
−
             height:55px;
+
             height:65px;
 
             margin: 0;
 
             margin: 0;
 
             /*align-content:center;*/
 
             /*align-content:center;*/
−
             padding: 10px 0 0 255px;
+
             padding: 20px 0 0 23%;
 
             /*padding-right: 30px;*/
 
             /*padding-right: 30px;*/
 
             font-family: 'Georgia','Goudy Old Style Regular',sans-serif !important;
 
             font-family: 'Georgia','Goudy Old Style Regular',sans-serif !important;
Line 35: Line 50:
 
             top: 16px;
 
             top: 16px;
 
             background:white;
 
             background:white;
 +
            box-shadow:gray 0px 3px 3px;
 
             /*background: #e9e9e9;*/
 
             /*background: #e9e9e9;*/
 +
            z-index:99;
 
         }
 
         }
 +
 +
        .caret {
 +
            display: inline-block;
 +
            width: 0;
 +
            height: 6px;
 +
            margin-left: 2px;
 +
            vertical-align:middle;
 +
            border-top: 4px dashed;
 +
            border-top: 4px solid\9;
 +
            border-right: 4px solid transparent;
 +
            border-left: 4px solid transparent;
 +
        }
 +
 
         .neiyebg {
 
         .neiyebg {
 
             position: relative;
 
             position: relative;
Line 64: Line 94:
  
 
         .menu > ul > li {
 
         .menu > ul > li {
 +
            height:50px;
 
             float: left;
 
             float: left;
 
             /*background: #e9e9e9;*/
 
             /*background: #e9e9e9;*/
Line 114: Line 145:
 
             /*width: 185px;*/
 
             /*width: 185px;*/
 
             left: auto;
 
             left: auto;
 +
            top:50px;
 
         }
 
         }
  
Line 132: Line 164:
 
             margin: 0 0 0 16px;
 
             margin: 0 0 0 16px;
 
         }
 
         }
−
 
+
        svg {
−
 
+
            position: relative;
 +
            top: -65px;
 +
            z-index: -99;
 +
        }
 +
       
 
     </style>
 
     </style>
 
</head>
 
</head>
 
<body>
 
<body>
−
<div>
+
    <div id="LOGObg"></div>
 
     <a href="https://2018.igem.org/Team:NAU-CHINA">
 
     <a href="https://2018.igem.org/Team:NAU-CHINA">
−
         <img id="LOGO" src="https://static.igem.org/mediawiki/2018/4/42/T--NAU-CHINA--loading_icon.png" width="150" />
+
         <img id="LOGO" src="https://static.igem.org/mediawiki/2018/4/4d/T--NAU-CHINA--MOSFET_LOGO.png" />
 
     </a>
 
     </a>
−
</div>
 
  
−
<div class="menu">
 
−
    <ul>
 
−
        <li>
 
−
            <a href="#">TEAM</a>
 
−
            <ul>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Team_members">Team members</a></li>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Collaborations">Collaborations</a></li>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Attributions">Attributions</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li>
 
−
            <a href="#">PROJECT</a>
 
−
            <ul>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Overview">Overview</a></li>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Design">Design</a></li>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/InterLab">Interlab</a></li>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Protocols">Protocols</a></li>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Application_prospects">Application prospects</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li>
 
−
            <a href="#">RESULTS</a>
 
−
            <ul>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Demonstrate">Demonstrate</a></li>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Parts">Parts</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li>
 
−
            <a href="https://2018.igem.org/Team:NAU-CHINA/Model">MODEL</a>
 
−
            <ul>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Overview">Overview</a></li>
 
−
                <li><a href="#">Project Modeling</a></li>
 
−
                <li><a href="#">Auxiliary Understanding</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li>
 
−
            <a href="https://2018.igem.org/Team:NAU-CHINA/iGEMCloud">iGEMCloud</a>
 
−
            <ul>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Software">Software</a></li>
 
−
                <li><a href="#">Overview</a></li>
 
−
                <li><a href="#">Main Function</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li>
 
−
            <a href="https://2018.igem.org/Team:NAU-CHINA/Human_Practices">HUMAN PRACTICES</a>
 
−
            <ul>
 
−
                <li><a href="#">Overview</a></li>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Public_Engagement">Public Engagement</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li>
 
−
            <a href="https://2018.igem.org/Team:NAU-CHINA/Safety">SAFETY</a>
 
−
            <ul>
 
−
                <li><a href="#">Overview</a></li>
 
−
                <li><a href="#">Safe Project Design</a></li>
 
−
                <li><a href="#">Safe Lab Work</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li><a href="https://2018.igem.org/Team:NAU-CHINA/Notebook">NOTEBOOK</a></li>
 
  
 +
    <div class="menu">
 +
        <ul>
 +
            <li>
 +
                <a href="#">TEAM<span class="caret"></span></a>
 +
                <ul>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Team_members">Team members</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Collaborations">Collaborations</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Attributions">Attributions</a></li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="#">PROJECT<span class="caret"></span></a>
 +
                <ul>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Overview">Overview</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Design">Design</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/InterLab">InterLab</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Protocols">Protocols</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Application_prospects">Application Prospects</a></li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="#">RESULTS<span class="caret"></span></a>
 +
                <ul>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Demonstrate">Demonstrate</a></li>
 +
               
 +
             
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Basic_Part">Basic Part</a></li>
 +
                      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Composite_Part">Composite Part</a></li>
 +
                      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Improve">Improved Parts</a></li>
 +
                      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Part_Collection">Part Collection</a></li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="#">MODEL<span class="caret"></span></a>
 +
                <ul>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Model">Overview</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Model Details">Model Illustration</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Auxiliary Understanding">Auxiliary Understanding</a></li>
 +
                </ul>
 +
            </li>
 +
            <li><a href="https://2018.igem.org/Team:NAU-CHINA/Software">iGEMCloud</a> </li>
 +
            <li>
 +
                <a href="#">HUMAN PRACTICES<span class="caret"></span></a>
 +
                <ul>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Human_Practices">Overview</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/IntegratedHP">Integrated HP</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Public_Engagement">Public Engagement</a></li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="https://2018.igem.org/Team:NAU-CHINA/Safety">SAFETY</a>
 +
            </li>
 +
            <li><a href="https://2018.igem.org/Team:NAU-CHINA/Notebook">NOTEBOOK</a></li>
 +
        </ul>
 +
    </div>
  
  
  
 +
<div id="banner">
 +
        <img src="#"/>
 +
    </div>
  
−
    </ul>
 
−
</div>
 
  
−
    <!--<script>
 
−
        $(window).scrollTo(300, 500);
 
−
    </script>-->
 
−
<div class="neiyebg">
 
−
    <img src="https://static.igem.org/mediawiki/2018/7/7a/T--NAU-CHINA--neiyebg.png" />
 
−
    <script>
 
−
        //调整内页背景图像尺寸至适合屏幕
 
−
        var l = $(window).width();
 
−
        $(".neiyebg img").attr("width", l - 16);
 
−
        $(".menu").css("width", l - 16);
 
−
        $(window).resize(function () {
 
−
            var l = $(window).width();
 
−
            $(".neiyebg img").attr("width", l);
 
−
            $(".menu").css("width", l);
 
  
−
            if ($(window).width() < 1200) {
 
−
                $(".menu > ul").css("display", "none");
 
−
            }
 
−
            else {
 
−
                $(".menu > ul").css("display", "block");
 
−
            }
 
−
        });
 
−
           
 
−
    </script>
 
−
</div >
 
−
<div>
 
−
    <p>
 
−
        import $ from 'jquery'
 
−
        import Popper from 'popper.js'
 
−
        import Util from './util'
 
  
−
        /**
 
−
        * --------------------------------------------------------------------------
 
−
        * Bootstrap (v4.1.3): dropdown.js
 
−
        * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 
−
        * --------------------------------------------------------------------------
 
−
        */
 
  
−
        const Dropdown = (($) => {
+
<svg version="1.1" id="&#x56FE;&#x5C42;_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
−
        /**
+
        y="0px" viewBox="0 0 865 316" style="enable-background:new 0 0 865 316;" xml:space="preserve">
−
        * ------------------------------------------------------------------------
+
<polyline id="XMLID_7_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
−
        * Constants
+
    773.577,209.06 773.577,181.005 791.092,181.005 791.092,209.01 802.388,209.01 802.449,188.686 813.671,183.11 824.892,188.686
−
        * ------------------------------------------------------------------------
+
    824.892,209.06 831.424,209.01 831.424,184.511 " />
−
        */
+
  
−
        const NAME                    = 'dropdown'
 
−
        const VERSION                  = '4.1.3'
 
−
        const DATA_KEY                = 'bs.dropdown'
 
−
        const EVENT_KEY                = `.${DATA_KEY}`
 
−
        const DATA_API_KEY            = '.data-api'
 
−
        const JQUERY_NO_CONFLICT      = $.fn[NAME]
 
−
        const ESCAPE_KEYCODE          = 27 // KeyboardEvent.which value for Escape (Esc) key
 
−
        const SPACE_KEYCODE            = 32 // KeyboardEvent.which value for space key
 
−
        const TAB_KEYCODE              = 9 // KeyboardEvent.which value for tab key
 
−
        const ARROW_UP_KEYCODE        = 38 // KeyboardEvent.which value for up arrow key
 
−
        const ARROW_DOWN_KEYCODE      = 40 // KeyboardEvent.which value for down arrow key
 
−
        const RIGHT_MOUSE_BUTTON_WHICH = 3 // MouseEvent.which value for the right button (assuming a right-handed mouse)
 
−
        const REGEXP_KEYDOWN          = new RegExp(`${ARROW_UP_KEYCODE}|${ARROW_DOWN_KEYCODE}|${ESCAPE_KEYCODE}`)
 
  
−
        const Event = {
 
−
        HIDE            : `hide${EVENT_KEY}`,
 
−
        HIDDEN          : `hidden${EVENT_KEY}`,
 
−
        SHOW            : `show${EVENT_KEY}`,
 
−
        SHOWN            : `shown${EVENT_KEY}`,
 
−
        CLICK            : `click${EVENT_KEY}`,
 
−
        CLICK_DATA_API  : `click${EVENT_KEY}${DATA_API_KEY}`,
 
−
        KEYDOWN_DATA_API : `keydown${EVENT_KEY}${DATA_API_KEY}`,
 
−
        KEYUP_DATA_API  : `keyup${EVENT_KEY}${DATA_API_KEY}`
 
−
        }
 
  
−
        const ClassName = {
+
<polyline id="XMLID_75_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
−
        DISABLED  : 'disabled',
+
    38.85,162.04 85.307,208.273 773.577,209.06 " />
−
        SHOW      : 'show',
+
−
        DROPUP    : 'dropup',
+
−
        DROPRIGHT : 'dropright',
+
−
        DROPLEFT  : 'dropleft',
+
−
        MENURIGHT : 'dropdown-menu-right',
+
−
        MENULEFT  : 'dropdown-menu-left',
+
−
        POSITION_STATIC : 'position-static'
+
−
        }
+
  
−
        const Selector = {
 
−
        DATA_TOGGLE  : '[data-toggle="dropdown"]',
 
−
        FORM_CHILD    : '.dropdown form',
 
−
        MENU          : '.dropdown-menu',
 
−
        NAVBAR_NAV    : '.navbar-nav',
 
−
        VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
 
−
        }
 
  
−
        const AttachmentMap = {
 
−
        TOP      : 'top-start',
 
−
        TOPEND    : 'top-end',
 
−
        BOTTOM    : 'bottom-start',
 
−
        BOTTOMEND : 'bottom-end',
 
−
        RIGHT    : 'right-start',
 
−
        RIGHTEND  : 'right-end',
 
−
        LEFT      : 'left-start',
 
−
        LEFTEND  : 'left-end'
 
−
        }
 
  
−
        const Default = {
+
<polyline id="XMLID_23_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
−
        offset      : 0,
+
     848.939,157.965 848.939,209.01 831.424,209.01 " />
−
        flip        : true,
+
−
        boundary    : 'scrollParent',
+
−
        reference  : 'toggle',
+
−
        display     : 'dynamic'
+
−
        }
+
  
−
        const DefaultType = {
 
−
        offset      : '(number|string|function)',
 
−
        flip        : 'boolean',
 
−
        boundary    : '(string|element)',
 
−
        reference  : '(string|element)',
 
−
        display    : 'string'
 
−
        }
 
  
−
        /**
 
−
        * ------------------------------------------------------------------------
 
−
        * Class Definition
 
−
        * ------------------------------------------------------------------------
 
−
        */
 
  
−
        class Dropdown {
+
<polyline id="XMLID_6_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" points="
−
        constructor(element, config) {
+
    629.313,191.179 534.577,191.179 498.289,208.273 " />
−
        this._element  = element
+
−
        this._popper  = null
+
−
        this._config  = this._getConfig(config)
+
−
        this._menu    = this._getMenuElement()
+
−
        this._inNavbar = this._detectNavbar()
+
  
−
        this._addEventListeners()
 
−
        }
 
  
−
        // Getters
 
  
−
        static get VERSION() {
+
<circle id="XMLID_5_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="636.125" cy="191.179" r="5.754" />
−
        return VERSION
+
−
        }
+
  
−
        static get Default() {
 
−
        return Default
 
−
        }
 
  
−
        static get DefaultType() {
 
−
        return DefaultType
 
−
        }
 
  
−
        // Public
+
<circle id="XMLID_21_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="849.14" cy="152.212" r="5.754" />
  
−
        toggle() {
 
−
        if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED)) {
 
−
        return
 
−
        }
 
  
−
        const parent  = Dropdown._getParentFromElement(this._element)
 
−
        const isActive = $(this._menu).hasClass(ClassName.SHOW)
 
  
−
        Dropdown._clearMenus()
+
<line id="XMLID_4_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" x1="181.745" y1="196.864" x2="248.412" y2="196.864" />
  
−
        if (isActive) {
 
−
        return
 
−
        }
 
  
−
        const relatedTarget = {
 
−
        relatedTarget: this._element
 
−
        }
 
−
        const showEvent = $.Event(Event.SHOW, relatedTarget)
 
  
−
        $(parent).trigger(showEvent)
+
<line id="XMLID_3_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" x1="221.996" y1="220.53" x2="358.412" y2="220.53" />
  
−
        if (showEvent.isDefaultPrevented()) {
 
−
        return
 
−
        }
 
  
−
        // Disable totally Popper.js for Dropdown in Navbar
 
−
        if (!this._inNavbar) {
 
−
        /**
 
−
        * Check for Popper dependency
 
−
        * Popper - https://popper.js.org
 
−
        */
 
−
        if (typeof Popper === 'undefined') {
 
−
        throw new TypeError('Bootstrap dropdown require Popper.js (https://popper.js.org)')
 
−
        }
 
  
−
        let referenceElement = this._element
+
<circle id="XMLID_2_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="364.165" cy="220.53" r="5.754" />
  
−
        if (this._config.reference === 'parent') {
 
−
        referenceElement = parent
 
−
        } else if (Util.isElement(this._config.reference)) {
 
−
        referenceElement = this._config.reference
 
  
−
        // Check if it's jQuery element
 
−
        if (typeof this._config.reference.jquery !== 'undefined') {
 
−
        referenceElement = this._config.reference[0]
 
−
        }
 
−
        }
 
  
−
        // If boundary is not `scrollParent`, then set position to `static`
+
<line id="XMLID_15_" style="fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" x1="38.85" y1="13.418" x2="38.85" y2="244.708" />
−
        // to allow the menu to "escape" the scroll parent's boundaries
+
−
        // https://github.com/twbs/bootstrap/issues/24251
+
−
        if (this._config.boundary !== 'scrollParent') {
+
−
        $(parent).addClass(ClassName.POSITION_STATIC)
+
−
        }
+
−
        this._popper = new Popper(referenceElement, this._menu, this._getPopperConfig())
+
−
        }
+
  
−
        // If this is a touch-enabled device we add extra
 
−
        // empty mouseover listeners to the body's immediate children;
 
−
        // only needed because of broken event delegation on iOS
 
−
        // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
 
−
        if ('ontouchstart' in document.documentElement &&
 
−
        $(parent).closest(Selector.NAVBAR_NAV).length === 0) {
 
−
        $(document.body).children().on('mouseover', null, $.noop)
 
−
        }
 
  
−
        this._element.focus()
 
−
        this._element.setAttribute('aria-expanded', true)
 
  
−
        $(this._menu).toggleClass(ClassName.SHOW)
+
<path id="XMLID_14_" style="fill:none;stroke:#000000;stroke-miterlimit:10;" d="M38.1,243.167
−
        $(parent)
+
    c15.123,0,27.382,12.259,27.382,27.382c0,15.123-12.259,27.382-27.382,27.382s-27.382-12.259-27.382-27.382
−
        .toggleClass(ClassName.SHOW)
+
    c0-2.704,0.392-5.317,1.122-7.785" />
−
        .trigger($.Event(Event.SHOWN, relatedTarget))
+
−
        }
+
  
−
        dispose() {
 
−
        $.removeData(this._element, DATA_KEY)
 
−
        $(this._element).off(EVENT_KEY)
 
−
        this._element = null
 
−
        this._menu = null
 
−
        if (this._popper !== null) {
 
−
        this._popper.destroy()
 
−
        this._popper = null
 
−
        }
 
−
        }
 
  
−
        update() {
 
−
        this._inNavbar = this._detectNavbar()
 
−
        if (this._popper !== null) {
 
−
        this._popper.scheduleUpdate()
 
−
        }
 
−
        }
 
  
−
        // Private
+
<path id="XMLID_13_" style="fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" d="M56.745,277.209
 +
    c-3.679,10.297-15.008,15.662-25.305,11.984c-10.297-3.679-15.662-15.008-11.984-25.305c3.679-10.297,15.008-15.662,25.305-11.984
 +
    c1.841,0.658,3.525,1.56,5.028,2.658" />
  
−
        _addEventListeners() {
 
−
        $(this._element).on(Event.CLICK, (event) => {
 
−
        event.preventDefault()
 
−
        event.stopPropagation()
 
−
        this.toggle()
 
−
        })
 
−
        }
 
  
−
        _getConfig(config) {
 
−
        config = {
 
−
        ...this.constructor.Default,
 
−
        ...$(this._element).data(),
 
−
        ...config
 
−
        }
 
  
−
        Util.typeCheckConfig(
+
<path id="XMLID_12_" style="fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" d="M38.1,243.167
−
        NAME,
+
    c15.123,0,27.382,12.259,27.382,27.382c0,15.123-12.259,27.382-27.382,27.382s-27.382-12.259-27.382-27.382
−
        config,
+
    c0-2.704,0.392-5.317,1.122-7.785" />
−
        this.constructor.DefaultType
+
−
        )
+
  
−
        return config
 
−
        }
 
  
−
        _getMenuElement() {
 
−
        if (!this._menu) {
 
−
        const parent = Dropdown._getParentFromElement(this._element)
 
−
        if (parent) {
 
−
        this._menu = parent.querySelector(Selector.MENU)
 
−
        }
 
−
        }
 
−
        return this._menu
 
−
        }
 
  
−
        _getPlacement() {
+
<path id="XMLID_11_" style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;" d="M38.484,256.98
−
        const $parentDropdown = $(this._element.parentNode)
+
    c7.494,0.212,13.397,6.458,13.185,13.952c-0.212,7.494-6.458,13.397-13.952,13.185c-7.494-0.212-13.397-6.458-13.185-13.952
−
        let placement = AttachmentMap.BOTTOM
+
    c0.038-1.34,0.269-2.629,0.665-3.842" />
  
−
        // Handle dropup
 
−
        if ($parentDropdown.hasClass(ClassName.DROPUP)) {
 
−
        placement = AttachmentMap.TOP
 
−
        if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
 
−
        placement = AttachmentMap.TOPEND
 
−
        }
 
−
        } else if ($parentDropdown.hasClass(ClassName.DROPRIGHT)) {
 
−
        placement = AttachmentMap.RIGHT
 
−
        } else if ($parentDropdown.hasClass(ClassName.DROPLEFT)) {
 
−
        placement = AttachmentMap.LEFT
 
−
        } else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
 
−
        placement = AttachmentMap.BOTTOMEND
 
−
        }
 
−
        return placement
 
−
        }
 
  
−
        _detectNavbar() {
 
−
        return $(this._element).closest('.navbar').length > 0
 
−
        }
 
  
−
        _getPopperConfig() {
+
<line id="XMLID_10_" style="fill:none;stroke:#000000;stroke-miterlimit:10;" x1="49.275" y1="254.531" x2="53.475" y2="248.397" />
−
        const offsetConf = {}
+
−
        if (typeof this._config.offset === 'function') {
+
−
        offsetConf.fn = (data) => {
+
−
        data.offsets = {
+
−
        ...data.offsets,
+
−
        ...this._config.offset(data.offsets) || {}
+
−
        }
+
−
        return data
+
−
        }
+
−
        } else {
+
−
        offsetConf.offset = this._config.offset
+
−
        }
+
  
−
        const popperConfig = {
 
−
        placement: this._getPlacement(),
 
−
        modifiers: {
 
−
        offset: offsetConf,
 
−
        flip: {
 
−
        enabled: this._config.flip
 
−
        },
 
−
        preventOverflow: {
 
−
        boundariesElement: this._config.boundary
 
−
        }
 
−
        }
 
−
        }
 
  
−
        // Disable Popper.js if we have a static display
 
−
        if (this._config.display === 'static') {
 
−
        popperConfig.modifiers.applyStyle = {
 
−
        enabled: false
 
−
        }
 
−
        }
 
−
        return popperConfig
 
−
        }
 
  
−
        // Static
+
<line id="XMLID_9_" style="fill:none;stroke:#000000;stroke-miterlimit:10;" x1="46.477" y1="252.666" x2="49.574" y2="247.094" />
  
−
        static _jQueryInterface(config) {
 
−
        return this.each(function () {
 
−
        let data = $(this).data(DATA_KEY)
 
−
        const _config = typeof config === 'object' ? config : null
 
  
−
        if (!data) {
 
−
        data = new Dropdown(this, _config)
 
−
        $(this).data(DATA_KEY, data)
 
−
        }
 
  
−
        if (typeof config === 'string') {
+
<line id="XMLID_8_" style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;" x1="34.123" y1="265.51" x2="26.332" y2="255.64" />
−
        if (typeof data[config] === 'undefined') {
+
−
        throw new TypeError(`No method named "${config}"`)
+
−
        }
+
−
        data[config]()
+
−
        }
+
−
        })
+
−
        }
+
  
−
        static _clearMenus(event) {
 
−
        if (event && (event.which === RIGHT_MOUSE_BUTTON_WHICH ||
 
−
        event.type === 'keyup' && event.which !== TAB_KEYCODE)) {
 
−
        return
 
−
        }
 
  
−
        const toggles = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE))
 
−
        for (let i = 0, len = toggles.length; i < len; i++) {
 
−
        const parent = Dropdown._getParentFromElement(toggles[i])
 
−
        const context = $(toggles[i]).data(DATA_KEY)
 
−
        const relatedTarget = {
 
−
        relatedTarget: toggles[i]
 
−
        }
 
  
−
        if (event && event.type === 'click') {
+
<circle id="XMLID_1_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="813.661" cy="198.211" r="5.714" />
−
        relatedTarget.clickEvent = event
+
−
        }
+
  
−
        if (!context) {
 
−
        continue
 
−
        }
 
  
−
        const dropdownMenu = context._menu
 
−
        if (!$(parent).hasClass(ClassName.SHOW)) {
 
−
        continue
 
−
        }
 
  
−
        if (event && (event.type === 'click' &&
+
</svg>
−
        /input|textarea/i.test(event.target.tagName) || event.type === 'keyup' && event.which === TAB_KEYCODE) &&
+
−
        $.contains(parent, event.target)) {
+
−
        continue
+
−
        }
+
  
−
        const hideEvent = $.Event(Event.HIDE, relatedTarget)
 
−
        $(parent).trigger(hideEvent)
 
−
        if (hideEvent.isDefaultPrevented()) {
 
−
        continue
 
−
        }
 
  
−
         // If this is a touch-enabled device we remove the extra
+
    <div class="neiyebg">
−
        // empty mouseover listeners we added for iOS support
+
         <script>
−
        if ('ontouchstart' in document.documentElement) {
+
            //调整内页背景图像尺寸至适合窗口
−
        $(document.body).children().off('mouseover', null, $.noop)
+
            var l = $(window).width(); //获取窗口尺寸
−
        }
+
            //初始化尺寸
 +
            $("#globalWrapper").attr("width", l);
 +
            $(".menu").css("width", l);
  
−
        toggles[i].setAttribute('aria-expanded', 'false')
+
            //随Resize改变尺寸
 +
            $(window).resize(function () {
 +
                var l = $(window).width();
 +
                $("#globalWrapper").attr("width", l);
 +
                $(".menu").css("width", l);
  
−
        $(dropdownMenu).removeClass(ClassName.SHOW)
+
                //窗口尺寸小于1200则切换为新导航模式
−
        $(parent)
+
                if ($(window).width() < 1200) {
−
        .removeClass(ClassName.SHOW)
+
−
        .trigger($.Event(Event.HIDDEN, relatedTarget))
+
−
        }
+
−
        }
+
  
−
        static _getParentFromElement(element) {
+
                    $(".menu").slideUp(1000); $(".menu").css('box-shadow', 'none');
−
        let parent
+
                    $("#LOGO").css({ 'left': '30px', 'transition': '1s' }); $("#LOGObg").css({ 'left': '30px', 'transition': '1s' });
−
        const selector = Util.getSelectorFromElement(element)
+
  
−
        if (selector) {
+
                    //$(".menu").css("display", "none");
−
        parent = document.querySelector(selector)
+
                    //$("#LOGO").hide();
−
        }
+
                }
 +
                else {
 +
                    $(".menu").slideDown(500); $(".menu").css('box-shadow', 'gray 0px 3px 3px');
 +
                    $("#LOGO").css({ 'left': '115px', 'transition': '1s' }); $("#LOGObg").css({ 'left': '115px', 'transition': '1s' });
  
−
        return parent || element.parentNode
+
                    //$(".menu").css("display", "block");
−
        }
+
                    //$("#LOGO").show();
−
 
+
                }
−
        // eslint-disable-next-line complexity
+
            });
−
        static _dataApiKeydownHandler(event) {
+
         </script>
−
        // If not input/textarea:
+
    </div>
−
        //  - And not a key in REGEXP_KEYDOWN => not a dropdown command
+
−
        // If input/textarea:
+
−
        //  - If space key => not a dropdown command
+
−
        //  - If key is other than escape
+
−
        //    - If key is not up or down => not a dropdown command
+
−
        //    - If trigger inside the menu => not a dropdown command
+
−
        if (/input|textarea/i.test(event.target.tagName)
+
−
        ? event.which === SPACE_KEYCODE || event.which !== ESCAPE_KEYCODE &&
+
−
        (event.which !== ARROW_DOWN_KEYCODE && event.which !== ARROW_UP_KEYCODE ||
+
−
        $(event.target).closest(Selector.MENU).length) : !REGEXP_KEYDOWN.test(event.which)) {
+
−
        return
+
−
        }
+
−
 
+
−
        event.preventDefault()
+
−
        event.stopPropagation()
+
−
 
+
−
        if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
+
−
        return
+
−
        }
+
−
 
+
−
        const parent  = Dropdown._getParentFromElement(this)
+
−
        const isActive = $(parent).hasClass(ClassName.SHOW)
+
−
 
+
−
        if (!isActive && (event.which !== ESCAPE_KEYCODE || event.which !== SPACE_KEYCODE) ||
+
−
        isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) {
+
−
        if (event.which === ESCAPE_KEYCODE) {
+
−
        const toggle = parent.querySelector(Selector.DATA_TOGGLE)
+
−
        $(toggle).trigger('focus')
+
−
        }
+
−
 
+
−
        $(this).trigger('click')
+
−
        return
+
−
        }
+
−
 
+
−
        const items = [].slice.call(parent.querySelectorAll(Selector.VISIBLE_ITEMS))
+
−
 
+
−
        if (items.length === 0) {
+
−
        return
+
−
        }
+
−
 
+
−
        let index = items.indexOf(event.target)
+
−
 
+
−
        if (event.which === ARROW_UP_KEYCODE && index > 0) { // Up
+
−
        index--
+
−
        }
+
−
 
+
−
        if (event.which === ARROW_DOWN_KEYCODE && index < items.length - 1) { // Down
+
−
        index++
+
−
        }
+
−
 
+
−
        if (index < 0) {
+
−
        index = 0
+
−
        }
+
−
 
+
−
        items[index].focus()
+
−
        }
+
−
        }
+
−
 
+
−
        /**
+
−
        * ------------------------------------------------------------------------
+
−
        * Data Api implementation
+
−
        * ------------------------------------------------------------------------
+
−
        */
+
−
 
+
−
        $(document)
+
−
        .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler)
+
−
        .on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler)
+
−
        .on(`${Event.CLICK_DATA_API} ${Event.KEYUP_DATA_API}`, Dropdown._clearMenus)
+
−
        .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
+
−
        event.preventDefault()
+
−
        event.stopPropagation()
+
−
        Dropdown._jQueryInterface.call($(this), 'toggle')
+
−
        })
+
−
         .on(Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => {
+
−
        e.stopPropagation()
+
−
        })
+
−
 
+
−
        /**
+
−
        * ------------------------------------------------------------------------
+
−
        * jQuery
+
−
        * ------------------------------------------------------------------------
+
−
        */
+
−
 
+
−
        $.fn[NAME] = Dropdown._jQueryInterface
+
−
        $.fn[NAME].Constructor = Dropdown
+
−
        $.fn[NAME].noConflict = function () {
+
−
        $.fn[NAME] = JQUERY_NO_CONFLICT
+
−
        return Dropdown._jQueryInterface
+
−
        }
+
−
 
+
−
        return Dropdown
+
−
        })($, Popper)
+
−
 
+
−
        export default Dropdown
+
−
 
+
−
    </p>
+
−
</div>
+
 
     <script>
 
     <script>
 
         $(document).ready(function () {
 
         $(document).ready(function () {
Line 739: Line 373:
 
             //导航背景变色+下滑方法
 
             //导航背景变色+下滑方法
 
             $(".menu > ul > li").hover(function () {
 
             $(".menu > ul > li").hover(function () {
−
                 //$(this).css({ "background-color": "#f0f0f0" });
+
                 //$(this).css({"background-color":"#f0f0f0"});
 
                 $(this).children("ul").stop(true, false).slideToggle(300);
 
                 $(this).children("ul").stop(true, false).slideToggle(300);
 
             });
 
             });
 
             //背景颜色还原+下拉菜单消失
 
             //背景颜色还原+下拉菜单消失
 
             $(".menu > ul > li").mouseleave(function () {
 
             $(".menu > ul > li").mouseleave(function () {
−
                 //$(this).css({ "background-color": "transparent" });
+
                 //$(this).css({"background-color":"#fff"});
 
                 $(this).children("ul").hide();
 
                 $(this).children("ul").hide();
 
             });
 
             });
Line 750: Line 384:
 
     </script>
 
     </script>
 
     <script>
 
     <script>
 +
        $(document).ready(function () {
 +
            $(".personalBox img").attr({ "height": "600px" });
 +
            var colors = ['red', 'orange', 'yellow', 'green', 'wheat', 'blue', 'purple']
 +
            var color1 = colors[parseInt(Math.random() * 7)];
 +
            var color2 = colors[parseInt(Math.random() * 7)];
 +
            var color3 = colors[parseInt(Math.random() * 7)];
 +
            var color4 = colors[parseInt(Math.random() * 7)];
  
−
              
+
             $('#XMLID_5_').css('fill', color1);
−
 
+
            $('#XMLID_21_').css('fill', color2);
 +
            $('#XMLID_2_').css('fill', color3);
 +
            $('#XMLID_1_').css('fill', color4);
 +
        });
  
 
     </script>
 
     </script>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 02:39, 18 October 2018

header