穿梭框

最新推荐文章于 2024-06-26 09:52:05 发布
最新推荐文章于 2024-06-26 09:52:05 发布
阅读量552 收藏
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39508627/article/details/97935215
版权

1. style.css

@charset "utf-8";
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "宋体"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.clear{height:0; overflow:hidden; clear:both}
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top,  #ed1c24,  #A51715);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top,  #c9151b,  #a11115); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.cor_bs,.cor_bs:hover{color:#ffffff;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}
.kePublic{background:#FFF; padding:50px;}
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.mKeBanner,.mKeBanner div{text-align:center;}
/*科e互联特效基本框架CSS结束，应用特效时，以上样式可删除*/
/* 效果CSS开始 */
.selectbox{width:800px;height:250px;margin:0px auto;}
.selectbox div{float:left;}
.selectbox .select-bar{padding:0 20px;}
.selectbox .select-bar select{width:200px;height:250px;border:1px #A0A0A4 solid;padding:4px;font-size:14px;font-family:"microsoft yahei";}
.btn-bar{}
.btn-bar p{margin-top:16px;}
.btn-bar p .btn{width:50px;height:30px;cursor:pointer;font-family:simsun;font-size:14px;}
/* 效果CSS结束 */

2.index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="js特效,js栏目移动,栏目左右移动,select选择框,网页特效" />
<meta name="description" content="一款select选择框内容左右移动添加删除栏目JS代码网页特效，该特效基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){	
	//移到右边
	$('#add').click(function(){
		//先判断是否有选中
		if(!$("#select1 option").is(":selected")){			
			alert("请选择需要移动的选项")
		}
		//获取选中的选项，删除并追加给对方
		else{
			$('#select1 option:selected').appendTo('#select2');
		}	
	});
	
	//移到左边
	$('#remove').click(function(){
		//先判断是否有选中
		if(!$("#select2 option").is(":selected")){			
			alert("请选择需要移动的选项")
		}
		else{
			$('#select2 option:selected').appendTo('#select1');
		}
	});
	
	//全部移到右边
	$('#add_all').click(function(){
		//获取全部的选项,删除并追加给对方
		$('#select1 option').appendTo('#select2');
	});
	
	//全部移到左边
	$('#remove_all').click(function(){
		$('#select2 option').appendTo('#select1');
	});
	
	//双击选项
	$('#select0').dblclick(function(){ //绑定双击事件
		//获取全部的选项,删除并追加给对方
		$("option:selected",this).appendTo('#select2'); //追加给对方
	});
	//双击选项
	$('#select1').dblclick(function(){ //绑定双击事件
		//获取全部的选项,删除并追加给对方
		$("option:selected",this).appendTo('#select2'); //追加给对方
	});
	
	//双击选项
	$('#select2').dblclick(function(){
		$("option:selected",this).appendTo('#select1');
	});
	        
	$('#confirm').click(function(){
		$('.select-bar option')
		
	});
});
</script>
</head>
<body class="keBody">
<div class="kePublic">
<!--效果html开始-->
<div class="selectbox">
	<div class="select-bar">
    <select multiple="multiple" id="select0">
        <option value="超级管理员">超级管理员1</option>
        <option value="普通管理员">普通管理员1</option>
        <option value="信息发布员">信息发布员1</option>
        <option value="财务管理员">财务管理员1</option>
        <option value="产品管理员">产品管理员1</option>
        <option value="资源管理员">资源管理员1</option>
        <option value="系统管理员">系统管理员1</option>
        <option value="超级管理员">超级管理员1</option>
        <option value="普通管理员">普通管理员1</option>
        <option value="信息发布员">信息发布员1</option>
        <option value="财务管理员">财务管理员1</option>
        <option value="产品管理员">产品管理员1</option>
        <option value="资源管理员">资源管理员1</option>
        <option value="科e互联">科e互联1</option>
    </select>
</div>
<div class="select-bar">
    <select multiple="multiple" id="select1">
        <option value="超级管理员">超级管理员</option>
        <option value="普通管理员">普通管理员</option>
        <option value="信息发布员">信息发布员</option>
        <option value="财务管理员">财务管理员</option>
        <option value="产品管理员">产品管理员</option>
        <option value="资源管理员">资源管理员</option>
        <option value="系统管理员">系统管理员</option>
        <option value="超级管理员">超级管理员</option>
        <option value="普通管理员">普通管理员</option>
        <option value="信息发布员">信息发布员</option>
        <option value="财务管理员">财务管理员</option>
        <option value="产品管理员">产品管理员</option>
        <option value="资源管理员">资源管理员</option>
        <option value="科e互联">科e互联</option>
    </select>
