問題タブ [tether]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
980 参照

javascript - ブートストラップ 4 テザー配置

位置についてはtether.jsを使用するBootstrap 4ですが、「上」「右」「下」「左」の4つの位置しかサポートしていません.12のテザーをサポートするより多くのオプションに拡張するにはどうすればよいですか? たとえば、「左上」または「右上」

0 投票する
1 に答える
1108 参照

requirejs - Bootstrap 4 で使用するために Aurelia-CLI に Tether を追加する方法

Bootstrap 4をに追加しようとしていAureliaます。を機能させることしかできませんCSSが、bootstrap.js必要なTetherものを含めることはできません。コンソールでこのエラーが発生し続けるためです。

私はこれに沿って何かを試しました

バンドルされていますが、まだ欠落していると不平を言っていTetherます。 これで Tether requirejs.config.js` を作成する必要がある別のスタックの回答を読みましたavailable globally which could be done via

しかし、そのような構成はありませんAurelia

0 投票する
1 に答える
645 参照

javascript - 反応仮想化リスト内のアイテム内の反応テザーのパフォーマンスの問題

説明

react-virtualized でレンダリングされるアイテムの潜在的に長いリストがありますVirtualScroll
リスト内の各項目 (行) にはかなりの量の要素があり、そのうちの 1 つがコンテキスト メニューを開きます。react-tetherHTMLでそのメニューをレンダリングしてbody(アイテムがスクロール可能なリストの下部/上部にあるときに非表示にならないように)、ユーザーがリストをスクロールしている間、メニューをアイテムに「固定」したままにしようとしています.
私の問題は、テザー メニューの位置の更新に顕著な遅延があることです。

これまでに行った手順のいくつか:

  1. なしで単純なリストをレンダリングしましたVirtualScroll。テザリングされたメニューはスムーズにレンダリングされ、目立ったジャンクはありませんでした. それが私が問題があると結論付けた方法ですreact-virtualized
  2. ここで推奨されrowRendererているように、メニュートリガーのみに簡略化しました。
  3. shouldComponentUpdate行コンポーネントに実装されています。これにより、認識されるパフォーマンスが大幅に改善され、遅延が大幅に減少しましたが、それでもまだ顕著です.
  4. Chrome devtools のタイムラインを確認しました。Grid.jsとの両方によってトリガーされるリフローが表示されtether.jsます。

ライブラリのバージョン:

  • react-virtualized v. 7.24.3 (大規模なプロジェクトであり、8.x への移行はまだ準備ができていません)
  • 反応テザー v. 0.5.2
  • 反応するv。15.2.1

ワーキングデモ

https://plnkr.co/edit/f7OhCoCXkDsWbyjxhR3f

スクリーンショット:

スクリーンショット

0 投票する
1 に答える
777 参照

javascript - ビューポートが変更されるまでテザー要素の位置が正しくありません

私は素晴らしいプラグインで遊んでいます:テザー

ブートストラップ (v3) ポップオーバーを手動でロードするときに問題が発生しました。ビューポートの外側のポップオーバーが、ビューポートの下部の間違った位置に表示されていました。そこで、代替手段としてこのプラグインを試すことにしました。

基本的なテザー オプションを使用して、フォームの入力の 1 つを検証しようとしましたが、フォームは laravel フォーム ビルダーを使用して作成されています。(form-group入力の はターゲット要素です)。

問題:

しかし、何らかの理由で、ターゲット要素の左側 (不適切な位置) にロードされているようです。ビューポートが変更されると (ページのサイズ変更やスクロールなど)、ターゲット要素の右側 (正しい位置) に更新されます。

なぜこれを行うのかわかりませんが、これを正しい位置にロードする方法についてのアイデアはありますか?

例:

ページの読み込み (不適切な位置): ページの読み込み時

ビューポートの変更 (正しい位置): ビューポートの変更時

HTML:

ジャバスクリプト:

0 投票する
1 に答える
190 参照

angular-cli - angular-cli@1.0.0-beta.24 で動作するようにテザードロップを設定する

angular-cli@1.0.0-beta.24 で作成した angular 2 アプリでテザードロップをセットアップする方法がわかりません。

再現する手順:

  1. angular-cli で新しいプロジェクトを作成します。
    • ng new tester --skip-git
  2. angular-cli の指示に従って、サードパーティ ライブラリをインストールします。
    • npm install tether-drop --save
    • npm install @types/tether-drop --save
  3. この時点で、app.component.ts で次の行を使用できることを完全に期待しています。
    • import { Drop } from 'tether-drop';

しかしng serve、結果がこのエラーになると:

  • ERROR in ./src/app/app.component.ts Module build failed: Error: D:/Visual Studio Code/tester/src/app/app.component.ts (3,10): Module '"D:/Visual Studio Code/tester/node_modules/@types/tether-drop/index"' has no exported member 'Drop'.) at _checkDiagnostics (D:\Visual Studio Code\tester\node_modules\@ngtools\webpack\src\loader.js:116:15) at D:\Visual Studio Code\tester\node_modules\@ngtools\webpack\src\loader.js:141:17 @ ./src/app/app.module.ts 14:0-47 @ ./src/main.ts @ multi main

サードパーティのライブラリを angular-cli で生成されたプロジェクト (webpack) に統合するのに非常に苦労しました。私はそれらのいくつかを機能させることができましたが、これに対する解決策は私をほのめかしています。

誰かが私を啓発し、この無知の重荷を私から取り除くことができますか?