dart js-interop with jquery ui

我是Dart的新手，我無法開始使用js-interop庫。我想從jquery ui添加滑塊到我的頁面，但我無法弄清楚如何執行Dart的滑塊（）設置調用。 js-interop是否是正確的方式？一些有關這方面的幫助將不勝感激。dart js-interop with jquery ui

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

來源

2012-11-02 0tto

你的情況，你必須使用js.context $（ '＃滑蓋範圍'）代替查詢（ '＃滑蓋範圍'）。基本上，js.context允許訪問任何Javascript變量。通過使用js.context。$您可以在飛鏢一側訪問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); 
    }); 
}

來源

2012-11-02 14:28:30

感謝您的快速回復。你的解決方案似乎很好但是現在我在var選項行中出現錯誤：http://paste2.org/p/2419107有什麼想法？ – 0tto

自r14094起，Map.getKeys（）已更改爲Map.keys。 pub.dartlang.org中js-interop的最新版本不包含具有該更改的更新。在新版本登陸之前，您必須直接使用包含補丁的git：//github.com/dart-lang/js-interop.git。 –

謝謝亞歷山大！ – 0tto

另一個示例代碼：

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

在HTML

<script src="packages/browser/interop.js"></script>

上面的代碼使用jQuery打開一個div如對話框。

來源

2013-06-22 10:07:27 greensuisse

此評論無效。任何人都可以更新嗎？ – maugch

dart js-interop with jquery ui

回答

相關問題