問題タブ [scrollable]

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 投票する
3 に答える
551 参照

jquery - 別々のdivに2つのjquery関数を設定するにはどうすればよいですか?scrollable();

2つの.scrollable()関数と、.navigator()の2つのインスタンスが必要です。

私のページ:(下部のスクロールを参照)http://tinyurl.com/69r4bth

私のJS

問題は、右側の2番目のスクローラーでボタンとスライダーが機能しないことです。1時間以内の締め切りとして迅速な修正をいただければ幸いです。

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

jquery - スクロール可能なdivからドロップ可能にドラッグしてから再度ドラッグする方法は?

ページの左側にスクロール可能なリスト (overflow:auto) があり、ページの右側にいくつかのドロップ可能な項目があります。ここでクローンを使用して要素をリストからコンテナーにドラッグできるようにする回避策を見つけましたが、要素がドロップされると、position:absolute が取得され、z-index とともにインライン スタイルに上と右の位置が追加されます。もともとそこにあったもの。アタッチされている他のすべてのクラスはコピー内にありますが、ドラッグ アンド ドロップの後、その要素を再びドラッグすることはできませんか?

これを行う方法、または複製プロセスによって追加されたインライン スタイルを削除する方法はありますか?

問題を示す単純化されたコードを以下に示します。ページにカット アンド ペーストし、ウェブルートにドロップしてテストするだけでよいはずです。前もって感謝します。

0 投票する
2 に答える
290 参照

wpf - ItemsControl (フットボールのドライブ情報を仮想化)

NFL ドライブ チャートをエミュレートして、ゲームのドライブ データを視覚化しようとしています。私が大まかにエミュレートしようとしているものの例は、nfl.com の厚意により、ここで見ることができます。私は次のことを達成しようとしています:

  • 競技場を表示する
  • 競技場の上にデータを描く
  • 何かにマウスオーバーすると、イベントを発生させたい (例: ToolTip)

http://www.nfl.com/gamecenter/2011100909/2011/REG5/jets@patriots#menu=drivechart

これが私が今いる場所です。まず、xaml:

その結果は次のとおりです。

(申し訳ありませんが、私は初心者なのでスクリーンショットを追加できません!)

私が見ているものを説明するために最善を尽くします.xamlを読んだ後、ほとんどの人がこれを理解していると確信しています. 基本的には、背景にフットボールの競技場が見え、左上隅に、私の ItemsControl コントロールがあります。

StackPanel は一目瞭然です。1 ヤードは 1 ピクセルを表していないため、後で画像のサイズ変更に問題が発生することになりますが、それは別の日に残します。私の主な関心事は、どのように視覚化できるかです。データ。また、ドライブの視覚化は左上隅から開始するべきではありません:D したがって、ItemsControl を純粋に扱うと、次のようになります。

(申し訳ありませんが、私は初心者なのでスクリーンショットを追加できません!)

もう一度、画像の説明を試みます。これは、前述の ItemsControl コントロールの拡大図で、背景 (サッカー場) の画像はありません。

注: ItemsControl の背景は、見やすいように AliceBlue に設定されています。これが機能すると、透明になります。

ItemsSource は「Play」クラスのリストにバインドされています。

PlayType は列挙型です:

リストはいくつかのデータを取得します... (サンプル データ、1 番目のダウンが取得されていることはわかっています 笑)

…そして、転送パラメーター クラスの助けを借りて ViewModel に渡されます…</p>

… DriveDetails プロパティに割り当てられている場所

ItemsPanel の xaml は次のとおりです。

ItemTemplate の xaml は次のとおりです。1 ヤードは背景グラフィックで約 6 単位であるため、WidthOfPlay にバインドしていることに注意してください。グラフィックとサイズ変更を整理したら、実際の Result プロパティにバインドします。

PlayType enum を Brush に変換しているため、サンプル データで表示される色を確認できます。

したがって、これらすべてが正常に機能しています – しかし、明らかに表現は望みどおりではありません – 上の例を見ると、ドライブは多数のプレーで構成されており、それらは互いに隣り合って配置されていますが、プレーは負のヤード数になる可能性があるため、それらはまた、最後のプレイの終わりまでに相殺され、互いの下に配置されます!

