1. casa
  2. Domanda e risposta
  3. Ionic2 Come utilizzare JQuery Plugin nella pagina

Ionic2 Come utilizzare JQuery Plugin nella pagina

2016-07-02 30 views
6

Sono un principiante di ionica 2, genero del progetto e la necessità di plugin jQuery collegamento colorbox, chiazza di petrolio-carosello ...Ionic2 Come utilizzare JQuery Plugin nella pagina

ho eseguito il comando in un terminale

npm install jquery slick-carousel 
typings install jquery --ambient --save 
typings install slick-carousel --ambient --save

ho importato il JQuery:

import * as JQuery from 'jquery'; 
import * as slick from 'slick-carousel';

errore Poi ionico è: Can not find module 'slick-carousel'.

Per favore aiutami a risolvere questo problema, o hai degli esempi pronti in modo che possa fare riferimento.

Grazie a tutti!

fonte

2016-07-02 Nho Huynh

risposta

4

Poiché slick-carousel non ha alcun modulo esportato (aggiunge solo funzioni concatenabili su jQuery), il metodo per importarlo è diverso. Ecco un esempio minimo:

// app/pages/carousel/carousel.ts 
import { Component } from "@angular/core"; 
import { NavController } from "ionic-angular"; 
import * as $ from "jquery"; 
import "slick-carousel"; 

@Component({ 
    templateUrl: "build/pages/carousel/carousel.html" 
}) 
export class CarouselPage { 

    constructor(public nav: NavController) {} 

    ionViewLoaded() { 
     $(".myCarousel").slick(); 
    } 
}

Nota che aggiungiamo l'inizializzazione giostra al gestore ionViewLoaded() eventi per assicurarsi che il DOM è stato caricato. E poi il modello:

<!-- app/pages/carousel/carousel.html --> 
<ion-navbar *navbar> 
    <button menuToggle> 
    <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Carousel</ion-title> 
</ion-navbar> 

<ion-content padding class="carousel"> 
    <div class="myCarousel"> 
    <div>Item 1</div> 
    <div>Item 2</div> 
    <div>Item 3</div> 
    </div> 
</ion-content>

E, infine, fa in modo di importare il CSS aggiungendo questo al file app/theme/app.core.scss:

@import "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css";

Buon divertimento!

fonte

2016-07-03 03:20:49 morphatic

+0

funziona bene, grazie @morphatic –

+1

e come utilizzare jQuery colorbox in ionica. Importazione e utilizzo, ma errore: TypeError: $ (...) colorbox non è una funzione import * as $ from 'jquery'; importazione 'jquery-colorbox'; uso: ngAfterViewInit() { $ ('. Colorbox'). Colorbox(); } –

+0

Come meglio posso dire, il plugin 'jquery-colorbox' non è stato aggiornato per funzionare con nessuno degli schemi di caricamento dei moduli (Node, AMD, UMD, ecc.). Puoi dare un'occhiata a ['angular-colorbox'] (https://github.com/igorlino/angular-colorbox) che sembra essere una riscrittura progettata per funzionare con Angular. Al contrario, si potrebbe anche considerare l'utilizzo di [diapositive di Ionic2] (http://ionicframework.com/docs/v2/components/#slides) che è nativo del framework e progettato per fare ciò che fa jquery-colorbox'. – morphatic

Problemi correlati

 Problemi correlati