Home > JavaScript > JavaScript – Container

JavaScript – Container

Method 1:

blog

// A window of vb form
(function($){
    var opt;	// all parameters
	var _html;	// html values
	var _css;	// css values
	var _root;	// keep the value of $this

	// Plugin for container
	$.fn.container = function (param){
		// to reuse the $(this), we keep in memory.
		_root  = $(this);
		// Extend class
		opt = $.extend ( { } , param );
		// Style sheet
		_css = '<style>\
			.sh-container { padding:4px; border:solid 1px #aaaaaa; background-color:white; width:' +  opt.width + '; height: ' + opt.height + '}\
			.sh-container-head { border:solid 1px #aaaaaa; background-color:#DDDDDD; height:35px; cursor:move;}\
			.sh-container-left { float:left;padding:5px;cursor:pointer;}\
			.sh-container-right { float:right; padding:5px;cursor:pointer;}\
			.sh-container-body {padding-top:2px; }\
			.ui-resizable { position: relative;}\
			.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}\
			.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }\
			.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }\
			.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }\
			.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }\
			.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }\
			.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }\
			.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }\
			.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }\
			.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}\
		</style>';

		// Markups
		_html = '\
			<div>\
				<div>\
					<div>' + opt.caption + '</div>\
					<div>X</div>\
				</div>\
				<div></div>\
			</div>\
		';
		// Write the container now.
		$(this).empty().append( _css + _html );

		// Anything to insert on it
		var subitems = '#' + opt.ids;
        $(subitems).appendTo ( '.sh-container-body' ) ;

		// Hide/Show the container
		$(this).find('.sh-container-head').click(function(){
			_root.find('.sh-container-body').toggle();
		});
		// This > container > this resize
		if (opt.modal) {
			$(this).find('.sh-container').draggable().resizable();
		}

		return _root;

	}//end of container

})(jQuery);

// How to use it:
$('#subbody').container( {
        ids: 'abc',
		width: '60%', caption: 'Wndow', modal: true
});
Download:
http://dpaste.de/Creu/

Method 2:

123

    (function($){
        var opt;
        var _css = '\
           <style>\
            #sh-window{\
				border:solid 1px #99BBE8;\
				border-left:none;\
				border-right:none;\
                background-color:#D0DEF0;}\
            #sh-window-header{\
                border-bottom:solid 2px #99BBE8;\
				border-left:solid 1px #ffffff;\
                border-top:solid 1px #ffffff;\
				border-right:solid 2px #99BBE8;\
                background-color:#ffffff;\
                overflow:auto;height:30px;\
                padding:5px;cursor:move;\
                }\
            #sh-window-leftpane{\
                float:left;cursor:pointer;\
                }\
            #sh-window-rightpane{\
                float:right;cursor:pointer;\
                }\
            #sh-window-content{background-color:#B1C7E1; overflow:scroll; height:200px;}\
            #sh-window-footer{\
                border-top: solid 2px #99BBE8;\
                }\
			#sh-window-content table { width:100%}\
			#sh-window-content table td{cursor:pointer;border-bottom:dotted 1px #dddddd}\
			#sh-window-load {padding:5px; background-color:red;display:none;}\
            </style>';

        // temporary functions
        function ajaxevent(){
            // on click return to that item
            $('#sh-window-content table').find('tr').click(function(){
                //alert ('table tr');
                $(opt.clickeditem).val(
                    $(this).find('td:nth-child(1)').html()
                );
            });
        }

        // Window frame
        $.fn._window = function(param1){
			var _root = $(this);

            opt = $.extend( {}, param1 , $.fn._window.ajaxevent);

            // Create the structure
            $(this).empty().append( _css + '<div id="sh-window">' +
                    '<div id="sh-window-load">Wachten aub.....</div><div id="sh-window-header">' +
                            '<div id="sh-window-leftpane">' +
                            opt.caption +
                            '</div>' +
                            '<div id="sh-window-rightpane">X'   +
                            '</div>' +
                        '</div>' +
                    '<div id="sh-window-content">' +
                    '</div>' +
                    '<div id="sh-window-footer">' +
                    opt.footer +
                    '</div>' +
                '</div>' ).show('slow');

            // Get the content values;
            $.ajax({
               type: "POST",
               url: opt.url,
               data: opt.data,
			   beforeSend: function(){  $('#sh-window-load').show(); },
			   complete: function() { 	$('#sh-window-load').hide(); },
               success: function(msg){
                    $('#sh-window-content').append(msg);
                    ajaxevent();
                }
            });            

        } //end of _window

    })( jQuery );
Download:
http://dpaste.de/TYPc/
Advertisements
Categories: JavaScript Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: