[转载]jquery easy widgets plugin 插件(拖动布局)

baacloud免费翻墙vpn注册使用

[转载]jquery easy widgets plugin 插件(拖动布局) – goody9807 – 博客园.

这个插件在功能上来说是比较强大的了,但用起来却比较简单,对想做拖动布局的来说简直是福音。它不但可做到拖动布局,还能保存拖动后的布局,也封装了和拖 动布局相关的一些操作,比如折叠,隐藏拖动块,编辑等。闲话少说,还是看看怎么用吧!
首先当然是引入相关的js文件:
JQuery.min.js  jq框架
JQuery-ui.min.js jq的ui
JQuery.easywidgets.js  插件文件
接着写初始的布局代码:

程序代码 程序代码
<div id=”top”>头部</div>
<div id=”main”>
<div class=”widget-place column1″>
<div class=”widget”>
<div class=”widget-header”> <strong>可以拖动</strong> </div>
<div class=”widget-content”>可以拖动布局的内容</div>
</div>

<div class=”widget”>
<div class=”widget-header”> <strong>可以拖动</strong> </div>
<div class=”widget-content”> 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局</div>
</div>
</div>

<div class=”widget-place column2″>
<div class=”widget”>
<div class=”widget-header c2_1″> <strong>可以拖动有样式</strong> </div>
<div class=”widget-content”> 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局</div>
</div>

<div class=”widget”>
<div class=”widget-header”> <strong>可以拖动</strong> </div>
<div class=”widget-content”> 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局</div>
</div>
</div>

<div class=”widget-place column3″>
<div class=”widget”>
<div class=”widget-header”> <strong>可以拖动</strong> </div>
<div class=”widget-content”> 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局</div>
</div>

<div class=”widget”>
<div class=”widget-header”> <strong>可以拖动</strong> </div>
<div class=”widget-content”> 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局</div>
</div>
</div>
<div style=”clear:both;”></div>
</div>

<div id=”bottom”>底部</div>

我 上面的代码是三列的布局,每列有两个拖动块。看看,是不是很有规律??<div class=”widget-place”>…</div>就是一列,而<div class=”widget”>…</div>就是一个拖动块,<div id=”widget-header”></div>就是拖动手柄,就是鼠标按在这里可以拖动,结构就这么简单,至于列的class属 性值column1,column2,column3是为了让你区别每一列的,当然也是为了写css,这些你可以随便取,至于其他用来美化布局的样式你可 以自己根据需要添加,比如上面的我在拖动手柄上添加的c2_1。
要实现三列,少不了css

程序代码 程序代码
<style type=”text/css”>
body{
margin:0px;
font-size:12px;
}
#top,#main,#bottom{
margin:0px auto;
width:960px;
border:1px solid #CC6666;
}
#top{
height:100px;
margin-bottom:5px;
}
#main{
padding:5px 0px 5px 0px;
}
#bottom{
height:50px;
margin-top:5px;
}

#main .widget-place{
float:left;
width:310px;
/*拖动块的高度是一定要的
不然当你把一列的所有可拖动
的块东拖到其他列的时候会有
问题,这个你可以根据具体情
况设置*/
height:auto;
min-height:200px;
/*height:400px;*/
}
#main .column1{
margin-left:4px;
}
#main .column2{
margin-left:5px;
margin-right:5px;
}
#main .widget{
border:1px solid #CC99CC;
margin-bottom:5px;
}
#main .widget-header{
line-height:25px;
}
.c2_1{
divne-height:30px;
background:#999966;
}
/*这个是拖动的时候用来占位的样式*/
.widget-placeholder {
border:1px dashed #FF99CC;
}
</style>

最后,就是用这个插件了:

程序代码 程序代码
$(document).ready(function(){
$.fn.EasyWidgets();
});

看看效果

呵呵!是不是不能拖动??不用急,你只要给可拖动块的class属性增加一个值movable就得了,也就是把
<div class=”widget”>…</div>变为<div class=”widget movable”>…</div>。
好了,再看看效果。拖动演示

怎 么样,一个拖动效果就这样搞定了!现在看看怎么实现拖动的其他操作。其实也很简单,不需要任何js代码!你只要给可拖动块的class属性增加一个值 collapsable就可以实现折叠,增加一个值removable就可以实现隐藏折叠块,增加一个值editable就可以实现编辑。当然若可以编辑 你当然要给一个装编辑内容的容器。看看下面的修改后的代码:

程序代码 程序代码
<div class=”widget movable collapsable removable editable”>
<div class=”widget-header”> <strong>可以拖动</strong> </div>
<div class=”widget-editbox” style=”background:#CC6699″>
这里就是放编辑的内容,为了显眼,我加了背景
</div>
<div class=”widget-content”> 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局</div>
</div

为了使拖动块的内容初始是折叠的,你还可以给可拖动块的class属性增加一个值collapse。

演示效果

这些文字是因为的,能不能变成汉字呢??当然能,作者已经考虑到这个问题了。只要给js增加几个参数就可以了:

程序代码 程序代码
$(document).ready(function(){
$.fn.EasyWidgets({
i18n : {
editText : ‘编辑’,
closeText : ‘关闭’,
extendText : ‘展开’,
collapseText : ‘折叠’,
cancelEditText : ‘取消’
}
});
});

演示效果

就说这些基本的了,还有太多的功能就靠自己去研究了,比如拖动时实现一些效果,把“编辑”,“关闭”用图片代替,点击“编辑”,“关闭”等回调一些函数等 等。

最后说说怎么保存拖动后的布局。
你 要把每一列增加一个id属性:第一列id=”widget-place-1″,第二列id=”widget-place-2″,一次类推,把每一个拖动块 也增加一个id属性:第一个拖动块id=”identifierwidget-1″,第二个拖动块id=”identifierwidget-2″,以此 类推,至于哪个是第一个拖动块,哪个是第二个拖动块,你可以随意自己取,没有什么顺序,最后就是设置一个参数就可以了:

程序代码 程序代码
$(document).ready(function(){
$.fn.EasyWidgets({
//这个就可以保存布局了
behaviour : {
useCookies : true
},
i18n : {
editText : ‘编辑’,
closeText : ‘关闭’,
extendText : ‘展开’,
collapseText : ‘折叠’,
cancelEditText : ‘取消’
}
});
});

保存布局演示
最后提供原始文件下载

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