Question

我正在尝试在Aurelia中使用ionRangeSlider插件，但我不确定如何使用它。

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

我有jspm＆＃39;它进入我的项目但是如何导入它以及调用运行插件的一个函数？

Answer 1

您将在package.json中找到包含ion-rangesider的确切包名：

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

以下是如何使用bootstrap popover的示例。我想你应该能够做同样的事情并在$("#example_id").ionRangeSlider();函数中调用bind 如果您导入了所有资源

Answer 3

首先安装ion-rangeslider：

npm install ion-rangeslider

jspm install npm：ion-rangeslider

创建自定义属性

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);
}

将css导入app.html或在应用程序中导入css的位置

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

现在，您可以在任何视图

中的输入中使用您的属性

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

如何在Aurelia进口ion-rangelider

3 个答案: