jsBox : HTML Simple Box Example , jQuery Simple Dialog

jsBox : jQuery기반 simple box manager.

소스 파일

boxwin.html

html coding을 하다보면 ...box layout을 많이 사용한다... 특히 간단한 입력처리나 내용보여주기등은 디자이너에게 의존하지 않고 바로 처리 할 수 있는 box style dialog 매니저를 만들어 보았습니다.

jQuery-UI  의 좋은 컴퍼넌트들을 사용하기보다 아주 간단히 처리해야할 박스형 윈도우가 필요한경우 사용하기가 편리 합니다.

최소 종속조건 으로는   jQuery 를 포함해야 하고, draggable 을 사용하시려면  jQuery-UI 도 같이 필요 합니다. (첨부한 소스 참조)

ex: simple 3 row window

   
dlg = jsBox.makeDlg('first', {title:'box test', body:'
 
 first :)
 
'
            ,bottom: '
hi this is bottom panel
OK | CANCEL
'
            ,btnHandler: function(dlg, tgt) {
                    alert ('you click:' + tgt.html())
                }
            });
        $('div').first().append(dlg);

ex: simple 1 row window

   
dlg = jsBox.makeDlg('second', {title:'box test', body:'
 
second :)
 
', bottom: null});
            
        $('div').first().append(dlg);

ex: simple popup window

   
       dlg = jsBox.makeDlg('popup', {title:'POPUP test', body:'
  
', closeHandler: function(dlg) { 
            dlg.hide();
            }});
        jsBox.applyPopup (dlg, 700);
        
        // must to body        
        $('body').first().append(dlg);
       // $(dlg).draggable(); // make draggable by jquery-ui

jsBox Source

   

var jsBox = {
        version : {id: '0.1', pubdate: '2012.04.05', by: 'mulder', ref:'http://windows.tistory.com/entry/HTML-Simple-Box-Example'},
        
        opt : {title:'empty', body: 'emtpy', 
               bottom: '   
'+
                    '      
 '+
                    '      CLOSE  '+
                    '    
'},
        dlgs : [],
        // 디자인 수정은 아래 dlgFrame HTML Source 를 수정하시면 됩니다. 
        dlgFrame :  '
'+
					    '
'+
					        '
'+
					    '
'+
					    '
 
 
'+
					    '
 
'+
					    '
' +
				    '
',
        makeDlg : function(name, option) {
            var o = $.extend({}, this.opt, option);
            var dlg = $(this.dlgFrame);
            
            $('div#boxTitle h2', dlg).first().html (o.title);
            $('div#boxBody div', dlg).first().html (o.body);
            $('div#boxBottom div', dlg).first().html (o.bottom);
            
            if(o.title == null) {
                $('div#boxTitle', dlg).remove();
            }
            if(o.bottom == null) {
                $('div#breaker', dlg).remove();
                $('div#boxBottom', dlg).remove();
            }
            
            // main button
            $('div#btn a', dlg).click ( function() { if(o.btnHandler) o.btnHandler(dlg, $(this)); });
            // for popup Close
            $('a#closeButton', dlg).click ( function() { if(o.closeHandler) o.closeHandler(dlg); });
            
            this.dlgs.push({'name': name, 'dlg': dlg});
            
            return dlg;
        },
        
        getDlg : function(name) {
            var x = null;
            $(this.dlgs).each(function(){
                if(this.name == name)  x = this.dlg;
            });
            return x;
        },
        
        getTitle: function(name) { return  $('#boxTitle>h2', jsBox.getDlg(name)); },
        getBody: function(name) { return  $('#boxBody>div', jsBox.getDlg(name)); },
        
        getHeaderPanel: function(dlg) { return $('#boxTitle', dlg); },
        getBodyPanel: function(dlg) { return $('#boxBody', dlg); },
        getBottomPanel: function(dlg) { return $('#boxBottom', dlg); },
        
        applyPopup: function(dlg, popupWidth) {
            dlg.css('background-color', 'white').css('width', popupWidth+'px').css ('position','absolute')
               .css ('left', ($(window).width()-popupWidth)/2 +  'px').css ('top','100px').css ('z-index','10');
        },
        
        dummy: ''
        
    };

Example OUTPUT>