聚合物—可触摸的自定义元素

Question

我创建了一个包含JQuery-Knob的简单自定义元素，并将其放置在core-scaffold布局中。 与之互动时，我注意到原点不正确。 表现得好像脚手架不在那。

另一件事是，当将data-width属性设置为大于200时，旋钮的底部将被切除。

是什么原因造成的，我该如何解决？

在此处输入图片说明

fancy_knob.html：

<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="fancy-knob">
  <template>
      <input type="text" value="90" id="dial" data-width="400">
  </template>
  <script type="application/javascript">
    Polymer({
        ready: function() {
            $(this.$.dial).knob();
        }
    })
  </script>
</polymer-element>

index.html：

<!doctype html>
<html>
    <head>
        <script src="bower_components/platform/platform.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://rawgit.com/aterrien/jQuery-Knob/master/dist/jquery.knob.min.js"></script>

        <link rel="import" href="bower_components/core-scaffold/core-scaffold.html">

        <link rel="import" href="fancy_knob.html">

        <style>
            html,body {
                height: 100%;
                margin: 0;
            }
        </style>

    </head>
    <body unresolved>
        <core-scaffold>
            <fancy-knob></fancy-knob>
        </core-scaffold>
    </body>
</html>

Answer 1

聚合物芯支架

要使用core-scaffold ，必须使用导航器，例如core-header-panel ，nav等

<body unresolved>
    <core-scaffold>
        <core-header-panel></core-header-panel>
        <fancy-knob></fancy-knob>
    </core-scaffold>
</body>

如果您仍想隐藏侧边栏，请使用以下样式：

core-scaffold /deep/ core-drawer-panel /deep/ core-selector #main {
    left: 0 !important;
}
core-scaffold /deep/ core-drawer-panel /deep/ core-selector #drawer {
    width: 0 !important;
}

jQuery旋钮

请同时指定data-height=400 （默认值为200）。

聚合物—可触摸的自定义元素

问题描述

1 个解决方案

解决方案1
0 2014-09-15 04:37:09

聚合物芯支架

jQuery旋钮

聚合物—可触摸的自定义元素

问题描述

1 个解决方案

解决方案1 0 2014-09-15 04:37:09

聚合物芯支架

jQuery旋钮

解决方案1
0 2014-09-15 04:37:09