您的位置:首页 > Web前端 > BootStrap

基于bootstrap的jQuery左右移动多选框插件 multiselect

2016-10-13 14:59 656 查看


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="../../security/core/common.jsp"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>用户项目管理</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet"
href="<%=basePath%>/resources/components/bootstrapMultiselect/css/multiselectstyle.css" />
<script type="text/javascript"
src="<%=basePath%>/resources/components/bootstrapMultiselect/js/jquery.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>/resources/components/bootstrapMultiselect/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>/resources/components/bootstrapMultiselect/js/prettify.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>/resources/components/bootstrapMultiselect/js/multiselect.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>/resources/js/app/sysuser/sysuser_project.js"></script>
</head>

<body>
<div class="main-container">
<!-- start 表单区域-->
<div class="container_add">
<div class="container_form">
<h3 class="row-title row-title-my before-sky">用户所属项目</h3>
<form id="sys_user_form">
<div class="row">
<div class="col-xs-5">
<select name="from" id="undo_redo" class="form-control" size="13"
multiple="multiple">
<option value="1">C++</option>
<option value="2">C#</option>
<option value="3">Haskell</option>
<option value="4">Java</option>
<option value="5">JavaScript</option>
<option value="6">Lisp</option>
<option value="7">Lua</option>
<option value="8">MATLAB</option>
<option value="9">NewLISP</option>
<option value="10">PHP</option>
<option value="11">Perl</option>
<option value="12">SQL</option>
<option value="13">Unix shell</option>
</select>
</div>

<div class="col-xs-2">
<button type="button" id="undo_redo_undo"
class="btn btn-primary btn-block">undo</button>
<button type="button" id="undo_redo_rightAll"
class="btn btn-default btn-block">
<i class="glyphicon glyphicon-forward"></i>
</button>
<button type="button" id="undo_redo_rightSelected"
class="btn btn-default btn-block">
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
<button type="button" id="undo_redo_leftSelected"
class="btn btn-default btn-block">
<i class="glyphicon glyphicon-chevron-left"></i>
</button>
<button type="button" id="undo_redo_leftAll"
class="btn btn-default btn-block">
<i class="glyphicon glyphicon-backward"></i>
</button>
<button type="button" id="undo_redo_redo"
class="btn btn-warning btn-block">redo</button>
</div>

<div class="col-xs-5">
<select name="to" id="undo_redo_to" class="form-control"
size="13" multiple="multiple"></select>
</div>
</div>
</div>

</div>
</form>
</div>
</div>
<!-- end 表单区域 -->
</div>
</body>

</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  multiselect bootstrap