Here is the vaadin-context-menu documentation page。vaadin-context-menuデモを動作させるには？

このページには、TRY IT OUTthat links to a demo page hereと表示されたボタンがあります。

私の問題は、私がデモページを実際に何かすることができないということです。コンソールにエラーは表示されません。

私の最後に問題がありますか？または、デモに何か問題がありますか？後者の場合、デモを動作させるためにコードを修正するにはどうすればよいですか？

解決策をjsBinまたはCodepenで表示してください。

https://jsbin.com/yihupap/1/edit?html,output

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>vaadin-context-menu demo</title> 
    <script src="https://cdn.vaadin.com/vaadin-core-elements/master/webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-context-menu/vaadin-context-menu.html"> 

    <!-- import paper-menu and paper-item --> 
    <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-listbox/paper-listbox.html"> 
    <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-item/paper-item.html"> 
</head> 
<body> 

<vaadin-context-menu> 
    <template> 
    <paper-listbox> 
     <paper-item>First menu item</paper-item> 
     <paper-item>Second menu item</paper-item> 
    </paper-listbox> 
    </template> 

    <p>This paragraph has the context menu provided in the above template.</p> 
    <p>Another paragraph with the context menu.</p> 
</vaadin-context-menu> 
</body> 
</html>

出典

2017-07-07 Mowzer

を右クローム59.0.3071.115で段落をクリックしたとき、私は、半透明のコンテキストメニューを取得します私はあなたのために何かを疑うだろう。 – Morfic

私のためにも動作します。最初の段落を右クリックしましたか？ – petey

作業例はここにあります：https://vaadin.com/elements/-/element/vaadin-context-menu#demos – petey

問題がJSBinとSafariと実際です。私はSafari（バージョン10.1.1 12603.2.4）に読み込むためのページを取得することもできません。

しかし、主なデモページには、サファリ、クロムなどで働くん： http://vaadin.com/elements/-/element/vaadin-context-menu#demos

使用代わりに。

ここで要求されたようにはあなたの質問で同じ例使用codepen取り組んでいる。これらのjsbinのリンクを使用してhttps://codepen.io/anon/pen/MozOxG

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>vaadin-context-menu demo</title> 
    <script src="https://cdn.vaadin.com/vaadin-core-elements/master/webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-context-menu/vaadin-context-menu.html"> 

    <!-- import paper-menu and paper-item --> 
    <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-listbox/paper-listbox.html"> 
    <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-item/paper-item.html"> 
</head> 
<body> 

<vaadin-context-menu> 
    <template> 
    <paper-listbox> 
     <paper-item>First menu item</paper-item> 
     <paper-item>Second menu item</paper-item> 
    </paper-listbox> 
    </template> 

    <p>This paragraph has the context menu provided in the above template.</p> 
    <p>Another paragraph with the context menu.</p> 
</vaadin-context-menu> 
</body> 
</html>

出典

2017-07-10 18:00:19 petey

編集：@peteyがjsBinからvaadin-context-menuを実行しようとすると、この答えはのみ適用されることをコメントで指摘しています。したがって、問題はjsBinとSafariの間であり、VaadinとSafariではありません。

この回答はJSBinにのみ適用されます。

Chromeで動作します。しかし、Safariではありません。（MacOSのシエラv.10.12.5を実行している。）

vaadin-context-menu

Browser Support 
------- ------- 
Chrome  ✅ 
Safari  ❌

Safariは明らかに、この時点でvaadin-context-menuをサポートしていません。以下はSafariとChromeを使った画面録画です。

（注：下記の録音では：。。緑の円を右クリックを示す黒丸が左クリックを示す）

サファリ❌

v10.1.1（12603.2.4）：

クローム✅

v59.0.3071.115（公式ビルド）（64ビット）：

出典

2017-07-08 04:06:06 Mowzer

これは正確ではありません！主なデモ・ページはSafari（バージョン10.1.1 12603.2.4）で動作します：https://vaadin.com/elements/-element/vaadin-context-menu#demos JSBin＆safariで何かがうまくいかなくてはならないヴァーダイン＆サファリ。 – petey

@petey：[私はSafariで正しく動作するデモがある]（http://vaadin.com/elements/-/element/vaadin-context-menu#demos）を確認できます。私は同意する、問題はjsBinとSafariの間の何かの可能性が最も高いです。私はそれに応じて私の答えを編集しました。 Vaadinのすべてのエンジニアに謝ります。あなたはすばらしい仕事をします。 – Mowzer

vaadin-context-menuデモを動作させるには？

答えて

この回答はJSBinにのみ適用されます。

サファリ❌

クローム✅

関連する問題