如何在Ionic 3中包括jquery插件

Question

我正在嘗試在我的離子應用程序中實現jQuery FloatLabel-> https://github.com/m10l/FloatLabel.js/tree/master

我使用該插件是因為該插件也是在Web版本中實現的，因此在設計上要統一。

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

我想在頁面加載時執行此腳本

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

這是我的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版本，但不適用於離子版本。 如何在離子上實現該功能？

我想要這樣的小提琴-> https://jsfiddle.net/acrmktq3/

Answer 1

在您的index.html中鏈接jquery.js：

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

在節點中運行：

npm install jquery

並將其導入您的頁面，例如：

import * as $ from "jquery";

Answer 2

嘗試像這樣在您的身體底部添加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>

您是在應用初始化之前添加它的， main.js甚至都沒有加載，並且您已經執行了代碼，因此在代碼底部使用它應該可以解決問題。

另外，您是否嘗試過在Ionic應用程序中使用此FloatLabel？ 由於頁面可能未加載且代碼已經執行，因此您需要使其更具“角度方式”。 您可以在具有浮動標簽的組件中使用它，只需使用它就可以在組件內部使用JQuery：

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

或者，您也可以嘗試使用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>

希望這可以幫助。

如何在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