左右两部分 中间选择按钮(添加,删除)

uniapp上实现一个左滑显示删除按钮,右滑删除按钮消失 功能需求 产品提出来需要实现左滑动特定的一项,来显示删除按钮,用户右滑动隐藏删除按钮(ps:没用原生的是因为样式与视觉给的不符合,不如自己设计一个) 具体功能实现 1. html部分 <template> <view class="container" @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :style="{left: leftStyle + 'rpx'}"> <view> 阅读详情
<script type="text/javascript">
window.onload = function() {
    // 获取两个 select 和两个 button
    var select_left = document.getElementById("left"),
        select_right = document.getElementById("right"),
        button_add = document.getElementById("add"),
        button_delete = document.getElementById("delete");
                            
    // 点击添加
    button_add.onclick = function() {
        // 获取左边被选择的 option 的索引
        var idx = select_left.selectedIndex;
		
        // 如果左边有 option 被选择
        if(idx !== -1) {
		alert(select_left[idx].value);
            // 将此 option 移动到右边
            select_right.appendChild(select_left[idx]);
        }else{
			alert('必须选择一个');
		}
    };
                            
    // 点击删除
    button_delete.onclick = function() {
        // 获取右边被选择的 option 的索引
        var idx = select_right.selectedIndex;
        // 如果右边有 option 被选择
        if(idx !== -1) {
            // 将此 option 移动到左边
            select_left.appendChild(select_right[idx]);
        }
    };
};
</script>
<select id="left" size="10" style="width: 100px;">
<option value="cpp">++</option>
<option value="java">JAVA</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
</select>
        
<div style="display: inline-block;">
<input type="button" id="add" value="添加" />
<input type="button" id="delete" value="删除" />
</div>
        
<select id="right" size="10" style="width: 100px;">
        
</select>


基于jQuery的左滑出现删除按钮 最近在做项目的时候遇到了个需求,在网页上实现类似于QQ会话列表那样子的左滑出现删除按钮的效果,于是尝试着写了一个,写出来与大家交流分享,大神勿喷。基本要求由于我们是在做一个跨平台的APP,里面部分界面其实就是WebView加载的网页,因此需要使用网页实现这样的效果:往左滑动时,显示删除按钮,再往右滑,隐藏删除按钮。成品示例图额,先上图吧。下面分别是在PC浏览器里和在Mobile浏览器里的效果。PC浏 阅读详情

相关推荐

绑定按钮,保存修改选择到的按钮的操作

有时候做项目我们需要保存修改选择按钮对象,既然修改选择到的按钮,那就包括新增按钮和取消按钮,这是在页面上需要呈现许多按钮的选择,同时也需要取消按钮或者重新选择所需要选择的按钮对象,下面讲一下选择按钮的时候,保存修改,涉及到取消按钮高亮效果的选择。 可以绑定一个方法来进行选择到的对象进而修改。下面进入主题,这里我们在HTML上面设置了按钮,然后到script里面先 声明一个ID,然后在下面写一个方法点击选择对象,可以用console在页面上点击按钮的时候获取ID,然后声明一个ID ,因为之前在上面就已经

m0_57448314的博客 1965

左右两个列表框项之间的添加、移除、上下移动

左右两个列表框项之间的添加、移除、上下移动 左右两个列表框项之间的添加、移除、上下移动的JS脚本: Code<scriptlanguage="javascript"type="text/javascript">//<!CDATA[//双击source某项时添加该项到destination...

weixin_30835649的博客 591

左右选择按钮

简单的左右切换菜单功能

MingL520的博客 1162

左右按钮样式

左右按钮样式

再晚也要回家的博客 289

离线安装WSL2系统

由于办公环境在内网环境中,需将开发环境部署到内网中。环境:内网:win10。

qq_40224400的博客 3511

STM32CubeMX安装避坑指南:为什么你的Java环境总是报错?

本文针对STM32CubeMX安装过程中最常见的Java环境报错问题,提供了一套完整的诊断与解决方案。文章深入剖析了JRE版本冲突、环境变量配置错误、路径权限等核心原因,并给出了从系统级检查到手动修正环境变量的详细步骤,帮助开发者彻底解决安装难题,顺利开启STM32开发之旅。

