Polymer 1.x：將jQuery范圍滑塊包裝在Polymer元素內
[英]Polymer 1.x: Wrapping a jQuery range slider inside a Polymer element
問題描述
我正在嘗試將ion.rangeSlider包裝在Polymer元素內，但是我無法使其在jsBin中工作 。
請告訴我如何使它在jsBin中工作。
<!doctype html> <head> <meta charset="utf-8"> <base href="https://polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link href="polymer/polymer.html" rel="import"> <link href="paper-button/paper-button.html" rel="import"> <script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script> <link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css"> <link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css"> </head> <body> <dom-module id="x-element"> <template> <style> /** / References: http://jsfiddle.net/IonDen/qv6yrjrv/ https://github.com/IonDen/ion.rangeSlider#experiments-playground /**/ body { margin: 40px 15px; font-family: Arial, sans-serif; font-size: 12px; } .range-slider { position: relative; height: 80px; } .extra-controls { position: relative; border-top: 3px solid #000; padding: 10px 0 0; } </style> <div class="range-slider"> <input type="text" class="js-range-slider" value="" /> </div> <div class="extra-controls"> Placeholder for some buttons to change slider behavior </div> </template> <script> (function(){ Polymer({ is: "x-element", properties: { } }); })(); </script> <script> $(document).ready(function () { var $range = $(".js-range-slider"); $range.ionRangeSlider({ type: "double", min: 100, max: 1000, from: 300, to: 800 }); }); </script> </dom-module> <x-element></x-element> </body>
更新：當我執行以下操作時， 它的工作原理如下所示 。
- 將第二個
<script>標記移到Polymer元素模板之外，並移入主文檔主體（淺DOM）。 - 在
<head>添加jQuery庫資源。 - 刪除
$(document).ready(function(){
但我仍然需要得到它與聚合物元件模板中的JavaScript工作。
1 個解決方案
解決方案1
1 已采納 2016-01-25 07:48:50
您已經接近部分工作的示例，在該示例中，您在ready調用ionRangeSlider函數。 但是，首先需要使用滑塊輸入作為參數來調用jQuery函數$() 。
ready: function(){
$(this.$.slider).ionRangeSlider({
type: "double",
min: 100,
max: 1000,
from: 300,
to: 800
});
}
這是一個工作的jsBin
將jQuery插件包裝在Polymer 1.x元素中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.