├── README.md ├── dashboard.css ├── dashboard.js └── dashboard.html /README.md: -------------------------------------------------------------------------------- 1 | # JQuery Portlet With Settings 2 | 3 | ## Example of JQuery Portlets with Some Settings 4 | 5 | * Draggle & Sortable 6 | * Different Sized Columns 7 | * Close Button 8 | * Settings Menu 9 | * Change Visibility Of Each Portlet 10 | * Change Column Widths 11 | * Scrollable Portlet Contents 12 | 13 | This quick example shows how to setup JQuery Portlets with some features that I found hard to find. 14 | 15 | ## Installation 16 | 17 | Download the files. 18 | 19 | ## Usage 20 | 21 | This is a pure html/javascript application. You view it with a browser from either your file system, or from a web server. 22 | 23 | ## License 24 | 25 | Your free to do whatever you want with this source. -------------------------------------------------------------------------------- /dashboard.css: -------------------------------------------------------------------------------- 1 | body{min-width: 900px;} 2 | h1{color: red;} 3 | .button{padding: 5px; border: 1px solid gray;} 4 | .column1 { width: 170px; float: left; padding-bottom: 100px; } 5 | .column2 {width: 500px; float: left; padding-bottom: 100px; } 6 | .column3 { width: 170px; float: left; padding-bottom: 100px; } 7 | 8 | .portlet { margin: 0 1em 1em 0; } 9 | .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; } 10 | .portlet-header .ui-icon { float: right; } 11 | .portlet-content { padding: 0.4em; } 12 | .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; } 13 | .ui-sortable-placeholder * { visibility: hidden; } 14 | .portlet-content { 15 | max-height:200px; 16 | _height:expression(this.scrollHeight>199?"200px":"auto"); 17 | overflow:auto; 18 | overflow-x:hidden; 19 | } 20 | .hidden{display: none} 21 | #header{margin-bottom: 5px; padding: 3px} 22 | #header div{float: left;} 23 | #menu2{float:left;} 24 | br.clear{clear:both;} -------------------------------------------------------------------------------- /dashboard.js: -------------------------------------------------------------------------------- 1 | var portlets = ["feeds", "shopping", "news", "links", "images"]; 2 | 3 | $(document).ready(function () { 4 | $('#menu2').click(function(event) { 5 | $('#window_dialog').dialog({ 6 | autoOpen: true, 7 | draggable: false, 8 | modal: true, 9 | title: 'Settings', 10 | buttons: { 11 | "Save": function () { 12 | 13 | $(portlets).each(function() { 14 | set_window_visibility(this); 15 | }); 16 | $(".column1").width(parseInt($('#c1-width').val())); 17 | $(".column2").width(parseInt($('#c2-width').val())); 18 | $(".column3").width(parseInt($('#c3-width').val())); 19 | $(this).dialog('destroy'); 20 | }, 21 | "Cancel": function () { 22 | $(this).dialog('destroy'); 23 | } 24 | } 25 | }); 26 | }); 27 | function set_window_visibility(name){ 28 | if($('#'+name+'-visible').is(':checked')) 29 | $('#'+name+'-portlet').show(); 30 | else 31 | $('#'+name+'-portlet').hide(); 32 | } 33 | function set_visible_check(name){ 34 | if($('#'+name+'-portlet').is(":visible")) 35 | $('#'+name+'-visible').each(function(){ this.checked = true; }); 36 | else 37 | $('#'+name+'-visible').attr("checked", false); 38 | } 39 | $( "#settings_dialog" ).bind( "dialogopen", function(event, ui) { 40 | 41 | }); 42 | $( "#window_dialog" ).bind( "dialogopen", function(event, ui) { 43 | $(portlets).each(function() { 44 | set_visible_check(this); 45 | }); 46 | $('#c1-width').val($(".column1").width()); 47 | $('#c2-width').val($(".column2").width()); 48 | $('#c3-width').val($(".column3").width()); 49 | }); 50 | }); 51 | 52 | $(function() { 53 | $( ".column1" ).sortable({ 54 | connectWith: ".column1, .column2, .column3" 55 | }); 56 | $( ".column2" ).sortable({ 57 | connectWith: ".column1, .column2, .column3" 58 | }); 59 | $( ".column3" ).sortable({ 60 | connectWith: ".column1, .column2, .column3" 61 | }); 62 | $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ) 63 | .find( ".portlet-header" ) 64 | .addClass( "ui-widget-header ui-corner-all" ) 65 | .prepend( "") 66 | .end() 67 | .find( ".portlet-content" ); 68 | 69 | $( ".icon-vis" ).click(function() { 70 | $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" ); 71 | $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle(); 72 | }); 73 | $( ".icon-close" ).click(function() { 74 | //$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" ); 75 | $( this ).parents( ".portlet:first" ).hide(); 76 | }); 77 | $( ".column" ).disableSelection(); 78 | }); -------------------------------------------------------------------------------- /dashboard.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | Sample Dashboard 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 20 |
21 | 37 |
38 |
39 |
Feeds
40 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
41 |
42 | 43 |
44 |
News
45 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
46 |
47 |
48 |
49 |
50 |
Shopping
51 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
52 |
53 |
54 |
55 | 59 |
60 |
Images
61 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
62 |
63 |
64 |
65 | 66 | 67 | --------------------------------------------------------------------------------