だから私はこれが私の質問だと思います-ドライブの各再生がその特定のドライブの前の再生の下に配置されるだけでなく、その最後のドライブの終わりから始まるような形式でデータを表すにはどうすればよいですか? )

ゲームは複数のドライブで構成されているため、後の段階で、ドライブの開始位置とそのドライブのプレイのリストで構成される「ドライブ」のリストを渡します (この中のプレイの単純なリストの代わりに)例)。

これは、全体をスクロール可能にする必要があることを意味します。

私は、ItemTemplate および DataTemplate と共に ItemsControl コントロールを使用して正しい軌道に乗っていると思いますが、これを達成する方法については、専門家のアドバイスを確実に使用できます。

ここまで読んでくれたなら、時間を割いてくれてありがとう - GO PATS ;)

[編集]

AngelWPF (仮想化) とRachel (すべて!) のおかげで、少なくとも ItemsControl に提供していたプレイのリストについては、実際に機能させることができました。レイチェル、あなたは素晴らしいブログを持っています。AttachedProperties エントリは非常に役に立ちました。知識を共有していただきありがとうございます。

後の段階で、私が悩んでいることをよりよく示すスクリーンショットを 1 つか 2 つ追加できることを願っています ;)

示唆されているように、グリッドの配置のために (他のプロパティの中でも) PlayIndex を使用して Play クラスを変更しました。

その PlayIndex を使用するために、ItemContainerStyle が ItemsControl に追加されました。

ItemsPanelTemplate を StackPanel から Grid に変更することもこれに役立ちました :) これで、各 Play がそれぞれの色で隣り合って表示されるだけでなく、互いの下にも表示されます。(Play クラスの他のプロパティを使用して) ItemsControl に ToolTip を追加すると、それが洗練されます。

すでに述べたように、これは Play アイテムのリスト (簡単にするために短縮されています) でうまく機能します:

しかし、「ドライブ」のリストを渡すことに関して、元の投稿の最後に書いたものをバインドするにはどうすればよいでしょうか?

注意してください-元の投稿にこれを書いたので、これにより、この投稿を編集して詳細情報を「許可」し、まったく新しい質問をしないことを願っています!

次の「Drive」クラスがあるとします。

リストにデータを入力する (上記と同じプレイを使用)

ViewModel は次のようになります。

明らかに、この ItemsControl (ドライブを含む) を別の DataTemplate に提供する必要がありますが、この DataTemplate はそのドライブのリスト内で再生を保持する必要があります。私がすぐに見つけたのは、コンテンツを Rectangle に配置できないということです。

少し実験した後、DriveLength プロパティにバインドして特定のドライブの長さをグラフィカルに表示し、DataGridCell を作成して、そこにコンテンツ (StackPanel など) を配置できるようにしました。

(私は、ドライブの長さ以外には何も拘束していないことを知っています。この例の Rectangle は、テスト時に何かを示すためのものです!)

しかし、私はすでに 4 杯目のコーヒーを飲んでおり、List オブジェクト内の List へのバインドに問題がありますか? Drives.DrivePlaysのようなもの?!

だから私は単純なものから行きます(ありがとうございます)

バインディング、への

を含むバインディング

「DrivePlays」と呼ばれる:D

明らかな何かが欠けているのでしょうか、それとももっとコーヒーが必要ですか?

編集

別の質問で問題の最後の部分を説明しました

元の質問の最後の部分に関する関連質問

0 投票する
0 に答える
311 参照

javascript - 動的に作成された flowplayer のスクロール可能な addItem がコンテナーからスクロールアウトする

編集可能な水平スクロール可能なリストを作成しています。このリストのコンテナーのサイズは、ブラウザーの表示領域の幅に基づいて動的です。画面いっぱいになったアイテムのリストがあり、新しいアイテムを追加すると、コンテナは新しく追加された要素を超えて空白の画面にスクロールします。「前へ」ボタンを使用してスクロールバックすると、表示されます。新しいアイテムを動的に追加するために使用されるコードを添付しました。

.move および .seekTo 関数を使用して正しい場所に移動しようとしましたが、「前へ」ボタンがランダムに無効になるため、スクロールバックできません。

誰からのポインタはありますか?

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

jquery - 非常に単純なWordpress + jqueryツールの問題

私はこれを機能させるのに本当に苦労しています。どんな助けも宝くじのカルマで報われます :-)

