带kendoui菜单的SharePoint jQuery冲突

时间:2018-09-27 23:26:37

标签: jquery sharepoint kendo-ui conflict jscript

我在我的SP环境中添加了kendoui菜单,并且在IE中(它在Chrome中仍然有效)时,它破坏了快速启动栏导航。我认为这是一个冲突,因为SP环境中的jquery比我的代码中运行的jquery更旧。这是我用于冲突的当前代码:

<script>

    var j = jQuery.noConflict();

    j(document).ready(function() {  
        j("#menu").kendoMenu();
    });
</script>

下面是我用来创建菜单栏的所有代码。任何帮助都会很棒!

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: .5vw; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
    <link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.rtl.min.css" />
    <link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.mobile.all.min.css" />
    <link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.default.min.css" />
    <link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.silver.min.css" />
    <link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.default.mobile.min.css" />
    <link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.common.min.css" />

    <script src="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/js/jquery.min.js"></script>
    <script src="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/js/kendo.all.min.js"></script>

    <!--IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
</head>
<body>

    <div id="example">
        <div id="megaStore">
          <div class="table" >
            <ul id="menu">
                <li class="k-state-active">
                   Metrics & Reports
                    <ul>
                        <li></li>
                        <li> MA-MI Metrics & Tracker </li>
                        <li> Monthly Reports </li>
                    </ul>
              </li>
                <li class="k-state-active">
                   Research
                   <ul>
                       <li></li>
                       <li>Phase 3b</li>
                       <li>ISR/Collab</li>
                       <li>MAST Committee</li>
                       <li>Publicaton Review</li>
                       <li>Encores</li>
                       <li>HIV Publications</li>
                       <li>NoCo</li>
                   </ul>
               </li>
               <li>

               </li>
              <li class="k-state-active">
                   GMedical Team Only
                   <ul>
                       <li></li>
                       <li>Meeting Minutes</li>
                       <li>Deck Training & Editorial Board</li>
                       <li>Submissions
                           <ul>
                               <li></li>
                               <li>DHHS</li>
                               <li>IAS</li>
                               <li>Resources</li>
                               <li>Guidelines</li>
                           </ul>
                  </ul>
              </li>                         
              <li class="k-state-active">
                  Tools & Resources
                  <ul>
                     <li></li>
                     <li>POA</li>
                     <li>GMAP</li>
                     <li>SRD Review Process</li>
                     <li>Deck Training</li>
                     <li>GMAP</li>
                  </ul>
               </li>
            </ul>  
          </div>
        </div>
    </div>


<style>
    #megaStore {
        max-width: 100%; height:auto;
        margin: auto auto;
        padding-top: 119px;
        text-align: center;
        height:auto;
      background: url('https://collaborate.gilead.com/MedAffairs/HIV2/Site%20Assets/HIV-banner-v5.jpg') no-repeat center 0;
    }
    #menu {
      max-width: 100%; height: auto;
      margin: auto;
        font-size: 1.25em;
        text-transform: uppercase;
        padding: 5px max-width  ;
        list-style-position: all;
      }

    .bob {
      width: 19.935%;
      margin:auto;
      font-size: 1em;
    }

.k-item.k-state-default.k-first
 {
     margin-left: 25%;
 }

    ul { text-align: left; }

    ul li { display: inline-block; }

    #template img {
        margin: 5px 20px 0 0;
        float: left;
    }
    #template {
        width: 380px;
    }
    #template ol {
        float: left;
        margin: 0 0 0 30px;
        padding: 10px 10px 0 10px;
    }
    #template:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    #template .k-button {
        float: left;
        clear: left;
        margin: 5px 0 5px 12px;
    }
</style>
<script>

    var j = jQuery.noConflict();

    j(document).ready(function() {  
        j("#menu").kendoMenu();
    });
</script>
</body>
</html>

[1]: https://i.stack.imgur.com/gZ3Eo.png erors

0 个答案:

没有答案