jQueryUI
jQuery UI
◆ jQuery UI 概要
jQuery UI - Wikipedia
jQuery UI はインタラクティブなWebサイトを開発するために使用される、jQueryをベースにしたJavaScriptのライブラリである。マウスベースのインタラクションやアニメーション、テーマを適用可能なDialogやDatepickerといったウィジェットが提供される。
最新版 1.9.2 / 2012年11月23日
公式
Tabs と Menu の問題
公式
- Menu | jQuery UI
- Menu Widget | jQuery UI API Documentation
- Tabs | jQuery UI
- Tabs Widget | jQuery UI API Documentation
参考記事
- html - UL menu is displaying BEHIND jQuery UI tab and images - Stack Overflow
- javascript - JQueryui menu will not position properly - Stack Overflow
上記記事から参考画像
概要
menu は、一時的な要素を渡しての生成表示ではなくて、document 上の要素を表示するだけの仕様です
これが、Tabs と組合わせると、うまくいかない現象がありました
ダイアログも同様の仕様ですが、どこかに配置して hide しておけば問題なかったのですが、
menu では工夫が必要でした
対症療法的かも知れませんが、いちおうまとめておきます
問題
- 1.menu を開くと、目的の位置で表示されるとともに、元の位置で場所だけ拡大してレイアウトが崩れる
- 2.menu を開くと、Z 方向がおかしくて、タブのコンテンツに隠れてしまう(参考画像)
対応
1.については、max-height: 0px ; の div に入れておくことにしました
2.については、position: static; が効きました
所感
position: relative; が効くのでは?という話もありましたが、当者ではダメで、static でいけました
で、relative、static、何れも、公式の4ページには出ていないわけです
タブを使って menu 使って、なんて、かなり基本的な仕様だと思うんですけど、
参考記事のように、外部サイト見ないと対応が分からないのは、困ったものです
国内の紹介サイト記事は勉強になって助かるんですけど、
menu の記事では最初から開きっぱなしなのはこのせい?
[html]
<div class="sub_0"><ul id="f_menu" style="position: static; display:none;"> </ul></div>
[css]
div.sub_0 {
max-height: 0px ;}
起動部分の要素に依存したコンテキストメニューで、座標などを参照している例
[app.js]
function menuOpen( $now ){
// $ul という変数で動的に構築し、置換・表示
// (構築は略)
$( '#f_menu' ).replaceWith( $ul ) ; $( '#f_menu' ).position( { my: 'left-30 Top+80', at: 'right top', of: $now, collision: 'flip', });
// menu の各リンクでしかるべく処理して閉じます
// 作例では、id でテーブルからルックアップしています
$( '#f_menu' ).menu({ select: function(event, ui){ var fn_ = ui.item.attr( 'id' ) ; if( fn_ in fn_tbl ){ fn_tbl[ fn_ ](); } $( '#f_menu' ).hide(); } });}
// 参考、テーブルの例
var fn_tbl = { mn_NewTab : function(){ mnFnNewTab( 1, is_dir, fpath ) ; }, mn_NewText : function(){ mnFnNewTab( 0, 0, fpath ) ; }, mn_Rename : function(){ mnFnRename( fpath, fname ); }, (略) };
マウス drag/drop 作例
◆ 概要
ひとこと
- drag/drop で要素を操作できますが、Selectable Widget で複数選択機能が実現できます
- selectable では、クリック・ドラッグで複数指定が可能になります
- selectable 指定は、対象としたい要素を囲む外側の要素を対象とします(tr に対しては tbody )
- div 背景で箱形を指定したり、テーブルで行単位で指定が可能です
- 左クリックの融通が効かなくなるので、注意や頓知が必要です
公式
- Draggable Widget | jQuery UI API Documentation
- Droppable Widget | jQuery UI API Documentation
- Selectable Widget | jQuery UI API Documentation
◆ 作例
ポイント
- 選択確定までは、draggable を disable にしておく
- ドラッグでつかめるのは1つだけなので、他も動かして見せたければ、自分でhelper を作成する
主なオプションなど
- selectable
- filter: 対象を絞る場合。ここでは tr を指定しないと、内側の td も個別に対象になって不便です
- cancel: 対象の中に a リンクがあっても、デフォでは無効なので、スルーしてもらいます
- draggable
- helper: がキモです。文字列または function を指定
- Defaultは "original"で、元要素がドラッグされます
- "clone" クローンがドラッグされます
- function では、表示したい要素を jQuery オブジェクトで返します
- droppable
- hoverClass: 表示css向けくらい?
- drop: 本体。作例では、鯖にRename=移動を指示する処理を個々にやっています
- 蛇足ですが最初のthis はタブその他ドロップされた方、後のthis は移動してきた元のtr 各行
状態遷移のクラス。当該要素に設定されます
- ui-selectee は selectable の対象で、初期化以降ずっと残ります
- ui-selecting は選択の操作中
- ui-selected は選択確定
作例では、複数のタブで同じID・クラスの要素を扱っていますので、セレクタが煩雑な感じです
(タブ切替え時には、選択解除もやっています)
テーブルの IDとクラス名も同じで、それで特定しています
複数要素のクローンを div に詰めて、元テーブルのクラス名も保持して、ドロップで見ます
[app.js]
// selectable
$( '.d_dir_c tbody' ).selectable( { filter: 'tr.is_drag_on', cancel: 'a',
selected: function(e, ui) { $( ui.selected ).draggable( 'enable' ); }, unselected: function(e, ui) { $( ui.unselected ).draggable( 'disable' ); } });
// draggable
$( '.d_dir_c tr.is_drag_on' ).draggable({ hoverClass: "drop_hover", revert: 'invalid', cursor: 'move',
opacity: 0.5, helper: function( e, ui ){ var tbl_cls = $( this ).parents( 'table' ).attr( 'id' ); return $('<div>').attr( 'name', tbl_cls ) .append( $( '.'+tbl_cls+' .ui-selected' ).clone()) ; }, }).draggable('disable');
// droppable
function uiDropInit(){
droppableOn = { accept: '.d_dir_c tr', hoverClass: 'drop_hover',
drop: function( ev, ui ) { var drop_path = $(this).attr( 'name' ) ; var tbl_cls = '.' + ui.helper.attr( 'name' ) ;
$( tbl_cls +' .ui-selected' ).each( function() { $(this).hide() ; var path = $(this).attr( 'name' ) ; dropItem( path, drop_path ) ; }) ; } }
function dropItem( s_path_o, d_path ){ var s_path = ''+s_path_o ; var wd_a = s_path.split( "/" ); var f_name = wd_a[ wd_a.length-1 ] ; var n_path = d_path + '/' + f_name ;
putLog( 'move ' + s_path + ' >> ' + n_path ); svRename( s_path, n_path ) ; }}
// 対象は、適宜指定します(例)
$( 'tr.is_dir' ).droppable( droppableOn ); $( 'li.is_open' ).droppable( droppableOn ); $( 'li.is_close' ).droppable( droppableOn );
- 最終更新:2014-01-20 18:00:22