jQueryUI

jQuery UI

◆ jQuery UI 概要

jQuery UI - Wikipedia
jQuery UI はインタラクティブなWebサイトを開発するために使用される、jQueryをベースにしたJavaScriptのライブラリである。マウスベースのインタラクションやアニメーション、テーマを適用可能なDialogやDatepickerといったウィジェットが提供される。

最新版 1.9.2 / 2012年11月23日

公式

Tabs と Menu の問題


公式

参考記事

上記記事から参考画像
menu_problems.png

概要
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 背景で箱形を指定したり、テーブルで行単位で指定が可能です
    • 左クリックの融通が効かなくなるので、注意や頓知が必要です

公式

◆ 作例


sel_x3.jpg

ポイント
  • 選択確定までは、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-selecteeselectable の対象で、初期化以降ずっと残ります
  • 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

このWIKIを編集するにはパスワード入力が必要です

認証パスワード