0
다음과 같은 문제가 있습니다. http://jqueryui.com/autocomplete/의 코드 샘플은 폴리머 요소 내부에서 사용할 때 제대로 작동하지 않습니다. 나는 그 드롭 다운이 입력 요소의 하단에 표시되지만 이것은 페이지 상단에 나타납니다. 자동 완성은 예상대로 항목 페이지에서 잘 작동합니다. 아래 코드를 참조하십시오. 내 고분자 요소 코드에서 무엇이 잘못 되었습니까? JQuery UI를 다트 폴리머와 함께 사용할 수 있습니까? 당신은 나에게 폴리머와 JQuery Autocomplete까지 모든 해결 방법을 제안 해 줄 수 있습니까? 최신 버전의 다트, 다트 - 폴리머 라이브러리 및 JQuery UI를 사용합니다.Polymer + JQuery UI + Dart : 자동 완성 기능이 제대로 작동하지 않습니다.
Dart Editor version 1.5.1.release (STABLE)
Dart SDK version 1.5.1
Dart-Polymer version 0.11.0+5
JQuery UI version 1.11.0
는 항목 페이지 : 항목 페이지에서
자동 완성 - 잘못 작동합니다! 자동 완성 항목 페이지에서
는 - 또한 the source code of this example
를 참조하십시오 잘 작동합니다.
코드는 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autocomplete</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<!-- import the click-counter -->
<link rel="import" href="autocomplete.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
<!-- JQuery UI -->
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<h1>Autocomplete JQuery UI Autocomplete issue!</h1>
<p>Polymer Element version of Autocomplete</p>
<div>
<cc-autocomplete count="5"></cc-autocomplete>
</div>
<br />
<p>Entry Page version of Autocomplete</p>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="cc-autocomplete">
<template>
<link rel="stylesheet" href="jquery-ui.css">
<!-- JQuery Autocomplete in the polymer element -->
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</template>
<script>
Polymer('cc-autocomplete', {
ready: function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(this.$.tags).autocomplete({
source: availableTags
});
}
});
</script>
<script type="application/dart" src="autocomplete.dart"></script>
</polymer-element>
import 'package:polymer/polymer.dart';
@CustomTag('cc_autocomplete')
class MyAutocomplete extends PolymerElement {
MyAutocomplete.created() : super.created();
}
폴리머 shadowDOM와 jQuery를이 shadowDOM를 지원하지 않습니다 소개합니다. –
나는이 문제를 해결할 수있는 해결 방법이 있다고 생각한다. 폴리머 0.9.0에서이 코드는 나를 위해 일했다 .. – Roman
native js + dart? 결코 나를 위해 좋은 생각 :) 나는 그것을 사용하지 않을 것이다. – Robert