javascript - jQuery 动画不适用于 SAPUI5

标签 javascript jquery html css sapui5

我正在构建一个 TreeView ，它根据用户在前一列中单击的按钮滑出。单击第一列按钮时出现此错误:

Uncaught TypeError: $(...).effect is not a function
    at runEffect1 (test:39)
    at HTMLDivElement.<anonymous> (test:66)
    at HTMLDivElement.dispatch (jquery-dbg.js:4737)
    at HTMLDivElement.c3.handle (jquery-dbg.js:4549)

我该如何解决？当我使用 vanilla JavaScript 并且没有导入 SAPUI5 时，这些函数有效，但现在使用 jQuery 会出现问题。我需要将 SAPUI5 与 jQuery 一起使用。此外，由于添加了 SAPUI5，该代码段无法正常工作。

$(document).ready(function() {
  $(function() {
    // run the currently selected effect
    function runEffect1() {
      var selectedEffect = "slide";
      var options = {};

      /* Hide the columns so that they can slide into display*/
      $("#column_2").hide();
      $("#column_3").hide();
      $("#column_4").hide();

      // Run the effect
      $("#column_2").effect(selectedEffect, options, 450, function() {
        $("#column_3").effect(selectedEffect, options, 450, function() {
          $("#column_4").effect(selectedEffect, options, 450, callback);
        });
      });
    };

    // Callback function to bring a hidden box back

    function callback() {
      setTimeout(function() {
        $("#effect").removeAttr("style").hide().fadeIn();
      }, 100);
    };

    // Set effect from select menu value
    $("#column_1").on("click", function() {
      runEffect1();
      return false;
    });

    $("#column_2").on("click", function() {
      runEffect2();
      return false;
    });
  
  });

});



function myFunction2(e) {
  test = e;
  console.log(e);

  jQuery("#column_2").html("");
  jQuery("#column_2").html("<span style='color:#FFFFFF'> GL Accounts </span>");
  jQuery("#column_3").html("");
  jQuery("#column_3").html("<span style='color:#FFFFFF'> GL Name </span>");
  jQuery("#column_4").html("");
  jQuery("#column_4").html("<span style='color:#FFFFFF'> GL Balance </span>");
  jQuery("#column_5").html("");

  for (var prop3 in array0) {
  
    jQuery("#column_2").append('<div class="col-md-auto"> <button type="button" id=' + prop3 + '  class="list-group-item" onclick="myFunction4(this.id)">test</button></div>');
    jQuery("#column_3").append('<div class="col-md-auto"> <button type="button" id=' + prop3 + '  class="list-group-item" onclick="myFunction4(this.id)">test1</button></div>');
    jQuery("#column_4").append('<div class="col-md-auto"> <button type="button" id=' + prop3 + '  class="list-group-item" onclick="myFunction4(this.id)">test2</button></div>');

  }

  for (var prop2 in array17) {
   
    jQuery("#column_4").append('<div class="col-md-auto"> <button type="button" id=' + prop2 + ' class="list-group-item" onclick="myFunction2(this.id)">test3</button></div>');

  }

}

function myFunction4(e) {
  test = e;
  console.log(e);

  jQuery("#column_5").html("");
  jQuery("#column_5").html("<span style='color:#FFFFFF'> Breakdown </span>");


  for (var prop5 in array11) {
    
    jQuery("#column_5").append('<div class="col-md-auto"> <button type="button" id=' + prop5 + '  class="list-group-item" onclick="myFunction5(this.id)">test4</button></div>');



  }
}

function myFunction5(e) {
  test = e;
  console.log(e);
  window.open("", "", "width=500,height=500");
}

sap.ui.getCore().attachInit(function() {



  console.log("SAPUI5 modules loaded....")
  jQuery("#column_1").html("");
  jQuery("#column_1").html("<span style='color:#FFFFFF'> Account Group </span>");

  for (var prop in array2) {

    jQuery("#column_1").append('<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">test0</button></div>');


  }
});
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}

.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}

.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4778b7;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

.form button:hover,
.form button:active,
.form button:focus {
  background: #7ac1db;
}

.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}

.form .message a {
  color: #4CAF50;
  text-decoration: none;
}

.form .register-form {
  display: none;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}

.container:before,
.container:after {
  content: "";
  display: block;
  clear: both;
}

.container .info {
  margin: 50px auto;
  text-align: center;
}

.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}

.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}

.container .info span a {
  color: #000000;
  text-decoration: none;
}

.container .info span .fa {
  color: #EF3B3A;
}

body {
  background: #4778b7;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #4778b7, #4778b7);
  background: -moz-linear-gradient(right, #4778b7, #4778b7);
  background: -o-linear-gradient(right, #4778b7, #4778b7);
  background: linear-gradient(to left, #4778b7, #4778b7);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
<html>

<head>
  <meta http-equiv='X-UA-Compatible' content='IE=edge' />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


  <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal">
  </script>

</head>

<body class='sapUiBody'>
  <div id='content'></div>
  <div id="grid" class="container-fluid">
    <div class="row no-gutter">
      <div class="col-md-2">
        <div id="column_1">
          <div class="list-group"></div>
          <div class='col-md-auto'>
            <button type='button' id=1 class='list-group-item'>test</button>
          </div>
        </div>
      </div>
      <div class="col-md-2 ">

        <div id="column_2">
          <div class="list-group"></div>
        </div>
      </div>
      <div class="col-md-2 ">
        <div id="column_3">
          <div class="list-group"></div>
        </div>
      </div>
      <div class="col-md-2 ">

        <div id="column_4">
          <div class="list-group"></div>
        </div>
      </div>
      <div class="col-md-2">
        <div id="column_5">
          <div class="list-group"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

最佳答案

问题是 sap-ui-core.js 引起的；使用 jQuery noConflict。

$.noConflict();
$(document).ready(function() {
      ...
});

关于javascript - jQuery 动画不适用于 SAPUI5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46952217/

上一篇：javascript - 如何确保预加载器覆盖整个高度并且没有可见的加载页面元素？

下一篇：jquery - Paypal 按钮定制 Bootstrap 喜欢

相关文章：

javascript - jquery ajax到文件://not working in IE

javascript - 自定义滚动用户体验

JavaScript 首先将 Markdown 拆分为标题，然后拆分为句子

javascript - jquery中的滚动动态 ListView

javascript - 遍历每个元素并只获取直接在节点中的内容

javascript - 关于同源策略(sop)和 csrf 保护的困惑

javascript - 将 jquery 添加到 React 入门工具包

jquery - 为什么类相关的onclick事件只触发一次？

javascript - 神秘的空值添加到我的数组的开头

javascript - 如何阻止来自父 DOM 的点击事件？

©2024 IT工具网  联系我们