要素をwindow化する
$("#エレメントのID").crowm_window( {
top: "100%", // Y座標（"100%" or "50%" or 座標数値）
left: 50, // X座標（"100%" or "50%" or 座標数値）
width: 100, // 横幅
height: 300, // 高さ
draggable: true, // 移動可能？
scrollable: true, // 内容が入りきれない場合、スクロールバーを表示するか？
visible: true, // 初回表示するか？
close: true, // 閉じるボタンがあるか？
close_callback: func(){}, // 閉じるボタン押下時のコールバック（false返却で閉じない）
parent: "親エレメントのID" // 省略時はbodyの子となる
modal:true // モーダルウィンドウ？
} );
上記の、全てのオプションは省略可能。
１．HTMLに下記のように記述しておく。
タイトルです。省略時はタイトルなしになります
内容です。HTMLコンテンツを記載します。
２．javascriptで、window化する。
$('#testWindow').crowm_window( {width:300, height:300, visible:true} );
*/
//
//------------------------------------------------------------------------------
crowm_window : function(_param) {
if( ! _param ) _param = {};
var is_title = false;
var title_html = $(".crowm_window_title", this).html();
var body_html = $(".crowm_window_body", this).html();
if( ! title_html ) title_html = "";
if( ! body_html ) body_html = " ";
return( crowm_window(title_html, body_html, _param) );
},
//------------------------------------------------------------------------------
// jQueryオブジェクトからボタンを作成する
/*
指定された要素にボタンを挿入する。
HTMLは、
とかしておいて、これを、
$('#custom_button").crowm_button( {
value : "ボタンのキャプション",
callback : function(){
// 押されたときの処理
alert( "pushed !!" );
}
} );
とすれば、ボタンが出来上がる。
複数のボタンを並べて挿入するには、crowm_button_array() を使う。
_paramsの指定を配列にする。
$('#custom_button").crowm_button_array(
[
{
id : "idididid" // ← 省略可能
value : "ボタンのキャプション",
callback : function(){
// 押されたときの処理
alert( "pushed !!" );
}
},
{
value : "ボタンのキャプション2",
callback : function(){
// 押されたときの処理
alert( "pushed2 !!" );
}
}
]
);
*/
//
//------------------------------------------------------------------------------
crowm_button : function(_param) {
// IDを決める
var new_id = "";
if( ! _param ) _param = {};
new_id = _param.id ? _param.id : ("crowm_button_" + (_crowm_button_id++));
// HTML作成
var html = '
'
+ ''
+ '| ' + _param.value + ' | '
+ ' | '
+ '
'
+ '
';
// 追加
$(html).appendTo(this).mouseover( function(){
$('td:first-child',this).css( "background-position", "0px -24px" );
$('td:last-child',this).css( "background-position", "0px -24px" );
} ).mousedown( function(){
$('td:first-child',this).css( "background-position", "0px -48px" );
$('td:last-child',this).css( "background-position", "0px -48px" );
} ).mouseout( function(){
$('td:first-child',this).css( "background-position", "0px 0px" );
$('td:last-child',this).css( "background-position", "0px 0px" );
} );
if( _param.callback ){
$("#"+new_id).bind( "click", _param.callback );
}
return( this );
},
crowm_button_array : function(_param) {
if( ! _param ) _param = {};
var tbl = $('
').appendTo(this);
var tbody = $('
').appendTo(tbl);
var tr = $('
|
').appendTo(tbody);
for( var i=0; i<_param.length; i++ ){
$('
| ').appendTo(tr).crowm_button( _param[i] );
}
return( this );
}
} );
//------------------------------------------------------------------------------
// 内部変数 / 関数
//------------------------------------------------------------------------------
var _crowm_window_id = 1;
var _crowm_zindex = 1000;
var _crowm_def_width = 200;
var _crowm_def_height = 120;
var _crowm_min_width = 120;
var _crowm_min_height = 100;
var _crowm_def_left = 0;
var _crowm_def_top = 0;
var _crowm_button_id = 1;
var _crowm_input_id = 1;
$(function(){
// 座標調整関数
function _crowm_adjust_position(){
$(".crowm_window_div").each( function(){
// Y座標調節
if( $(this).data('top_percent') == '50%' ){
$(this).css( "top", $(document).scrollTop() + ($(window).height() - $(this).height()) / 2 );
}else if( $(this).data('top_percent') == '100%' ){
$(this).css( "top", $(document).scrollTop() + ($(window).height() - $(this).height()) );
}
// X座標調節
if( $(this).data('left_percent') == '50%' ){
$(this).css( "left", $(document).scrollLeft() + ($(window).width() - $(this).width()) / 2 );
}else if( $(this).data('left_percent') == '100%' ){
$(this).css( "left", $(document).scrollLeft() + ($(window).width() - $(this).width()) );
}
} );
}
// リサイズイベントの設定
$(window).bind( "resize", _crowm_adjust_position );
// スクロールイベントの設定
$(window).bind( "scroll", _crowm_adjust_position );
});
