Ticket #6049: simpletest.html

File simpletest.html, 2.9 KB (added by raziel057, September 14, 2010 12:19PM UTC)

Llink inside a portlet

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="/lib/jquery-ui/css/smoothness/jquery-ui-1.8.2.custom.css" type="text/css"/>
<script src="/lib/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/lib/jquery-ui/js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
</head>
<body>
	<style type="text/css">
		.column { width: 170px; float: left; padding-bottom: 100px; }
		.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; }
	</style>
	<script type="text/javascript">
		$(function() {
			$(".column").sortable({
				connectWith: '.column'
			});
	
			$(".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"></span>')
					.end()
				.find(".portlet-content");
	
			$(".portlet-header .ui-icon").click(function() {
				$(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
				$(this).parents(".portlet:first").find(".portlet-content").toggle();
			});
	
			$(".column").disableSelection();
		});
	</script>
		<div class="demo">
			<div class="column">
				<div class="portlet">
					<div class="portlet-header">Feeds</div>
					<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
				</div>
				<div class="portlet">
					<div class="portlet-header">News</div>
					<div class="portlet-content"><a href="javascript:alert('test')">test alerte</a></div>
				</div>
			
			</div>
			<div class="column">
				<div class="portlet">
					<div class="portlet-header">Shopping</div>
					<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
				</div>
			</div>
			
			<div class="column">
				<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">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
				</div>
			</div>
		</div><!-- End demo -->
		<div class="demo-description">
			<p>
				Enable portlets (styled divs) as sortables and use the <code>connectWith</code>
				option to allow sorting between columns.
			</p>
		</div><!-- End demo-description -->
	</body>
</html>

Download in other formats:

Original Format