contenteditable上的jQuery UI自动完成，支持多选 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

使用jQuery UI的draggable和droppable完成拖拽功能--介绍

另外一方面，自己需要实现一个zTree不支持的复杂逻辑的拖拽功能。总体来说，我要实现的是一个可以拖拽的树形列表。当然最新版zTree也支持多课树之间的数据交互。...1.父节点可以嵌套叶子节点，而已最好支持嵌套层数不显示，程序自动完成这个功能，或者在初始化的时候，开发人员传入一个指定的层级数目 2.父节点和叶子节点都可以拖动。...项目中主要使用到jQuery UI里面的draggable和droppable，因为很多老的浏览器都不值html5的drag api。...我自己也没有去查看zTree的源代码，所以也不知道zTree底层拖拽实现是否也是使用了jQuery UI的draggable和droppable方法。...而我实际开发中，就是因为传入到后台的数据要求比较复杂，所以我就放弃了使用zTree控件。完成最后的功能界面如下，完成通过拖拽数据到右边可以计算出符合条件的人数。 ?

2.8K5 0

搭建 WPF 上的 UI 自动化测试框架

我们需要对开发出来的系统进行自动化测试，而 .NET 平台的自动化测试平台在公司内部还没有其它部门完成，所以我们在 2010 年的时候使用 Ruby + VS UIUnitTest 开发了一个 UI 自动化...（UI Automation，以下简称为UIA）框架，估且称其为 UIA 1.0。...OpenExpressApp:【OpenTest】之如何实现自动化测试框架》该测试平台已经实现了由测试人员编写易读的 UI 自动化测试代码以完成日常的自动化测试需求，已经比较易用。...部门用了大概1年左右，随着时间的推移，也显露了它的一些的不足：调试困难，维护成本大，难以添加新的 UIA 支持。过程式的代码，不结构化。测试人员开发不易，不支持编译期检查错误，重复代码过多。...基于这个框架，理论上可以做 windows 平台上所有的应用程序的自动化测试。在我们 UIA 中，Windows Automation API 用于一些更加底层的控件查找场景。

2.4K11 0

您找到你想要的搜索结果了吗？

是的

没有找到

如何利用开源DevOps工具完成云上的自动运维

就需要增加ECS以承载更多的并发和访问量，所以需要扩容一台与线上应用一致的ECS挂载到SOB上面，这里的一个关键点是扩容一台与现上应用一致的ECS。...就能够实现扩容一台与线上应用一致的ECS并且自动挂载到SLB下面。 ? Terraform 和 Packer 的介绍它们来自于HashiCorp家族，有两大特点，第一是支持多平台，第二是开源。...现在主流的云平台像阿里云、AWS、Azure等都已经支持了。另一个开源的好处是成熟、透明、可自增强。 ? Terraform最重要的一点就是模板，模板里面最重要的就是resource。...自动化的实现路径共有三条主线。第一条线可以利用Packer去而生成镜像，自动的存储到自定义镜像列表当中，然后用Terraform创建更新或者销毁这些基础设施。...而且不用通过访问生产环境就能够知道生产环境上的配置情况，也可以提高整个团队DevOps的能力。今天的分享就到这，谢谢大家！

4K7 0

HTML5 学习总结（二）——HTML5新增属性与表单元素

当一个元素的contenteditable状态为true（contenteditable属性为空字符串，或为true，或为inherit且其父元素状态为true）时，意味着该元素是可编辑的。...') dataset.orderAmount jQuery中的data()方法同样可以访问使用jQuery与javascript添加与获取data属性示例： <!...1.6、placeholder占位属性这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,除了Firefox,其他标准浏览器都能很好的支持自动补全属性当表单元素设置了自动完成功能后，会记录用户输入过的内容，双击表单元素会显示历史输入。...2.8、电话输入类型此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别. 在移动端会弹出输入数字的键盘。

4.2K7 0

一次iOS上脱机UI自动化测试方案的尝试

