设计步骤 Step 1：从左侧组件库拖出2个形状组件，1个按钮组件。 Step 2：调整两个形状组件为相同宽度的长方形，水平相连放置，并去掉组件接触面的边框线。...Step 3：将2个形状组件设置为不同的颜色。 Step 4：设置交互。 a.点击按钮，将链接点拖至左边形状组件做交互。设置触发方式为点击，交互为调整尺寸并保持高度不变。...设计步骤 Step 1：从左侧组件库中拖出滚动区组件放置工作区。 Step 2：双击滚动区进入滚动区编辑状态，点击滚动条右侧的+号可拉长滚动区，放置更多的内容。...下拉菜单的形式多种多样，但最令设计师最头疼的还是手风琴菜单效果。即使是利用功能强大的Axure，想实现该效果也比较麻烦。但是利用Mockplus的“面板”组件，可以快速地做一个手风琴菜单。...Step 3：交互设置完成，可演示查看手风琴菜单效果。 6.搜索框 无论是Web端还是App原型设计，搜索框都是原型中比较重要的部分。
ALT: Countdown made by Mockplus 步骤一：自定义倒计时样式 启动Mockplus，从左边的组件库中拖出一个圆形组件，双击组件输入数字。...在右侧的属性面板中，将圆形的边框调整为不可见。此处我们将组件内颜色设置为灰色，数字颜色设置为白色。 选中这个组件，同时按下Alt键，将组件复制4份，并输入对应的数字（最后一个设置为空白圆形）。...将原型4的连接点拖到圆形内部，选择“载入时”，“显示/隐藏”。 ? ALT: make countdown with Mockplus 3 在右侧的属性面板，将组件设置为不可见。 ?...其实，不仅仅是倒计时，利用Mockplus还可以实现各种各样的交互效果，比如常用的手风琴菜单，鼠标悬停菜单下拉等等。...除此之外，Mockplus的官方教程中还提供了许多独特的设计方法，并体现了令人惊叹的设计思维。不信你可以去看看“利用滚动区设置悬浮效果”这一章，看完一定很有收获。
另外，如果用户将鼠标悬停在灰色选项上超过一秒钟，可以考虑用一个简短的提示信息来解释该选项为何被禁用。 保留菜单标签/说明 打开下拉菜单时，最好是标明菜单标签或说明。...直接从组件面板中拖出一个下拉列表框，双击编辑文字内容即可。这个办法方便快捷，但是仅适用于简单的罗列文字的下拉菜单。 ? 第二种，下拉选择+弹出面板。...从组件面板中拖出一个下拉选择组件和一个弹出面板，在弹出面板中编辑出下拉菜单的下拉内容，再将弹出面板同下拉选择组件进行拼凑、交互。...用Mockplus还可以做出复杂一些的下拉菜单，如手风琴菜单，详细教程见：http://doc.mockplus.cn/?p=3078 ?
这个方法应该是官方本意上想让我们来自由控制展开状态的，从传递的两个参数来看，一个是row（当前点击的行id），另一个是expended（行展开状态，boolean值），看上去有理有据，但是就是不知道怎么用，因为我始终无法获取到...同样的，toggleRowExpansion方法也支持手风琴效果，点击展开自己的同时关闭原先除自己之外的已打开的展开项，实现手风琴，修改methods→toogleExpand方法： toogleExpand...我们把每行的expand关闭一次，再把对应的行打开，这样就实现了手风琴效果了。...新的问题，当我们点击打开了手风琴，每次都至少有一个是打开状态的，这样很明显是bug了，我们做一下让已打开行的expand合闭。...，关闭除自己之外的已展开项，然后展开或者关闭当前点击的行。
Home (可选地): 当焦点在手风琴的标题，将焦点移到手风琴的第一个标题 End (可选地): 当焦点在手风琴的标题，将焦点移动到手风琴最后一个标题 Control + Page Down (可选地)...: 如果焦点在手风琴面板内，将焦点移动到面板标题上。...如果焦点在手风琴标题上，将焦点移动到前一个手风琴标题。如果焦点在第一个手风琴标题上，不响应 Control + Page Up 或将焦点移动到手风琴的最后一个标题。...Control + Page Up (可选地): 如果焦点在手风琴面板内，将焦点移动到该面板的标题。如果焦点在手风琴标题，将焦点移动到手风琴前一个标题。...也就是说，用户不能与对话框之外的内容进行交互。当前活跃窗口之外的非活跃内容，一般是模糊不清或灰暗的，这样就让这些内容很难被辨别，并且在某些实现中，如果试图与非活跃内容进行交互将导致对话框被关闭。
对拖拽组件位置的约束是由背后的 “松手 DOM” 决定的，也就是拖拽时 element 是实时跟手的，但如果拖拽位置无法放置，就会在松手时修改落地位置，这个落地位置我们叫做 safePosition，即当前组件的安全位置...除此之外，磁贴布局还允许组件按照重力影响向上吸附，因此我们需要做一个 runGravity 函数，把所有组件按照重力作用排列。...container，那么一旦拖入 container 就会在其上方产生 Empty 区域，如果此时 container 立即受重力作用挤了上去，但鼠标还没松手，可能鼠标位置又立即落在了 container 之外...，导致组件触发了拖出。...拖入拖出模块 拖入拖出判断很简单，即一个 element 如果有 x% 进入了 container 就判定为拖入，有 y% 离开了 container 就判定为离开。
在本篇文章里，我们一起学习下如何使用 CSS checkbox hack 技巧制作一个响应式的手风琴组件，这个组件完全基于CSS，没有JavaScript脚本，基于窗口大小进行水平和垂直之间进行切换。...为了让大家更好理解，我将和大家一起一步步的进行完成。 手风琴样式效果： 下图是我们要制作的手风琴效果 本示例需要你具备一些关于flexbox的知识。...：checked 伪类选择器，其意思就是”如果选中了表单（复选框、单选按钮），则应用相关样式规则“ 我们通常隐藏表单控件，然后结合来控制复选框或单选框的选择，制作一些特殊的效果，因此用户无法感知复选框的存在...就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。这就是这个案例的关键所在。 标签里内容，我们用来定义选项卡里对应的内容。...（accessibility） 以下是完成后的CSS代码内容： 4、响应式处理 接下来我们来处理下，在小屏或可视窗口低于 650px 的情况，幸亏我们使用了弹性盒子布局，在这种情况下，我们让手风琴垂直显示
之前一般会使用jQuery-UI。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。...相比之前用jquery-UI等库实现，更加方便（省去计坐标计算等）。...过程对象事件： dragenter：源对象进入过程对象范围内，被拖拽对象进入过程对象时被触发 dragover：源对象在过程对象范围内移动，被拖拽对象在过程对象内移动时触发 dragleave：源对象离开过程对象的范围...，被拖拽对象离开目标对象时触发 目标对象事件： drop：源对象拖放到目标对象中，目标对象完全接受被拖拽对象时触发，可理解为在目标对象内松手时触发。...files属性 返回被拖拽的文件列表，是一个FileList对象，有length属性，可通过下标访问。此功能可用于将文件从用户桌面拖动到浏览器。一般配合FileReader来处理文件。
之前一般会使用jQuery-UI（interactjs更加纯粹）。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。...相比之前用jquery-UI等库实现，更加方便（省去计坐标计算等）。...dropEffect获取当前选定的拖放操作的类型或将操作设置为新类型。它应该始终设置成effectAllowed的可能值之一【none、move、copy、link】。...这是除文本框之外所有元素的默认值。...files属性返回被拖拽的文件列表，是一个FileList对象，有length属性，可通过下标访问。此功能可用于将文件从用户桌面拖动到浏览器。一般配合FileReader来处理文件。
本章将学习jQuery UI中的各种组件。 核心技能部分 9.1 jQuery UI简介 UI即User Interface，指的是用户界面。...上述代码给我们展示的是jQuery中手风琴组件的默认效果，我们还可以通过该组件的相关参数来定制多种多样的手风琴组件。...Ø fillSpace：用来设置手风琴组件的高度与其父容器一致，将覆盖autoHeight，默认值是false。...参数的使用方式有三种： 1．初始化组件时设置参数的值 jQuery对象. accordion ( { 参数名 ：参数值，... ... } ) 2．获得参数的值 jQuery对象. accordion...具体语法如下所示： 语法 jQuery对象.
在本篇文章里，我们将一起学习下如何使用 CSS checkbox hack 技术纯手工撸一个响应式的手风琴组件，这个组件完全基于CSS，没有JavaScript脚本，同时又基于窗口大小进行水平和垂直之间进行样式切换...为了让大家更好理解本案例，我将和大家一起一步步的完成。 手风琴样式效果： 下图是我们要制作的手风琴效果动态图： ? 本示例需要你具备一些关于 flexbox 弹性盒子布局的相关知识。...checked 伪类选择器，其意思就是“如果选中了表单（复选框、单选按钮），则应用相关样式规则” 我们通常隐藏表单控件，然后结合标签来控制复选框或单选框的选择，制作一些特殊的效果，因此用户无法感知复选框表单的存在...就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。这就是这个案例的关键所在，让我们能在选项卡直接进行切换。...4、响应式处理 接下来我们来处理下，在小屏或可视窗口低于 650px 的情况，横向无法完整展示的样式问题。
此外，您还可以设置用户将下载的文件的文件名。... 您可以使用详细信息和摘要语义元素创建一个非常基本但简单的手风琴。 用 details 元素包裹你的手风琴元素，标题使用 summary 元素。...最后，使用 p 段落元素编写手风琴的主要内容。 6、内容可编辑 This is a paragraph.... 您可以通过将 contenteditable 属性设置为 true 来使任何内容可编辑。 不管是 div 还是 p ，它都会变成可编辑的。...如果您不希望用户能够粘贴到密码等字段，您可以在该输入字段上写上 onpaste="return false" 并且用户将无法粘贴到那里。
本例使用最简的jquery-ui来实现autocomplete效果，下载地址为：http://jqueryui.com/download/。 1....基础界面 首先构建一个基础界面，创建一个文本框，并依照jquery-ui的用法进行绑定。 jquery-ui文件--> ...需要注意，由于该过程涉及到用户的不断操作，所以建议将ajax设置为同步方式。...为文本框完成绑定 source: function(request,response){ //从request对象中获得文本框内容
HDFS - Excel 需求： 从Hadoop文件系统读取文件，并将数据输出到Excel 拖出一个Hadoop文件输入组件和Excel输出组件 ?...创建一个Hadoop连接对象 友情提示:需要按照上一篇博客所展示的步骤将Kettle集成Hadoop的环境配置好，这一步才能成功! ? ?...配置HadoopFileInput组件 这一步我们就可以选择已经创建好的连接对象 ? 还需要设置输入文件的路径 ? 记得修改编码格式 ? 预览字段进行查看 ?...准备数据，将数据加载到hive中。 ?...并拖出图示的几个组件 ? ? 配置SQL组件 ? ? 运行 运行完，我们进入到命令行查看结果 ? 6.
昨天调用特殊的Dll 报错：混合模式程序集是针对“v1.1.4322”版的运行时生成的，在没有配置其他信息,无法在 4.0 运行时中加载该程序。...startup> 保存然后重新生成就好啦 生成好后在目录下会出现一个“******.exe.config” 理解就是程序的配置文件 image.png “如果要单独把软件拖出来记得把这个文件也一并拖出哦...当用/ZI 或/Zi 编译C/C++ 程序时或用/debug 编译Visual Basic/C#/JScript .NET 程序时将创建PDB 文件。
很多红极一时的技术都因无法跨过这道坎，最终消失在历史的角落。身处爆发期的边缘计算，也将在今后几年尝试完成迈向主流市场的“惊险一跳”，胜算究竟几何？...在云定义一切的时代，边缘计算更像一个去中心化的魔法师，从物理空间上将计算资源移动到数据创建的位置，从而大幅提高获取数据洞察价值的效率，并在核心IT环境之外实现业务流程和决策智能的即时启用。...散点分布、需求参差是边缘计算的痛点，诸多场景因无法形成规模效应，品尝不到边缘计算的新鲜果实。...他来到近前，发现手风琴经典的竖条纹与按键归为一侧的风格非常简洁，符合工业设计的要求且颇有科技感。后来，EIS800在散热片的设计以及按键、指示灯、Logo的排布上都借鉴了手风琴的特色。...浪潮信息边缘计算产品线高级产品经理刘香男认为，边缘服务器未来几年将持续保持高增长，ICT融合、工业互联网、产业+AI等场景会释放出强劲动力。
如果想要给每一个元素都设置不同的值，需要手动进行遍历jQuery对象。...each方法 遍历jQuery对象集合，为每个匹配的元素执行一个函数 语法： // 参数一表示当前元素在所有匹配元素中的索引号 // 参数二表示当前元素, 在function中this也表示当前元素。...$(selector).each(function(index,element){}); 【案例：不同的透明度.html】 链式编程 链式编程的原理：设置性操作会返回一个jQuery对象，因此可以继续调用...获取操作的时候，无法使用链式编程。 end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。...$.fn.pluginName = function(){} 制作基本的jQuery插件 制作手风琴插件
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。...因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。...end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。...【案例：五角星评分案例.html】 each方法 jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。...使用jQueryUI功能 使用jquery.ui.js手风琴菜单 制作jquery插件 原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。
)表示将document对象转换为jQuery对象。...，包含left和top属性 offset(properties) 利用对象设置元素的位置，必须包含left和top属性 css()方法中传递的参数若是对象，则需要去掉CSS属性中的“-”，将第2个单词的首字母变为大写...prop(properties) 将一个键值对形式的对象设置为所有匹配元素的属性 prop(name, value) 为所有匹配的元素设置一个属性值 prop(name, function) 将函数的返回值作为所有匹配的元素的...4.4 练习作业 手风琴效果 编写网页，设置CSS完成手风琴的结构和样式设置。 为所有图片添加鼠标移入与移出事件。...data:{'id': 2, 'name': 'JS'}, success: function(msg) { alert(msg); } }); $.ajax(); 除此之外
14行中修改数据库信息 打开卡商云官网并登陆账号： http://www.kashangyun.com/ 点击授权管理->授权列表->复制授权码 双击宝塔中网站根目录 ver.json文件，将授权码修改成你自己的...然后在电脑上解压你下载源码，将其中的 kashangyun.sql 文件拖出来 回到宝塔，点击数据库->导入刚才拖出来的文件 点击网站->点一下网站名->点击网站目录：取消勾选放跨站，设置运行目录为...点击保存 这样搭建就完成了，然后你打开网站主页会发现是一堆看不懂的代码 接着往下看 网站配置 首先进入网站后台：http://你的域名/admin/index PS：若未部署SSL,可能会导致网站无法打开...->检查更新，升到最新版本 第一次更新后刷新页面再点检测更新，直到更新到最新版本 PS：切勿多次连需点击更新，不要在更新的时候刷新页面 PS:后果就是你需要重新装网站了 点击主站管理->主站设置，将这里的所有信息都配置一遍才能正常进入网站首页
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