バニラ WP サイトをインストールし、1 つの投稿と functions.php のみを編集して CSS を追加しました。これは問題を示しています。

functions.php にすべての jquery/tools wp_register_script/wp_enqueue_script 宣言を追加しても何も機能していなかったので、正気を保つために一時的に投稿します (これが正しい場所ではないことはわかっています)。

したがって、これはほぼ機能します。エラーは発生しませんが、ページ (WP なしで正常に動作します) はパネルのコンテンツをレンダリングしません。何か案は?Chrome コンソールを見ると、すべてのリソースが読み込まれ、すべてのスクリプトがそこにあります。

http://crystal-globe.com/jqt/

助けてくれてありがとう。毛が抜ける…

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

css - リンクがクリックされたときにページ要素の選択を停止する

jQuery ツールの Scrollble プラグインを使用して、javascript のスクロール可能な要素を含むページを作成しています。ここで私のページを表示できます: idiots.mrtriangle.me

[ギャラリー] タブをクリックしてギャラリーにアクセスし、[スクロール ボタン] をクリックすると、2 回目のクリックでページ全体が強調表示されますが、これは非常に面倒です。なぜこれを行っているのかわかりませんが、この選択を削除する方法はありますか?

ありがとう

0 投票する
0 に答える
529 参照

jquery - jQuery ツールのスクロール可能な破棄と再初期化

はい、スクロール可能なアイテムの追加/削除についてはたくさんの質問があります。しかし、スクロール可能なものをバインド解除して破棄し、関数を介して再初期化する最良の方法を実際に絞り込んだ人はいますか? 一度受信して注入すると、スクロール可能な状態になる一定量のデータがあります。次に、ドロップダウンを介して、どのオプションが選択されていても、領域は新しいデータを受け取るので、すべてのバインディング (ナビゲーターを含む) を破棄して削除し、新しいデータに対応するためにスクロール可能を再初期化する方法を見つけようとしています。 ..どこかにAPI経由の隠し機能はありますか?

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

jquery - Jquery Scrollableは、navがクリックされたときに自動再生を停止できません

ナビゲーションでスクロール可能なjqueryUIツールを使用しています。自動的に自動再生されるようにしたいのですが、ナビゲーションを操作するたびにタイミングがファンキーになります。

いずれかのナビゲーションリンクをクリックすると停止します。スクロールが止まらないようです!

これを開始するコードは次のとおりです。

HTML:

それをアクティブにするJquery:

私はこれを試しましたが、うまくいきませんでした:

次に、実際のボタンにjsを追加しようとしましたが、正しく指定しているとは思いません-以下のコードのように、スクロール可能な領域を特定するために何か他のものが必要です-スクロールコンテンツはulの上のspearatedivにあります。ナビ:

また、history:falseの下のナビゲーターセクションにclickable:falseを追加しようとしましたが、それも機能しませんでした。

誰か助けてもらえますか?

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

jquery - スクロール可能なjquery uiツールを使用して、スクロールの代わりにフェードすることは可能ですか?

このツールが「スクロール可能」と呼ばれていることを考えると、これは狂った質問かもしれませんが、スクロールの代わりに要素をフェードできるかどうかは誰にもわかりませんか?

Jquery Ui Tools Scrollableを使用していますが、代わりに効果をフェードに変更できるかどうか疑問に思っています。

0 投票する
3 に答える
3468 参照

jquery - Jquery Tools Scrollable:最後のアイテムで停止する

基本的に、アイテムの数がスクロールサイズで均等に分割されていない場合に、最後のアイテムを超えてスクロールするというScrollableの奇妙な習慣を修正しようとしています。

つまり、11個のアイテムを含むウィジェットがあり、一度に2個表示するように設定されていて、次のボタンをクリックして次の2個のアイテムにスクロールするたびに、11個目のアイテムになるとスクロールして11番目のディスプレイですが、右側に12番目のアイテムがある場所に空きスペースがあります。2番目のアイテムがないにもかかわらず、基本的に次の2つをビューにスクロールします

ここに私の修正を示すjsFiddleがあります:http://jsfiddle.net/natepers/6kmuE/21/

;scroll-sizeより少ない残りのアイテム数にリセットすることで、最後のアイテムで停止させることができました。scroll-size

問題は、最初のアイテムに戻れないことです。

これがjavascriptです:

提案や助けをありがとう。