Aureliaでion-rangesliderをインポートする方法

Question

AureliaでionRangeSliderプラグインを使用しようとしていますが、使用方法がわかりません。

https://github.com/IonDen/ion.rangeSlider/issues

私は自分のプロジェクトにjspm'dているが、どのように私はそれをインポートするだけでなく、プラグインを実行している一つの関数を呼び出すのですか？

Answer 1

をインポートした場合は、あなたのpackage.jsonでion-rangesiderを含むため、正確なパッケージ名を検索しますbind機能 内から$("#example_id").ionRangeSlider();同じと呼び出しを行うことができる必要がありますね。

jspm": { 
    "dependencies": { 
     ... 
     "ion-rangeslider": "npm:ion-rangeslider@^2.1.3", 
     "jquery": "npm:jquery@^2.2.3", 
     ... 
    } 
} 

次に、あなたは次のように独自のカスタム要素を作成する必要があります。

import {inject, noView} from 'aurelia-framework'; 
//import your dependencies 
import $ from 'jquery'; 
import ionRangeSlider from 'ion-rangeslider'; 

@noView() 
@inject(Element) 
export class Slider { 

    constructor(element){ 
     this.element = element; 
    } 

    bind(){ 
     $(this.element).ionRangeSlider({min: 100, max: 1000, from: 550}); 
    } 
} 

そして、あなたはあなたのスライダーを使用したい場所を次のように記述する必要があります。

<require from='./slider'></require> 
<require from="ion-rangeslider/css/ion.rangeSlider.skinHTML5.css"></require> 
<require from="ion-rangeslider/css/ion.rangeSlider.css"></require> 
<slider></slider> 

通常は、スタイルのカプセル化を確実にするためにslider.html内<require from="xxx.css"></require>タグを入れてしまうでしょう。私の例では、slider.htmlを作成する必要がないので、スライダを使用したい場所に配置しました。

Answer 2

ここでは、ブートストラップポップオーバーの使用例を示します。 は、私はあなたがすべてのリソースに

Answer 3

1. 第1のイオンrangesliderをインストールします：イオンrangeslider

2. import {customAttribute, bindable, inject} from 'aurelia-framework'; 
   import {ionRangeSlider} from 'ion-rangeslider';  
   @customAttribute('rangeslider') 
   @inject(Element) 
   export class RangesliderCustomAttribute { 
       //make your own options based on requirements 
       options = { type: "single", min: 0, max: 100 };  
       constructor(element) { 
       this.element = element; 
       } 
       attached() { 
       $(this.element).ionRangeSlider(this.options).on('change', e => { 
        fireEvent(e.target, 'input'); 
       }); 
       } 
   
       detached() { 
       $(this.element).ionRangeSlider('destroy').off('change'); 
       } 
   } 
   
   function createEvent(name) { 
       var event = document.createEvent('Event'); 
       event.initEvent(name, true, true); 
       return event; 
   } 
   
   function fireEvent(element, name) { 
       var event = createEvent(name); 
       element.dispatchEvent(event); 
   } 
   

3. カスタム属性を作成します。

   NPMは、NPMが

   JSPMをインストールするイオンrangesliderをインストールcssをapp.htmlにインポートするか、どこでcssをインポートするかウルアプリケーション

   <require from="ion-rangeslider/css/ion.rangeSlider.css"></require> 
   <require from="ion-rangeslider/css/ion.rangeSlider.skinNice.css"></require> 
   

4. は今、あなたは、私は従わない

   <require from="./rangeslider"></require> 
   <input rangeslider type="text" value.bind="yourInitialSliderValue">