CN111176519A - 一种复选框滑动多选的方法 - Google Patents
一种复选框滑动多选的方法 Download PDFInfo
- Publication number
- CN111176519A CN111176519A CN201811343500.XA CN201811343500A CN111176519A CN 111176519 A CN111176519 A CN 111176519A CN 201811343500 A CN201811343500 A CN 201811343500A CN 111176519 A CN111176519 A CN 111176519A
- Authority
- CN
- China
- Prior art keywords
- mouse
- selection
- sliding
- event
- index
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
Abstract
本发明公开了一种复选框滑动多选的方法,用户在复选框上按下鼠标时触发mouse‑down事件,设置一个变量,标识滑动选择开始;对复选框的父元素同时监听mouse‑out和mouse‑over事件;在Mouse‑out里设置本次滑动选择的类型;在mouse‑over事件里,检测当前滑过元素的索引,循环设置从起始索引到当前索引对应的复选框状态;最后,在最外层的元素监听mouse‑up事件,即当鼠标松开时,标识本次滑动选择结束。本发明无需额外的开发工作量,只需要对复选框相关事件做简单的改进,即可有效提高操作人员的工作效率,提升web应用系统的用户体验。
Description
技术领域
本发明属于互联网技术领域,尤其涉及一种复选框滑动多选的方法。
背景技术
随着互联网的普及程度不断提高,基于浏览器的web应用系统越来越多,在 web系统里,复选框作为批量操作数据的选择器,是使用频率较高的web控件。虽然复选框本身技术含量不高,但基于传统的操作方法,用户在批量选择数据时,必须手动逐个选择,整个过程过于繁琐,工作效率较低。
发明内容
为克服现有技术的不足之处,本发明提供一种复选框滑动多选的方法。
本发明是通过以下技术方案实现的:
一种复选框滑动多选的方法,其特征在于,包括如下步骤:
(1)用户在复选框上按下鼠标时触发mouse-down事件,设置一个变量,标识滑动选择开始;
(2)对复选框的父元素同时监听mouse-out和mouse-over事件;
(3)在Mouse-out里设置本次滑动选择的类型,如果初始元素是选中状态,则滑动选择的元素均选中;如果初始元素是未选中状态,则滑动选择的元素均取消选中;
(4)在mouse-over事件里,检测当前滑过元素的索引,循环设置从起始索引到当前索引对应的复选框状态;最后,在最外层的元素监听mouse-up事件,即当鼠标松开时,标识本次滑动选择结束。
本发明的有益效果是:本发明提供的复选框滑动多选的方法,无需额外的开发工作量,只需要对复选框相关事件做简单的改进,即可有效提高操作人员的工作效率,提升web应用系统的用户体验。
附图说明
结合附图,并通过参考下面的详细描述,将会更容易地对本发明有更完整的理解并且更容易地理解其伴随的优点和特征,其中:
图1是本发明的原理示意图。
具体实施方式
下面将结合具体实施例来详细说明本发明,在此本发明的示意性实施例以及说明用来解释本发明,但并不作为对本发明的限定。
如图1所示,一种复选框滑动多选的方法,包括如下步骤:
(1)用户在复选框上按下鼠标时触发mouse-down事件,设置一个变量,标识滑动选择开始;
(2)对复选框的父元素同时监听mouse-out和mouse-over事件;
(3)在Mouse-out里设置本次滑动选择的类型,如果初始元素是选中状态,则滑动选择的元素均选中;如果初始元素是未选中状态,则滑动选择的元素均取消选中;
(4)在mouse-over事件里,检测当前滑过元素的索引,循环设置从起始索引到当前索引对应的复选框状态;最后,在最外层的元素监听mouse-up事件,即当鼠标松开时,标识本次滑动选择结束。
具体的,本实施例中,用户鼠标点击复选框,触发mouse-down,滑动选择开始batch_select_mode=true。
移动鼠标时,触发mouse-out,记录初始选择状态batch_select_value=true 和初始索引batch_select_firstidx=i。
滑动鼠标,记录鼠标所在位置的索引值batch_select_lastidx=j。
循环设置从初始索引(i)到当前索引(j)之间所有的复选框,将状态设置为初始选择状态(batch_select_value)。
松开鼠标,触发mouse-up,滑动选择结束batch_select_mode=false。
onMouseup事件定义:
onMouseDown事件定义:
onMouseOut事件定义:
综上所述,本发明无需额外的开发工作量,只需要对复选框相关事件做简单的改进,即可有效提高操作人员的工作效率,提升web应用系统的用户体验。
Claims (4)
1.一种复选框滑动多选的方法,其特征在于,包括如下步骤:
(1)用户在复选框上按下鼠标时触发mouse-down事件,设置一个变量,标识滑动选择开始;
(2)对复选框的父元素同时监听mouse-out和mouse-over事件;
(3)在Mouse-out里设置本次滑动选择的类型,如果初始元素是选中状态,则滑动选择的元素均选中;如果初始元素是未选中状态,则滑动选择的元素均取消选中;
(4)在mouse-over事件里,检测当前滑过元素的索引,循环设置从起始索引到当前索引对应的复选框状态;最后,在最外层的元素监听mouse-up事件,即当鼠标松开时,标识本次滑动选择结束。
2.如权利要求1所述的复选框滑动多选的方法,其特征在于,所述步骤(2)中当移动鼠标时,触发mouse-out,记录初始选择状态和初始索引。
3.如权利要求1所述的复选框滑动多选的方法,其特征在于,所述步骤(3)中滑动鼠标,记录鼠标所在位置的索引值。
4.如权利要求1所述的复选框滑动多选的方法,其特征在于,所述步骤(4)中循环设置从初始索引到当前索引之间所有的复选框,将状态设置为初始选择状态。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811343500.XA CN111176519A (zh) | 2018-11-13 | 2018-11-13 | 一种复选框滑动多选的方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811343500.XA CN111176519A (zh) | 2018-11-13 | 2018-11-13 | 一种复选框滑动多选的方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN111176519A true CN111176519A (zh) | 2020-05-19 |
Family
ID=70657107
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201811343500.XA Pending CN111176519A (zh) | 2018-11-13 | 2018-11-13 | 一种复选框滑动多选的方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111176519A (zh) |
Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1851631A (zh) * | 2005-12-27 | 2006-10-25 | 华为技术有限公司 | 树中单个节点的事件处理方法 |
CN1924865A (zh) * | 2005-09-02 | 2007-03-07 | 奥林巴斯映像株式会社 | 信息编档设备和信息编档方法 |
CN101063924A (zh) * | 2006-04-30 | 2007-10-31 | 国际商业机器公司 | 使用户能够在一个文档中选择多个对象的方法及装置 |
CN102262507A (zh) * | 2011-06-28 | 2011-11-30 | 中兴通讯股份有限公司 | 一种利用多点触控实现对象批量选择的方法和装置 |
CN102662555A (zh) * | 2012-03-06 | 2012-09-12 | 华为终端有限公司 | 一种终端复选操作方法和终端 |
CN102760029A (zh) * | 2011-04-29 | 2012-10-31 | 汉王科技股份有限公司 | 在显示界面上操作列表的方法和装置 |
CN103853455A (zh) * | 2012-11-30 | 2014-06-11 | 金蝶软件(中国)有限公司 | 一种选择对象的方法及装置 |
CN104777992A (zh) * | 2014-01-09 | 2015-07-15 | 中兴通讯股份有限公司 | 一种触摸屏下实现快速批量操作的方法及装置 |
US20160259511A1 (en) * | 2010-11-23 | 2016-09-08 | Levels Beyond | Dynamic synchronization tool |
CN106020627A (zh) * | 2016-05-20 | 2016-10-12 | 乐视控股(北京)有限公司 | 一种对列表项进行多选的方法和装置 |
-
2018
- 2018-11-13 CN CN201811343500.XA patent/CN111176519A/zh active Pending
Patent Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1924865A (zh) * | 2005-09-02 | 2007-03-07 | 奥林巴斯映像株式会社 | 信息编档设备和信息编档方法 |
CN1851631A (zh) * | 2005-12-27 | 2006-10-25 | 华为技术有限公司 | 树中单个节点的事件处理方法 |
CN101063924A (zh) * | 2006-04-30 | 2007-10-31 | 国际商业机器公司 | 使用户能够在一个文档中选择多个对象的方法及装置 |
US20160259511A1 (en) * | 2010-11-23 | 2016-09-08 | Levels Beyond | Dynamic synchronization tool |
CN102760029A (zh) * | 2011-04-29 | 2012-10-31 | 汉王科技股份有限公司 | 在显示界面上操作列表的方法和装置 |
CN102262507A (zh) * | 2011-06-28 | 2011-11-30 | 中兴通讯股份有限公司 | 一种利用多点触控实现对象批量选择的方法和装置 |
CN102662555A (zh) * | 2012-03-06 | 2012-09-12 | 华为终端有限公司 | 一种终端复选操作方法和终端 |
CN103853455A (zh) * | 2012-11-30 | 2014-06-11 | 金蝶软件(中国)有限公司 | 一种选择对象的方法及装置 |
CN104777992A (zh) * | 2014-01-09 | 2015-07-15 | 中兴通讯股份有限公司 | 一种触摸屏下实现快速批量操作的方法及装置 |
CN106020627A (zh) * | 2016-05-20 | 2016-10-12 | 乐视控股(北京)有限公司 | 一种对列表项进行多选的方法和装置 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US11481408B2 (en) | Event driven extract, transform, load (ETL) processing | |
US9836346B2 (en) | Error troubleshooting using a correlated knowledge base | |
US8312037B1 (en) | Dynamic tree determination for data processing | |
US8812546B1 (en) | State management for user interfaces | |
CN110968309B (zh) | 一种模板生成方法、装置、电子设备及存储介质 | |
CN103412924B (zh) | 日志多语言查询方法和系统 | |
CN105138312B (zh) | 一种表格生成方法及装置 | |
US11250066B2 (en) | Method for processing information, electronic device and storage medium | |
WO2018103532A1 (zh) | 一种无埋点部署监测方法及相关装置 | |
CN104268241B (zh) | 一种配置数据库中属性显示方法 | |
JP6542880B2 (ja) | データソースからデータターゲットにデータを転送するためのインポート手順の呼出しの単純化 | |
US10175954B2 (en) | Method of processing big data, including arranging icons in a workflow GUI by a user, checking process availability and syntax, converting the workflow into execution code, monitoring the workflow, and displaying associated information | |
CN111222571B (zh) | 图像特效的处理方法、装置、电子设备及存储介质 | |
Kondekar et al. | Image retrieval techniques based on image features: a state of art approach for cbir | |
CN108334619A (zh) | 一种数据采集方法、装置、计算设备及存储介质 | |
CN105550179A (zh) | 一种网页收藏方法和浏览器插件 | |
CN103713901A (zh) | 单据的展示方法和系统 | |
CN111176519A (zh) | 一种复选框滑动多选的方法 | |
US9977726B2 (en) | System and method for smart framework for network backup software debugging | |
CN107330031A (zh) | 一种数据存储的方法、装置及电子设备 | |
CN104462521B (zh) | 订阅卡片关联信息的搜索方法 | |
WO2016173136A1 (zh) | 一种终端应用处理方法及其装置 | |
US20210042271A1 (en) | Distributed garbage collection for dedupe file system in cloud storage bucket | |
CN112162964B (zh) | 一种自适应数据同步方法、装置、计算机设备及存储介质 | |
CN116881001B (zh) | 多dpu宿主机的云平台的管控方法、装置、设备及介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200519 |