Jquery实现的可收缩、可拖拽控件_html-js-css

概述Jquery实现的可收缩、可拖拽控件

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家，也给大家做个参考。

<!DOCTYPE HTML><HTML lang="en"><head><Meta charset="utf-8"><Title>jquery UI Sor@R_403_5991@ - Portlets</Title><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.CSS"><script src="http://code.jquery.com/jquery-1.9.1.Js"></script><script src="http://code.jquery.com/ui/1.10.4/jquery-ui.Js"></script><style>body {min-wIDth: 720px;}.column {wIDth: 280px;float: left;padding-bottom: 100px;}.portlet {margin: 0 1em 1em 0;padding: 0.3em;}.portlet-header {padding: 0.2em 0.3em;margin-bottom: 0.5em;position: relative;cursor:move;}.portlet-toggle {position: absolute;top: 50%;right: 0;margin-top: -8px;}.portlet-content {padding: 0.4em;word-wrap:break-word;}.portlet-placeholder {border: 1px dotted black;margin: 0 1em 1em 0;height: 400px;}</style><script>$(function() {$( ".column" ).sor@R_403_5991@({	connectWith: ".column",handle: ".portlet-header",cancel: ".portlet-toggle",placeholder: "portlet-placeholder ui-corner-all"});$( ".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 portlet-toggle'></span>");$( ".portlet-toggle" ).click(function() {var icon = $( this );	icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );	icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();});});</script></head><body><div ID="maindiv">	<div ID="column1" >		<div >			<div >				<div>Michael Jordan</div>			</div>			<div >				<div>north Carolina,1984,No3,1.98,14years,carrer high:69</div>			</div>		</div>		<div >			<div >				<div>Allen Iverson</div>			</div>			<div >				<div>Georgetown,1996,No1,1.83,15years,carrer high:60</div>			</div>		</div>	</div>	<div ID="column2" >		<div >			<div >Wins Cart</div>			<div >north Carolina,1998,No5,16years,carrer high:51</div>		</div>	</div>	<div ID="column3" >		<div >			<div >Kevin Garnet</div>			<div >-,1995,2.11,19years,carrer high:47</div>		</div>		<div >			<div >Paul PIErce</div>			<div >Kansas,No10,2.01,carrer high:50</div>		</div>	</div>	<div ID="column4" ></div></div></body></HTML>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的Jquery实现的可收缩、可拖拽控件全部内容，希望文章能够帮你解决Jquery实现的可收缩、可拖拽控件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1097833.html