Как импортировать ионный диапазон в Aurelia

Question

Я пытаюсь использовать плагин ionRangeSlider в Aurelia, но не знаю, как его использовать.

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

Я jspm'd его в свой проект, но как я могу импортировать его, а также вызвать одну функцию, которая запускает плагин?

Answer 1

Вы найдете точные имена пакетов для включения ion-rangesider в вашем package.json:

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> 

Обычно вы бы поставить <require from="xxx.css"></require> тегов внутри slider.html, чтобы обеспечить инкапсуляцию в стиле. В моем примере я помещаю их туда, где я хотел использовать слайдер, потому что мне не нужно создавать slider.html.

Answer 2

Вот пример использования загрузочного popover. Я думаю, вы должны быть в состоянии сделать то же самое и вызывая $("#example_id").ionRangeSlider(); внутри bind функции если вы импортировали все ресурсы

Answer 3

1. Установите ионный rangeslider первый:

   НПМ установки ионно-rangeslider

   JSPM установить НПМ: ион-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. импортировать 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">