您的位置：首页 > Web前端 > JQuery

主页自定义可拖动组件 1.0版本 （jquery-ui-sortable）

2014-03-05 14:18 691 查看
1.0版本：

介绍：可自定义组件，自定义组件的横坐标和纵坐标及组件显示的内容，显示在页面上。

先看效果吧



目前我只录了这六条数据，名称是录入的次序，括号里是录入组件我所设定的坐标。都能看懂吧？

录入的数据：



为了写这个组件页面，脑子都快坏玩了，浆糊啊浆糊。脑子太不灵光了

OK，下面开始：

首先，要把录入的数据存在一个List里，要注意，必须按横坐标和纵坐标排序

@Service
public class WidgetManager extends BaseService<Widget, Long> {

public List<Widget> getWidgets() {
String sql = " select A from " + Widget.class.getName() + " A order by A.positionX , A.positionY asc";
return searchBySql(sql);
}

}
@RequestMapping("")
public String index(HttpServletRequest request) {
List<Widget> widgets = widgetManager.getWidgets();
request.setAttribute("widgets", widgets);
return getFileBasePath() + "uiIndex";
}


页面：（最关键！！！）

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ include file="../common/header.jsp"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<title><jdf:message code="组件首页" /></title>
<style>

body {
min-width: 520px;
}
.column {
width: 400px;
float: left;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
li {
list-style:none;
}
</style>
<script>
$(function() {
$( ".draggable" ).sortable({
connectWith: ".draggable",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all",
revert:true
});
$( ".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>
<c:forEach begin="1" end="3" varStatus="num0">
<ul id="column${num0.index}" class="column" >
<c:forEach var="item" items="${widgets}" varStatus="num">
<c:if test="${item.positionY==num0.index}">
<li>
<div class="column draggable" id="widget_${item.objectId }">
<div class="portlet">
<div class="portlet-header"  name="portlet-header">${item.name }</div>
<div class="portlet-content" style="display:none;">
<iframe id="widgetFrame" name="widgetFrame" src="${dynamicDomain}${item.linkUrl }?ajax=1" style="overflow: visible; height: 550px;width: 100%" scrolling="auto" frameborder="no"></iframe>
<input type="hidden" name="widgetId" value="${item.objectId}">
</div>
</div>
</div>
</li>
</c:if>
</c:forEach>
</ul>
</c:forEach>

</body>
</html>


最后，要向大家推荐一个ui-porlet

https://github.com/henryyan/jquery-ui-portlet
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航