Works

Explorer風に、要素をドラッグやクリックで選択できるスクリプト

プロトタイプなのでコードがごちゃごちゃしていますが、一応さまになったと思います。 Explorerライクに、CtrlやShiftを押しながらのクリック選択、ドラッグによる選択、ドラッグ時の自動スクロール機能を備えました。 近日中に、先日公開したサイズ変更スクリプトや、その他フォーカス機能等と組み合わせて、簡易GUIライブラリを公開したいと思います。 なお、IE9とOperaでは自動スクロール機能をスクリプト側で用意しており(つまり、それ以外はブラウザ側の機能としてスクロールします)、やや危ないタイマーの使い方をしているので、PCの環境によっては激重になったり落ちたりするかもしれませんので、ご了承下さい。私のPCでは大丈夫でした。 その他 ・動作にはjQueryが必要です。jQuery-UIは要りません。 ・HTML5固有の機能は使っていないはずので、CSS関連を改善すればIE7-8あたりでも動作すると思います。 ・現時点では、 IE9 Chrome 12 Firefox 4/5 Opera 11.11 Safari 5.0.5 において、一応動作を確認しています。

  • 2341
  • 1

ブロック要素の大きさを、ドラッグで変えられるスクリプト

jQuery-UIのResizableが、右と下しかサイズ変更できないのにがっかりしたので、頑張って作ってみました。 ラッパー要素およびオプションで大きさの変更範囲を限定できます。この例では、太枠で示されるラッパーと最小縦横50px、最大横200pxの制限をかけています。 動作にはjQueryが必要です。また、以下のブラウザで、一応の動作確認をしています。 IE 9 Opera 11.11 Safari 5.0.5 Chrome 12 Firefox 4/5 6/22 マウスを離してもドラッグが終了しない現象を修正。CSSの user-select を none に変更。

  • 2123
  • 0

Explorer風のGUIをブラウザ上で実現する

jQuery-UIの組み合わせで作ろうと思っていましたが、どうも要求に合致しなかったので、自分で作ってみました。jQueryを必要とします。 ・フォームのサイズ変更、移動 ・サイズの上限、下限、範囲設定 ・重なりの切り替え ・クリック、ドラッグ、ShiftとCtrlを使った要素の選択 ・フォーム間の要素の移動/コピー ・ドラッグによる要素選択時の、自動スクロール機能 などの機能を付けました。 主要なブラウザでの動作を一応確認しています。 ※Firefox5+Jsdoit上では自動スクロールが働かないようです。原因調査中。

  • 1363
  • 0

Skills

Hot tags

Categories

HTML / CSS / JavaScript