prometheus9mon的博客 226

怎么在HTML左右栏中加入内容,左右选择添加删除内容菜单.html

123网页特效|Linkweb.cn/Js|---左右选择添加删除内容菜单4567选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。8910111213北京14上海15山东16安徽17重庆18福建19甘肃20广东21广西22贵州23海南24河北25黑龙江26河南27湖北28湖南29内蒙古3...

weixin_35664484的博客 365

VSCode CMake 安装与配置详解

概述 在windows上使用cmake编译C/C++程序时,首先需要CMake,安装gcc/g++编译环境,然后使用VSCode 以及配置下CMakelist.txt。 所需工具: VSCode (需要安装以下插件) C/C++ C++ Intellisense CMake CMake tools CMake Tools Helper CMake MinGW 安装CMake 下载链接:...

Markus 8万+

用jQuery实现multiple select(列表框)左右添加和删除功能

  实现multiple select(列表框)左右添加和删除功能 select{ text-align:center; width:300px; height:150px; } -->

旺仔专栏 7101

Aras Innovator生命周期图实战:从配置到权限管理的全流程解析

本文详细解析了Aras Innovator生命周期图的全流程配置与权限管理,从基础概念到实战应用,涵盖状态设置、路径配置、权限控制等核心功能。通过实际案例和代码示例,帮助用户掌握如何高效管理数据生命周期,提升业务流程的规范性和效率。

ee345的博客 168

支付逻辑漏洞的八大姿势(上篇)

学习支付漏洞,看这篇文章!!!文章来源:SecHub网络安全社区(本资料仅供学习参考,严禁使用者进行未授权渗透测试!严禁任何形式的转载!

qq_39493066的博客 1358

android动态添加view滑动删除,Android RecyclerView使用删除按钮进行部分滑动

我正在尝试在 RecyclerView 中实现部分滑动并添加删除按钮 . 我想在用户点击删除按钮后才删除刷过的行 . 我正在使用 ItemTouchHelper . SimpleCallback 并且能够使用下面的代码实现部分滑动 . 我有两个待处理的任务:我正在使用 onChildDraw 方法实现部分滑动 . 我正在部分滑动时绘制一个红色矩形 . 我想在其中添加文本"Delete" . ...

weixin_33037313的博客 276

Lenovo 拯救者15ISK硬件升级实战:从内存到固态硬盘的全面优化

本文详细介绍了为联想拯救者15ISK笔记本电脑进行硬件升级的完整实战指南。通过评估升级可行性,指导如何挑选兼容的内存条与NVMe固态硬盘,并提供详细的拆机安装步骤与系统安装避坑技巧。升级后,笔记本的开机速度、软件加载及多任务处理能力获得飞跃式提升,让老旧设备重获新生。

weixin_29310631的博客 556

【video clips 专栏 2.1 -- videopad 删除视频中间部分】

假设你有一个 10 分钟的视频,你想要删除从 2 分钟到 4 分钟的部分。

CodingCos的博客 979

金蝶Apusic应用服务器 未授权目录遍历漏洞复现

由于金蝶Apusic应用服务器/admin/protected/selector/server_file/files、/admin/protected/selector/server_file/folders 等接口没有进行校验和过滤,直接将参数拼接到文件操作中,导致出现目录遍历漏洞,未经身份验证的远程攻击者可通过此漏洞读取系统内部系统文件路径及信息,导致信息泄露,系统处于极不安全状态。

0xSec 2169

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

删除按钮_React-Django学习36-添加删除按钮

React-Django学习36-添加删除按钮增删改查的API都完成了。我们现在开始制作前端代码。首先我们需要添加删除记录的按钮。再表格最右边,添加操作栏,然后添加一个删除按钮。首先添加表头表头添加成功然后给每一行添加按钮。这样就给每一行都添加了删除按钮。完整源码,请参考:https://github.com/zhangyiant/mysite/tree/v36_20190404前一节: Reac...

weixin_40006965的博客 217

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

ToDoList的升级----添加侧滑显示删除按钮

之前写过一篇关于RecyclerView的进阶使用来搭建一个简易的ToDoList列表(link),里面是通过侧滑滑倒底直接删除,但这样显然不够美观,也容易导致误触。我们可以像QQ那样实现一个侧滑到一定程度显示一个按钮,我们点击按钮进行删除,比如:那这个又应该如何实现呢?没想到这一个小demo能引出这么多的知识,设计了rv的进阶用法,事件分发冲突以及各种零碎的小问题。还是获益匪浅的。

zzx_0826的博客 982

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

qt 工具栏添加按钮_将删除按钮添加到Windows 7资源管理器工具栏

qt 工具栏添加按钮 This article describes how to add a Delete button to the Windows 7 Explorer toolbar. In the 本文介绍如何将删除按钮添加到Windows 7资源管理器工具栏。 在里面 followup article, we'll see how to ad...

cunchi8090的博客 1222

删除按钮的选中状态_Shopify添加和删除动态结账按钮操作教程

您可以在具有添加到购物车按钮的Shopify商店的任何部分添加或删除动态结账按钮。在添加动态结账按钮之前,请确保它们与您的在线商店兼容。备注:动态结账按钮适用于 Shopify 模版商店中所有当前版本的模版。如果您使用的是旧版模版,则需要更新您的模版或编辑您的模版代码以添加动态结账按钮。本页相关主题在产品页面上添加或删除动态结帐按钮在主页上添加或删除动态结账按钮向选定产品添加动态结账按钮1.在产品...

weixin_29375669的博客 402

vue删除按钮/数据双向绑定/添加数据/删除数据/let和var

#vue删除按钮/数据双向绑定/添加数据/删除数据 这是自己写项目时候的,可以参考一下 先上代码: 下面展示一些 <template>代码片。 // template <template> <div> <div class="harvest_box"> <ul class="harvest_ul clearfix"> <li v-for="(item,i) in information"

weixin_47707952的博客 2266

IOS 通过按钮添加和删除控件

想要达到的效果如下: 先讲一下这个demo主要部分,即通过按钮实现增删图标 分析: 1、每一个图标需要两个数据,即图片和描述用的字符串 ,所以创建一个Item类来封装从plist文件读取出来的数据: 1)plist文件如下: 2)Item类: .h文件 #import &lt;Foundation/Foundation.h&gt; @interface Item : NSObject //描...

