Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.07.2011, 10:44
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамически загружаемая jQuery и jQuery-функции в одном файле 67bytes Общие вопросы Javascript 6 06.03.2013 09:01
2 разных модуля на jQuery - как подключить? finder jQuery 4 23.03.2012 22:29
jQuery jTreeMenu plugin Seafnox jQuery 9 12.01.2010 21:55
JQuery + FireFox NOOB jQuery 4 02.11.2009 18:16
jQuery Portlets alert2006 jQuery 0 07.10.2008 06:38