[英]How to include jquery plugin in ionic 3
我正在尝试在我的离子应用程序中实现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/
在您的index.html中链接jquery.js:
<script src="assets/js/jquery-3.2.1.min.js"></script>
在节点中运行:
npm install jquery
并将其导入您的页面,例如:
import * as $ from "jquery";
尝试像这样在您的身体底部添加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>
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.