如何在Ionic 3中包括jquery插件

Question

I'm trying to implement jQuery FloatLabel in my ionic app -> https://github.com/m10l/FloatLabel.js/tree/master 我正在尝试在我的离子应用程序中实现jQuery FloatLabel-> https://github.com/m10l/FloatLabel.js/tree/master

I used that plugin because that plugin also was implemented in a web version, so to be uniform in design. 我使用该插件是因为该插件也是在Web版本中实现的，因此在设计上要统一。

I included that inside src/index.html with jquery 我在src / index.html中包含了jquery

<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>

I want to execute this script on page load 我想在页面加载时执行此脚本

$( '.js-float-label-wrapper' ).FloatLabel();

Here's my src/index.html code 这是我的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>

It works on web version but not in ionic. 它适用于Web版本，但不适用于离子版本。 How do I implement that on ionic? 如何在离子上实现该功能？

I want it like this fiddle -> https://jsfiddle.net/acrmktq3/ 我想要这样的小提琴-> https://jsfiddle.net/acrmktq3/

Answer 1

link jquery.js in your index.html: 在您的index.html中链接jquery.js：

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

run in node: 在节点中运行：

npm install jquery

and import it in your page like: 并将其导入您的页面，例如：

import * as $ from "jquery";

Answer 2

Try adding your JavaScript code in the bottom of your body like this: 尝试像这样在您的身体底部添加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>

You're addng it before your app initialization, the main.js wasn't even loaded and you've already executed your code, so using it on the bottom of your code should do the trick. 您是在应用初始化之前添加它的， main.js甚至都没有加载，并且您已经执行了代码，因此在代码底部使用它应该可以解决问题。

Also, have you ever tried using this FloatLabel in a Ionic application? 另外，您是否尝试过在Ionic应用程序中使用此FloatLabel？ Since the page may not be loaded and the code already had been executed you need it to be more "Angular way". 由于页面可能未加载且代码已经执行，因此您需要使其更具“角度方式”。 You can use it inside the component that's having the floating label, just use this to be able to use JQuery inside your component: 您可以在具有浮动标签的组件中使用它，只需使用它就可以在组件内部使用JQuery：

declare var $: any; // declare this bellow your page imports to be able to use jQuery

Or you can try Ionic floating Label, so there's no need to have JQuery and other library inside your project, even if it's not "uniform" design 或者，您也可以尝试使用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>

Hope this helps. 希望这可以帮助。

如何在Ionic 3中包括jquery插件

问题描述

2 个解决方案

解决方案1
0 2018-01-26 14:14:50

解决方案2
-1 2018-01-23 18:14:40

如何在Ionic 3中包括jquery插件

问题描述

2 个解决方案

解决方案1 0 2018-01-26 14:14:50

解决方案2 -1 2018-01-23 18:14:40

解决方案1
0 2018-01-26 14:14:50

解决方案2
-1 2018-01-23 18:14:40