船长 发表于 2009-02-16 11:25 | 分类：jQuery | 阅读数：5,764 次
jQuery实现的可伸缩可移动Div，支持拖拽，伸缩，效果不错，点击运行预览效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>jQuery Portlets</title> <script type="text/javascript" src="http://www.songlecn.com/wp-content/files/jquery-1.2.6.pack.js"></script> <script type="text/javascript" src="http://www.songlecn.com/wp-content/supload/2009/02/16/interface.js"></script> <script type="text/javascript" src="http://www.songlecn.com/wp-content/supload/2009/02/16/config.js"></script> <style type="text/css" media="all"> @import 'http://www.songlecn.com/wp-content/supload/2009/02/16/portlets.css'; </style> </head> <body> <div id="container"> <a href="http://jquery.com/" id="logo"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/16/logo.gif" alt="jQuery: New Wave JavaScript" /> </a><!-- /#logo --> <div id="header"> <span id="controls"> <a href="#" id="all_open" title="Open">[ + ]</a> <a href="#" id="all_close" title="Close">[ x ]</a> </span> <a href="#" id="all_expand">Expand</a> ~ <a href="#" id="all_collapse">Collapse</a> ~ <a href="#" id="all_invert">Invert</a> </div><!-- /#header --> <table cellspacing="0" id="columns"> <tr> <td> <div class="portlet"> <div class="portlet_topper"> 1. <a href="#" class="toggle">Toggle</a> </div> <div class="portlet_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p> </div> </div> <div class="portlet"> <div class="portlet_topper"> 2. <a href="#" class="toggle">Toggle</a> </div> <div class="portlet_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p> </div> </div> <div class="portlet"> <div class="portlet_topper"> 3. <a href="#" class="toggle">Toggle</a> </div> <div class="portlet_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p> </div> </div> </td> <td> <div class="portlet"> <div class="portlet_topper"> 4. <a href="#" class="toggle">Toggle</a> </div> <div class="portlet_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p> </div> </div> <div class="portlet"> <div class="portlet_topper"> 5. <a href="#" class="toggle">Toggle</a> </div> <div class="portlet_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p> </div> </div> <div class="portlet"> <div class="portlet_topper"> 6. <a href="#" class="toggle">Toggle</a> </div> <div class="portlet_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p> </div> </div> </td> <td> <div class="portlet"> <div class="portlet_topper"> 7. <a href="#" class="toggle">Toggle</a> </div> <div class="portlet_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p> </div> </div> <div class="portlet"> <div class="portlet_topper"> 8. <a href="#" class="toggle">Toggle</a> </div> <div class="portlet_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p> </div> </div> <div class="portlet"> <div class="portlet_topper"> 9. <a href="#" class="toggle">Toggle</a> </div> <div class="portlet_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p> </div> </div> </td> </tr> </table><!-- /#columns --> </div><!-- /#container --> </body> </html>
提示：你可以先修改部分代码再运行。
原文链接：http://sonspring.com/journal/jquery-portlets，songlecn.com收集整理
您的网名： * 必填
电子邮件： * 绝不会泄露
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