weixin_42509364的博客 1244

elementui tree 组件实现鼠标移入节点,节点后面显示添加删除按钮

首先说明个人自我感觉我这个办法比较low,算是抛砖引玉,希望各位高手有更好的办法多多指点!多谢 我们的需求是鼠标进入节点的时候对应节点后面显示添加删除按钮,本来用JQ挺好实现的效果,但是在vue中个人感觉不那么容易实现, 最初我是想通过v-show 或者v-if 来控制这些按钮的显示和隐藏,但是效果确是我放上去以后所有节点后面的按钮都显示出来了 ,代码和效果如下 <el-tree :da...

banzhuanren1的博客 9069

家居分类的添加、修改、逻辑删除和批量删除

mapper-locations: classpath:/mapper/**/*.xml # 这个表示扫描mapper文件夹下的所有xml文件,即使是子文件夹下的也会扫描db-config:logic-delete-field: flag # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)logic-delete-value: 0 # 逻辑已删除值(默认为 1)logic-not-delete-value: 1 # 逻辑未删除值(默认为 0)

Sun的个人博客 1190

Web表格添加与删除行

Web表格添加与删除行 开发工具与关键技术:Visual Studio 2015,jQuery,JavaScript 作者:张启翔 撰写时间:2019-02-07 下面是使用jQuery写的一个添加行以及删除行的功能。 首先把前端表的样式写出来,这里是使用bsgrid表格写的,所以表结构分为三部分:表头(thead)、表身(tbody)以及表尾(tfoot) 而我在表身部分添加了个id方便控制...

小白学编程 2115
上一篇: js时间倒计时(三)
下一篇: js 控制样式添加
learnTech
博客等级 码龄14年 10粉丝 73原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值