Ticket #4698: Demo.html

File Demo.html, 2.7 KB (added by net205, July 19, 2009 10:04AM UTC)

demo of resizable and resortable plugins

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> demo </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="Net205" />
  <meta name="keywords" content="Net205" />
  <meta name="description" content="" />
  <script type="text/javascript" language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
  <script type="text/javascript" language="javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js"></script>
  <script type="text/javascript" language="javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.draggable.js"></script>
  <script type="text/javascript" language="javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.droppable.js"></script>
  <script type="text/javascript" language="javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.resizable.js"></script>
  <script type="text/javascript" language="javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.sortable.js"></script>
  <link type="text/css" href="http://jqueryui.com/themes/base/ui.all.css" rel="Stylesheet" />
  <style type="text/css">
	.column{
		float:left;
	}
	#columnA{
		border:1px solid blue;
		width:200px;
		height:100%;
		min-height:600px;
	}
	#columnB{
		border:1px solid red;
		width:400px;
		height:100%;
		min-height:600px;
		margin:auto;
	}
	.portlet{
		border:1px solid #E78F08;
		background-color: white;
		overflow:hidden;
		height:100px;
	}
  </style>
  <script type="text/javascript">
		$(function() {
			$(".column").sortable({
				connectWith: '.column',
				receive: function(event, ui) {			
					if($(event.target).width() < $(ui.item).width()){
						$(ui.item).width( $(event.target).width() - ($(ui.item).outerWidth() - $(ui.item).width()) );
					}
				}
			});

			$(".portlet").resizable({
				containment: 'parent',
				minWidth: 150,
				minHeight: 50
			});

			//bind Add button event
            $("#Add").click(function() {
                var eId = "div" + now();
				$("#columnB").append('<DIV id="'+ eId +'" class="portlet">'+ eId +'</DIV>');

				$(".portlet").resizable({
					containment: 'parent',
					minWidth: 150,
					minHeight: 50
				});
				return false;
            });
		});

        function now() {
            return +new Date;
        }
  </script>
 </head>

 <body></div>
	<button id="Add">Add Div to Column B</button>
	<div id="columnA" class="column">
	
	</div>
	<div id="columnB" class="column">
		<div class="portlet">draggable resizable sortable of div</div>
	</div>
 </body>
</html>

Download in other formats:

Original Format