背景 2014年初，当时了解到浏览器的项目组在说是不是可以用KIF做自动化测试的事。于是，我就想实践看看KIF能否做脱机UI自动化测试？经过实践不可行后，我就在想，其他自动化测试框架是否可以支持？...仍没有找到能支持脱机自动化测试的框架。最后，就想有没有方法能够快速实现脱机自动化？很幸运的是，经过一周的摸索，实现了一套可行的脱机自动化方案，当时完成只是一个雏形，算是个试验品。...意外的惊喜是，两年过去了，这个试验品在地图产品存活下来了，运作在日常的自动化性能监控上。...这里也找了一些其他的第三方框架，从描述上看，没有发现能够满足我们想要的脱机UI自动化的框架。方案尝试从前面的描述上看，已经基本可以确定市面上目前还是没有这样的框架，可以支持脱机的UI自动化测试。...然后放在GT的插件上，利用GT能够和被测应用共存UI的能力，是不是就能达到脱机UI自动化测试的效果呢？我是这么想的，也是这么做的。

2.1K7 0

7 个少见但有用的 HTML 属性

对于 email 类型的，添加上 multiple 属性，你输入的邮箱值需要用 , 分隔开，内容不允许有空格。对于 file 类型的，你可以多选文件上传。...如果你想保存整个文档或者某个编辑内容，可以直接通过 DOM 操作完成。 4....Spellcheck spellcheck 也是一个全局的属性，可以检验 HTML 内容是否有拼写的语法错误，你可以用在 input 或其他元素上。...⚠️注意：通常不检查不可编辑元素的拼写错误，即使 spellcheck 被设置为 true 并且浏览器支持检查。 <!...Translate translate 告诉浏览器指定的内容是否应该被翻译。比如：你想阻止谷歌自动翻译你公司名称或者品牌名称。

6324 0

三种插件开发模式，带你玩废tinymce

UI 组件扩展 tinymce 官方提供还算多的 UI 组件，基本满足大部分应用场景, 组件名称描述 addAutocompleter() 注册一个新的自动完成组件。...当键入时在内容中匹配配置的字符串模式时，将触发自动完成器。Emoticons 和 Charmap 使用自动完成程序。...有关创建自动完成器的信息, 可以查阅: UI Components - Autocompleter. addButton() 注册一个新的工具栏按钮，该按钮在通过键盘导航控件单击或激活时执行命令。...有关创建上下文菜单的信息，可以参阅: UI Components - Context Menu. addContextToolbar() 注册一个新的上下文工具栏，该工具栏仅在内容谓词匹配时出现，例如光标位于图像元素上...更多选项可前往查看还是先上手先来搭个起手式举一个小例子一个不可编辑的输入框组件先在创建一个 index.html <!

6.6K3 0

JS插件Fancytree使用分享及源码分析

其中1为单选，2为多选（但是不会自动勾选上级），3为多选（会自动根据选中节点勾选状态来判断父节点的状态），如果是多选的话，推荐换成3。...unselectableStatus：false会忽略父级的全选，true自动勾选，不受父级的约束。...ES6模块化引入的话，要麻烦一点，首先在目标文件引入jq,jq-ui,如 import ‘jquery’ import ‘jquery-ui-bundle’;//注意这里 import ‘..../plugins/fancytree/dist/jquery.fancytree-all’; 要引入jquery-ui-bundle，即npm i jquery-ui-bundle;普通的jquery-ui...jQuery UI (http://jqueryui.com)"); 在debug中，可以看到此时的$.ui除了本身所具备的keyboard等自身属性方法，还多了fancytree。

3.7K2 0

JavaScript的理解记录（5）

，返回一个NodeList对象或Element；功能与JQuery类库中的()相似，两者参数相同，不同的是：()返回值为一个JQuery对象表示匹配的元素集，JQuery对象是一个类数组，可以用标准的数组标示方括号来访问...JQuery对象的内容；也可以用toArray()方法来将JQuery对象转化为真实的数组；参数举例：1、ID: #nav 2、标签名：div 3、class属性值：.success 4、基于属性值...outerHTML :返回的字符包含查询元素的开头和结尾标签;(HTML5才有且FireFox浏览器不支持）　　　　　　　　　textContent: 返回纯文本；IE不支持　　　　　　　　 innerText...，已存在节点将会自动从它的当前位置删除并在新的位置从新插入，可以用来做单页表格的排序等，不改变表格数据，只改变节点的顺序；　　　　　　　　 3、删除和替换节点：删除节点：removeChild() 替换节点...contenteditable属性;contenteditable>edit.....

