Javascript 如何在ionic 3中包含jquery插件_Javascript_Jquery_Ionic3

Javascript 如何在ionic 3中包含jquery插件

javascript jquery

Javascript 如何在ionic 3中包含jquery插件,javascript,jquery,ionic3,Javascript,Jquery,Ionic3,我正在尝试在我的ionic应用程序中实现jQuery FloatLabel-> 我使用该插件是因为该插件也在web版本中实现，所以在设计上是统一的我用jquery将其包含在src/index.html中 <link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"

我正在尝试在我的ionic应用程序中实现jQuery FloatLabel->

我使用该插件是因为该插件也在web版本中实现，所以在设计上是统一的

我用jquery将其包含在src/index.html中

<link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="assets/js/jquery.FloatLabel/jquery.FloatLabel.js"></script>

这是我的src/index.html代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <link href="build/main.css" rel="stylesheet">

  <link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="assets/js/jquery.FloatLabel/jquery.FloatLabel.js"></script>

  <script type="text/javascript">
    $( '.js-float-label-wrapper' ).FloatLabel();
  </script>

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

它可以在web版本上工作，但不能在ionic中工作。如何在ionic上实现这一点

我希望它像小提琴一样->

尝试在身体底部添加JavaScript代码，如下所示：

<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

  <script type="text/javascript">
    $( '.js-float-label-wrapper' ).FloatLabel();
  </script>
</body>

或者您可以尝试使用Ionic浮动标签，这样即使不是统一设计，也不需要在项目中使用JQuery和其他库

<ion-item>
  <ion-label color="primary" floating>Floating Label</ion-label>
  <!-- Use the floating attribute to have your label to float when you focus on the input -->
  <ion-input></ion-input>
</ion-item>

希望这有帮助。

在index.html中链接jquery.js：

  <script src="assets/js/jquery-3.2.1.min.js"></script>

并将其导入页面，如：

import * as $ from "jquery";

您在控制台上有任何错误吗？我想你应该调用document readyNo console errors的floatlabel函数，我已经这么做了，你用的是ionic吗？是的，我用的是ionic，我没有遇到过这样的问题。你在控制台中有没有遇到任何错误？没有控制台错误，你是否尝试在爱奥尼亚中使用外部jquery插件？嗨，你找到解决方案了吗？我也有同样的问题，已经安装了jquery只需要让插件正常工作它不工作，我尝试像这样导入*作为FloatLabel从“../../assets/js/jquery.FloatLabel/jquery.FloatLabel.js”导入；并在ionViewDidLoad{$'.js float label wrapper'.FloatLabel；}中使用它，但我有一个错误类型error:\uuuuuu网页包\uu导入的模块\uu 6\ujQuery\uuuuu…FloatLabel不是一个函数

  <script src="assets/js/jquery-3.2.1.min.js"></script>

npm install jquery

import * as $ from "jquery";