[英]Dart js-interop with jquery ui
I'm new to Dart and I'm having trouble getting started with the js-interop library. 我是Dart的新手,我在开始使用js-interop库时遇到了麻烦。 I want to add a slider from jquery ui to my page, but I cannot figure out how to do the slider() setup call from Dart. 我想从jquery ui添加一个滑块到我的页面,但我无法弄清楚如何从Dart进行slider()设置调用。 Is js-interop the correct way of doing this? js-interop是正确的做法吗? Some help with this would be much appreciated. 对此的一些帮助将非常感激。
void main() {
js.scoped(() {
var slider = query('#slider-range');
var options = js.map({
'range': true,
'values': [ 17, 67 ]
});
// This doesn't work. Element has no method named slider.
slider.slider(options);
// In javascript it's done like this:
// $( "#slider-range" ).slider({
// range: true,
// values: [ 17, 67 ]
// });
// This alert works.
js.context.alert('Hello from Dart via JS');
});
}
In your case, you have to use js.context.$('#slider-range') instead of query('#slider-range') . 在您的情况下,您必须使用js.context。$('#slider-range')而不是query('#slider-range') 。 Basically, js.context allows to access any Javascript variable. 基本上, js.context允许访问任何Javascript变量。 By using js.context.$ you get access to the jQuery javascript object (ie. $ ) on dart side. 通过使用js.context。$,您可以在dart端访问jQuery javascript对象(即。 $ )。
import 'dart:html';
import 'package:js/js.dart' as js;
void main() {
js.scoped(() {
var slider = js.context.$('#slider-range');
var options = js.map({
'range': true,
'values': [ 17, 67 ]
});
slider.slider(options);
});
}
Another sample code: 另一个示例代码:
import 'package:js/js.dart' as js;
js.context.jQuery();
var context = js.context;
var param = js.map({ 'modal': true, "width":1000, "height":600});
js.context.jQuery("#dialog").dialog(param);
in html 在HTML中
<script src="packages/browser/interop.js"></script>
The above code open a div as dialog using jQuery. 上面的代码使用jQuery打开一个div作为对话框。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.