portlets jquery
Есть виджет Sortable В jquery UI, но его можно использовать для портлетов.
Впринципе довольно чётко работает. Но вот вопрос как добавлять мышкой новые портлеты пользователю. можно к sortable привязать dragable, и он при перетаскивании в sortable копирует своё содержимое туда. Но это довольно хреново, так как хочется перетаскивать туда иконку а не содержимое. Можно отлавливать момент когда копирование окончится, и подменять иконку нормальным содержимым, но когда я так делаю у меня стили css не применяются, тоесть тупо голый html а css не фурычит. Может кто подскажет как сделать. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Portlets</title> <link rel="stylesheet" href="lib/themes/base/jquery.ui.all.css"> <script src="lib/jquery-1.5.1.js"></script> <script src="lib/ui/jquery.ui.core.js"></script> <script src="lib/ui/jquery.ui.widget.js"></script> <script src="lib/ui/jquery.ui.mouse.js"></script> <script src="lib/ui/jquery.ui.sortable.js"></script> <script src="lib/ui/jquery.ui.draggable.js"></script> <link rel="stylesheet" href="lib/demos.css"> <style> .column { width: 170px; float: left; padding-bottom: 10px; } .column2 { width: 170px; float: left; padding-bottom: 10px; } .portlet { margin: 0 1em 1em 0; } .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; } .portlet-header .ui-icon { float: right; } .portlet-content { padding: 0.4em; } .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; } .ui-sortable-placeholder * { visibility: hidden; } #draggable { width: 80px; height: 40px; padding: 0.5em; } </style> <script> $(function() { $('.new').find(" .portlet-header").hide(); function initpanel(sr){ // инициализируем панель $(sr+" .ui-icon").live("click", function(){ $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" ); $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle(); }); $(sr+" .appletClose").live("click", function(){ $( this ).parents( ".portlet:first" ).remove(); }); $(sr+ " .appletClose2").live("click", function(){ // $( this ).parents( ".portlet:first" ).parents(".column:first").html('<div class="portlet"> <div class="portlet-header">Links</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div></div>'); $( this ).parents( ".portlet:first" ).html('<div class="portlet"> <div class="portlet-header">Links</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div></div>'); }); } // остальной функционал $( "#draggable" ).draggable({ connectToSortable: ".column", helper: "clone", stop: function() { z=$(".column" ).find('.new'); z.find(" .portlet-header").show(); } }); $( ".column" ).sortable({ connectWith: ".column", revert: true }); $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ) .find( ".portlet-header" ) .addClass( "ui-widget-header ui-corner-all" ) .prepend( "<span class='ui-icon ui-icon-minusthick appletToggle'></span>") .prepend( "<span class='ui-icon ui-icon-circle-triangle-w appletClose' ></span>") .prepend( "<span class='ui-icon ui-icon-circle-triangle-w appletClose2' ></span>") .end() .find( ".portlet-content" ); initpanel(".portlet-header"); $( ".column" ).disableSelection(); }); </script> </head> <body> <div style="width:20px"> <div id="draggable" class="portlet new"> <div class="portlet-header">T</div> <div class="portlet-content"> X </div> </div> </div> <div> <div class="column" style="height:800px;"> <div class="portlet"> <div class="portlet-header">Feeds</div> <div class="portlet-content column">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> <div class="portlet"> <div class="portlet-header">News</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> <div class="column" style="width:300px;height:800px;"> <div class="portlet"> <div class="portlet-header">Shopping X</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> <div class="column" style="width:300px;height:800px;"> <div class="portlet"> <div class="portlet-header">Links</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> <div class="portlet"> <div class="portlet-header">Links</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div></div> <div class="portlet"> <div class="portlet-header">Images</div> <div class="portlet-content"> A bit of a friendly challenge was put to me by Chris Heilmann, a London based Yahoo developer and JavaScript guru / author. So, I have updated this little demo with improved expand / collapse toggle behavior. I have also made it so that each portlet can be dragged and dropped, ala Netvibes. This was made possible using the Interface plugins for jQuery. I am going to go out on a limb here and say that this whole crazy notion about Ajax (it’s not an acronym), JavaScript and Web Standards is more than just a fad. In fact, I dare say that it is here to stay. Yes sir-ee, these Intarwebs are alive with so many flashy widgets, you’d swear we are in the 1990’s all over again. Recently, the man himself – Zeldman had this to say about it </div> </div> </div> </div> </body> </html> |
Часовой пояс GMT +3, время: 01:35. |