注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery拖拽布局插件Portal应用

jQuery插件 fishcity 2155浏览

一个基于jquery的使用性较强的拖拽布局插件,它是通过某个该站的布局得到的灵感,感觉效果很好,就用jquery的PORTAL布局,可以轻松实现模块的添加删除移动等效果,适合于个性化较强的网站。当然,这功能效果也是基于现代浏览器的,IE9以下的就不要用了,看不到效果。下面来看下他的用法吧。

引入核心文件,这里的文件较多,求高效率的朋友可以试着合并一些文件吧。

<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-fallr-1.3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/ui/ui.core.min.js"></script>
<script type="text/javascript" src="js/ui/ui.sortable.min.js"></script>
<script type="text/javascript" src="js/jquery-fallr-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/Jh.js"></script>

构建html,因为模块都是用JS生成的,所以html就不用写了,直接由JS在boyd内生成。

写入JS实现应用效果

$(function () {	
	var DATA = {
		'appL' : {
			'avatar':'头像信息',
			'comment':'留言簿',
			'doing':'最新动态',
		},
		'appM' :{
			'blog':'blog',
			'profile':'个人资料',
			'spaceinfo':'空间介绍',
			'friends':'我的好友'
		},
		'appR' : {
			'gallery':'我的相册',
			'visitors':'最近访客',
			'thread':'我的话题'
		}
	}	
	Jh.fn.init(DATA);
	Jh.Portal.init(DATA);
});

如果Portal插件不是您需要的,您可以查看下Shapeshift拖拽插件

转载请注明:jQ酷 » jQuery拖拽布局插件Portal应用

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。