$.type()

Detect object types

by Plippie Plop

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="container">
    <h3>Widget Builder</h3>
</div>

CSS

/*------------------------------------------------------------------

	[Widget Styling]

	Project:		pepperoffice Admin 1.0
	Version:		1.0
	Last change:	06-09-2012
	Assigned to:	Philip van Heijningen (PVH)


[Table of contents]

	1. Widget
	2. Header Actions
	3. Shared Styles
	4. Tables
	5. Toolbar
	6. Tabs
	7. Accordion
	8. Form
	9. Mini Calendar
	10. Full Calendar
	11. Miscellaneous

-------------------------------------------------------------------*/



/*------------------------------------------------------------------
[*. Widget]
*/

.widget {	
	position: relative;
	clear: both;	
	width: auto;	
	margin-bottom: 1em;
	 -webkit-box-sizing: border-box;
    -moz-box-sizing: 		border-box;
    		box-sizing: 		border-box;
}
.widget > .widget{margin:0;}
	
	.widget-header {		
		position: relative;		
		
		background: #E9E9E9;
		background:-moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%); /* FF3.6+ */
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9)); /* Chrome,Safari4+ */
		background:-webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%); /* Chrome10+,Safari5.1+ */
		background:-o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%); /* Opera11.10+ */
		background:-ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%); /* IE10+ */
		background:linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";		
		
		border: 1px solid #CCC;		
		-webkit-border-top-left-radius: 4px;
		-webkit-border-top-right-radius: 4px;
		-moz-border-radius-topleft: 4px;
		-moz-border-radius-topright: 4px;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;		
		-webkit-background-clip: padding-box;		
		-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,1);
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,1);
		box-shadow:...

JavaScript

// build widget
var newWidget = widgetBuilder('#object', 'full','top','');
newWidget.appendTo('.container');

// test stuff
newWidget.find('.widget-header h3').html('Full widget');
newWidget.find('.widget-content').html('<p>Lorum ipsum plipsum ploppus dolet da vinci');

newWidget.find('.widget-toolbar').append('<button class="btn">Button</button>');
newWidget.find('.widget-actions').append('<button class="btn btn-primary">Tool Button</button>');


// second widget:
var Widget2 = widgetBuilder('.object02', 'half','bottom','');
Widget2.appendTo('.container');
Widget2.find('.widget-header h3').html('Half widget with bottom toolbar');
Widget2.find('.widget-toolbar').append('<button class="btn btn-secondary">Bottom button</button>');


// min widget:
var Widget3 = widgetBuilder('object03', 'minimal');

Widget3.appendTo('.container');
Widget3.find('.widget-content').html('Minimal widget');

function widgetBuilder(widgetId, widgetType, toolbarPos, contentType, callback){
	var widget = null
			,wheader = null
            ,wheaderActions = null
			,wcontent = null
			,wtoolbar = null
				
			;    
		
  
	// check of widgetID is string or object
	if($.type(widgetId)==='string'){
		// then check if it is a class, id or string:
		if(widgetId.indexOf('#')===0){
			widget = $('<div>');
			widgetId = widgetId.replace('#','');
			widget.attr('id', widgetId);
			
		} else if(widgetId.indexOf('.')===0){
			widget = $('<div>');
			widgetId = widgetId.replace('.','');
			widget.addClass(widgetId);
        } else {
			widget = $('<div>');			
			widget.attr('id', widgetId);
		}
	
    // is it a dom object?
	} else if($.type(widgetId)==='object'){
		widget = widgetId;
		widget.empty();
        // does not have an id att all:
    } else if($.type(widgetId)==='null'){
        widget = $('<div/>');
    }
    
    widget.addClass('widget');
		

    
    // Build full widget
    if(widgetType==='full'){
        
        // build header:
        wheader = $('<div/>');
       ...