1.7K2 0

前端组件整理

表单元素美化 uniform 提供对下拉框，单，复选框，按钮等表单元素的美化 select2 多选下拉框 DropKick 下拉框，单，多选。...待办事宜日历 full calendar 支持脱放的方式来改变待办事宜的时间时间选取组件 jQuery ui datepicker 经典，不是很好看 pickadate 轻量级，手机友好的，漂亮...我的改进版见这里 TheaterJS 模拟两个人在屏幕上对话 midnight.js 文字颜色随着背景变，屌炸了 color-animation jquery的颜色渐变动画插件。...jquery的动画不支持颜色值的变化。改库提供了这个支持。...scrolldeck flash swfobj 能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。

14.1K4 0

python测试开发django-152.bootstrap-select下拉框操作方法

前言 select下拉框操作方法主要会用到2个： 1.获取select的值，提交数据时候给到服务端 2.获取服务端设置的值，回显到select选项框上操作方法获取select的值: $(".selectpicker...UI自动化">cypress UI自动化">cypress UI自动化">cypress 点我获取 // 设置多选项值 $('.selectpicker').selectpicker('val', ['1','3'])

1.7K2 0

利用iframe简单实现富文本效果

原理实现可视化编辑，主要有两种方法【或者说是两种方式】 1、designMode 2、contentEditable contentEditable 刚开始在IE上实现，后来各大浏览器陆续支持contentEditable...，HTML5标准也包含 contentEditable。...CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。 11. Cut 将当前选中区复制到剪贴板并删除之。 12....DirLTR 目前尚未支持。 14. DirRTL 目前尚未支持。 15. EditMode 目前尚未支持。 16. FontName 设置或获取当前选中区的字体。 17....LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。 52.

2.4K0 0

鲜为人知的前端知识

paste代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码...浏览器当编辑器方式一：地址栏输入下述内容 data:text/html, contenteditable> 方式二：控制台输入下述内容 document.body.contentEditable...=true 选取DOM元素但当你在DOM中无法使用 jQuery 时，你依然可以在开发者控制台中做同样的事情。...$$等价于jQuery选择器，返回一个数组。...$$(selector)等价于jQuery中的$(selector) 查找DOM中元素关联的事件 // 存在jQuery getEventListeners($("selector")) // 无jQuery

7403 1

关于 devbridge-autocomplete 插件多选操作的实现方法

目前据我所知最好用的 autocomplete 插件就是 jquery-ui 的 autocomplete 以及 devbridge 的 autocomplete 插件。...我最终选择了 devbridge 的 autocomplete 插件，主要是不想引用 jquery-ui 的 css 文件。...：服务器端的URL或者是返回 Url 字符串的回调函数 ajaxSettings：jQuery Ajax 请求的额外配置 lookup：查询的数据列表。...：false paramName：默认值：'query' transformResult：function(response, originalQuery) {} autoSelectFirst：是否自动填充查询列表的第一项...当然多选的方式不唯一。 See the Pen autocomplete by Zongbin (@nzbin) on CodePen.

1.9K8 0

分享 15 个 HTML 新特性，大多数人可能不知道，建议尽早使用上

是的，当然，让我们从 HTML 中您可能不知道的 15 个功能的基础开始，它们将帮助您轻松实现友好的 UI。事不宜迟，我们开始学习吧！...1、内容可编辑属性 contenteditable 是可以在元素上设置以使内容可编辑的属性。它适用于 DIV、P、UL 等元素。.../td> 3、Datalist 标签标记指定预定义选项列表并提供自动完成功能... 15、Audio 标签标签将定义一种声音，该标签可以与三个支持的文件一起使用。它们是 MP3、WAV 和 OGG。然后浏览器将选择它支持的第一个。...，通过本文的学习，你可以轻松的使用HTML原生标签能力，就能够实现以前复杂的第三方UI组件提供的功能。

8303 0

161. 精读《可视化搭建思考 - 富文本搭建》

但用组件代替 js 就有点奇怪了，首先并不是所有 js 逻辑都沉淀在组件里，一定有组件间的联动逻辑是无法通过一个组件 js 完成的，另一方面如果将 js 逻辑寄托在组件代码里，本质上是没有提效的，用源码开发项目与开发搭建平台的组件都是...当然语雀富文本战胜 markdown 的原因有很多，我觉得主要两点是吸收并兼容了 markdown 操作习惯，与支持了更多仅 UI 能做到的拓展能力，对 markdown 形成降维打击。...有了光标后，圈选也非常重要，因为大家编辑文字时有一种很自然的想法是，任何文字圈选后复制，可以粘贴到任何地方，那么所有插入到富文本中的自定义组件也要支持被圈选，被复制。...由于 OneNote 采用绝对定位模拟流式布局的思路，当区块重叠时还可以自动挤压底部区块，因此多区块模式下编辑体验还是相对顺畅的。...可以看出来这是一种结合的尝试，从前端角度来看，富文本本质上是对一个 div 进行 contenteditable 申明，那么一个应用可以整体是 contenteditable 的，也可以局部几个区块是，

1.3K1 0

使用 Vue+Element 开发 Tampermonkey 插件

但就是那种简单的界面，使用jQuery控制页面也需要非常繁复的操作。而由于这次的脚本需要操作表格、完成多选操作甚至弹出模态框，因此如果还用jQuery就太折磨人了。...Webpack基本上是最适合的选择：最常用、功能全面、打包细节可控。其次是界面，我选择了使用Vue.js。部分熟悉我的人可能会说，“呦呦呦，这不React吹吗？几天不见，用Vue啦”。...脚本的操作界面不需要多复杂的逻辑控制，此时双向绑定的优势就体现出来了部分操作类似jQuery，对已有DOM的修改相对来说更方便最后是界面库了，为什么选择Element呢？...对于油猴脚本而言，单元测试很难用简单的方式实现，因为油猴本身根本没有支持油猴API缺少可用的Mock 原始页面的装载困难重重。...但是这样的测试效果是非常有限的，因为所有测试代码只能运作于原始页面的静态“快照”上。对于前端渲染的页面，甚至需要取其渲染结果进行测试，无法在单元测试时将待测试原始页面的获取自动化。

3.1K1 0

Emoji表情还能这样玩？

今天大师兄给大家分享个贼好用的表情包插件: jQuery-emoji 功能支持给textarea或可编辑div加上表情功能，自动识别元素类型。...这里需要个图片来代替下~ 支持自定义表情代码的格式。这套插件中，表情包都是通过别名对应图片来显示的。显示的图片放在/dist/img/目录下(也可以自己在配置中设置目录)。...支持多组表情并提供tab切换。表情包的tab版面也是可以配置的。...注意要先引用jquery和jquery.mCustomScrollbar，再引用该js。因为该插件是需要jquery支持的。.../jquery.emoji.js"> 调用在文本框或可编辑div上初始化emoji $("#content").emoji(options); 参数参数都比较简单

1.9K4 0

Vue实现图片与文字混输

知识在于积累，踩坑越多，你越强前言用多了JQuery，习惯了使用JQuery的API操作DOM，几乎忘记了原生JS对DOM操作，今天在项目中遇到了文字和图片混输的情况，第一个想到的办法是用textarea...先给大家展示下最后实现的效果实现思路 •利用div的contenteditable属性,让div可编辑•绑定ref属性，用于操作输入框元素•图片点击时，获取图片地址，使用require转换图片地址•...="input-panel" ref="msgInputContainer" @keydown.enter.exact="sendMessage($event)" contenteditable.../assets/img/emoji/${path}`); } } 踩坑记录 •直接使用append()方法公司项目一直用JQuery，类似的需求直接append，以为是js提供的方法，...•不过execCommand的兼容性欠佳，如果遇到没反应的情况，是你的浏览器不支持此api。

1.8K3 0

JQuery 入门 - 附案例代码

jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。 //1.$是什么?...最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。 on注册简单事件 // 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。...jquery.color.js animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。使用插件的步骤 //1....使用插件 jquery.lazyload.js 懒加载插件 jquery.ui.js插件 jQueryUI专指由jQuery官方维护的UI方向的插件。...使用jQueryUI功能使用jquery.ui.js手风琴菜单制作jquery插件原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。

14.9K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