</div>

<div class="btn-bar">
    <p><span id="add"><input type="button" class="btn" value=">" title="移动选择项到右侧"/></span></p>
    <p><span id="add_all"><input type="button" class="btn" value=">>" title="全部移到右侧"/></span></p>
    <p><span id="remove"><input type="button" class="btn" value="<" title="移动选择项到左侧"/></span></p>
    <p><span id="remove_all"><input type="button" class="btn" value="<<" title="全部移到左侧"/></span></p>
</div>
<div class="select-bar">
    <select multiple="multiple" id="select2"></select>
</div>
</div>
<div><input id="confirm" type="button" value="确定"/></div>
<!--效果html结束-->

</body>
</html>

3.要引入jquery.js

效果如下在这里插入图片描述

佩奇的胖爸爸
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui 穿梭框
我的LOG
11-17 625
layui 穿梭框直接代码 直接代码 Java类 属性 nteger id; String name; String status; boolean checked; layui 穿梭框 js （从后台获得列表后展示） var checkeds=[]; for(var i=0;i<res.data.length;i++){ if(res.data[i].checked){checkeds.pu
树型穿梭框
qq_53926905的博客
09-06 1034
树形穿梭框
antdv 穿梭框
peppa_pig的博客
06-07 412
除了实现简单的穿梭框功能，还想要重写搜索事件，想达到的效果是搜索到的结果的节点能自动展开且高亮显示。antd的穿梭框的数据貌似只接收key和title，而且必须是字符串（我测试不是字符串的不行），所以要把后端返回的数据再处理一下得到我们想要的数据。给穿梭框添加show-search。
B端组件：穿梭框—可不是简单的左口袋放右口袋
2401_82943878的博客
06-26 319
B端组件穿梭框的作用是方便用户进行数据选择和交互操作，特别是在数据量较大或数据分类较多的情况下。通过组件穿梭框，用户可以快速地将数据从一个列表中选择并移动到另一个列表中，同时可以通过搜索和过滤等功能方便地查找和选择数据。它适用于数据选择、数据分类和数据交互等场景，可以方便地展示可选数据和已选数据，并实现数据的快速选择和移动。它通常由两个列表和一些操作按钮组成，其中一个列表用于展示可选数据，另一个列表用于展示已选数据，操作按钮用于将数据从一个列表中移动到另一个列表中。
angular穿梭框_实用穿梭框
weixin_31739613的博客
01-26 655
在实际的开发过程中，有时我们会用到穿梭框，尤其是内容条目数不是很多的时候，因为这样既直观又方便，本例的效果图如下：大家既然找到了这里，就是不想自己从零开始编一个穿梭框，想找一个简单实用的直接用，这就是你们想要的东西。过多的话就不说了，强调一点，一定要在“已开通权限(left)”和“未开通权限(right)”初始化之后，再执行$("#ued-transfer-1").transferItem();，...
BootStrap穿梭框
WXN的博客
06-20 4902
<%-- <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" href="../b...
Flutter手写穿梭框
weixin_41564440的博客
07-09 299
开发工具: Android Studio ; Flutter版本:flutter_v1.9.1_hotfix.6_stable 最终效果: 代码: import 'package:flutter/material.dart'; import 'package:fluttertest0315/constant/app_style.dart'; import 'package:fluttertest0315/utils/ScreenAdaper.dart'; /// 穿梭框 class Tra.
angular穿梭框_vue实现穿梭框效果
weixin_36114835的博客
12-23 251
vue实现穿梭框效果一、总结一句话总结：用两个数组分别记录左右框框里面的值，用两个数组绑定checkbox，用来记录选中的checkbox值，根据选中的checkbox的值实现删除增加即可1、这里checkbox是绑定的vue的数组数据，所以checkbox的点击的顺序不同的话索引的顺序是不同的，这样删除数据的时候可能会出错(比如删0再删2的时候，2已经变成了1，没2了删就会报错)？对这个数组按照...
jQuery穿梭框
想搞全栈的前端
03-05 586
jQuer穿梭框 git仓库 // 初始化穿梭框 $("#shuttleBox").transferItem({ 'leftName':'左侧列表', 'rightName':'右侧列表', data:{ leftArr:[{id:'0',name:'1'},{id:'1',name:'哈哈哈哈'},{id:'3',name:'说没说过'},{id:'4',name:'我们沙发上'}], rightArr:[{id:'5',name:'沙发上的1'},{id:'6',na
手写穿梭框
weixin_45567213的博客
02-09 791
手写原生穿梭框组件，就是样式懒得写
基于layui实现树形穿梭框
05-22
"基于layui实现树形穿梭框"是layui框架中的一个组件，用于构建交互式的树状结构选择器，常用于权限管理、数据分类选择等场景。下面将详细介绍这个知识点。 1. layui框架基础： layui是一个轻量级的前端框架，包含...
简单实用穿梭框
01-14
穿梭框，又称选择框或双列选择器，是用户界面设计中常见的一种组件，尤其在数据筛选、信息关联等场景下应用广泛。本资源提供的是一款简单实用的穿梭框插件，旨在帮助开发者快速实现此类功能，提升用户体验。下面将...
ztree穿梭框.zip
12-04
本项目“ztree穿梭框.zip”是将zTree应用在穿梭框（Transfer）功能上，提供了一种直观且易于操作的方式，让用户可以方便地在两个树形列表之间转移数据。 首先，我们来详细了解一下zTree的核心知识点： 1. **zTree...
树形穿梭框
10-08
在IT行业中，树形穿梭框（Tree Transfer）是一种常见的用户界面元素，特别是在Web开发中，尤其是在使用Vue.js这样的前端框架时。它被广泛应用于数据管理、权限分配、目录选择等场景，因为它能清晰地展示层级关系，并...
QT5 FTP 客户端 实现多文件下载 上传
08-01
QT5 FTP 客户端 实现多文件下载 上传
MATLAB车牌识别实现车牌定位仿真系统（可运行）
08-01
车牌定位分为以下步骤： 图像预处理：读取图像并对其进行预处理，例如灰度化、降噪和增强等。 车牌区域定位：使用图像处理技术，例如边缘检测、连通区域检测和形态学操作等，找到车牌的大致位置。 车牌区域精确定位：通过进一步的图像处理技术，例如投影、边缘检测和形态学操作等，对车牌区域进行精确定位。 字符分割：将车牌区域中的字符进行分割，形成单独的字符图像。 字符识别：使用字符识别算法，例如模板匹配、神经网络或支持向量机等，对分割的字符进行识别。 本设计非常适合新手学习使用，进阶研究等二次开发。欢迎大家多多下载交流学习研究。
年度销售回款计划表（依据项目回款率制定，月度分解.xlsx
最新发布
08-01
销售统计，调查问卷，库存明细，跟进表，业绩统计表，差异分析 ，产品清单 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
axure多选穿梭框
12-09
Axure多选穿梭框是一种用于在不同列表之间选择多个项目的交互组件。它通常用于在两个或多个列表之间转移项目，例如从一个可用项目列表中选择多个项目并将它们移动到已选项目列表中。 使用Axure多选穿梭框，用户可以通过简单的拖放操作将项目从一个列表拖到另一个列表。用户可以选择多个项目同时移动，也可以选择一个项目按住Ctrl键再次点击来进行单独选择。 多选穿梭框通常有两个主要列表，一个是可用项目列表，另一个是已选项目列表。通过向右箭头按钮将项目从可用项目列表移到已选项目列表，通过向左箭头按钮将项目从已选项目列表移到可用项目列表。 在多选穿梭框中，还可以提供搜索功能来帮助用户快速找到特定的项目。用户只需在搜索框中输入关键词，即可过滤显示与关键词相关的项目。 此外，多选穿梭框还可以提供其他的交互功能，例如全选和取消全选按钮，以及清除已选项目的按钮。 Axure多选穿梭框是一种非常实用和常见的交互组件，在设计和原型制作中起到了很大的作用。它能够改善用户体验，提高用户操作的效率，使用户能够轻松地选择和转移多个项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值