web中切换详情信息和编辑功能

在web应用中,我们经常会查看某个数据详情,并且能编辑它,在同一个页面同一个区域中,不用再弹窗,具体描述可能不太清楚,请看效果图,这是之前做的一个商品的详情和编辑,现在记录一下:数据的绑定我是使用vue.js绑定的,比较方便,贴部分代码,其他类似: <td class...

2018-07-13 09:55:55

阅读数:23

评论数:0

文本框oninput事件,在中文输入法状态多次触发

如图,在中文输入法状态中,还在检索拼音,这时事件就会触发,这不是我们想要的,xiaoqiu x,xi,xia,xiao....都会触发,这样频繁的请求会给接口造成挺大压力的。我们可以使用js里面防抖动的方式或DOM3的复合事件来解决此问题。回顾一下onchange和input事件:     oni...

2018-04-11 11:16:21

阅读数:881

评论数:0

跨域:The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed

使用Ajax跨域请求资源,Nginx作为代理,出现:The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed 错误。 服务端允许跨域配置: ...

2018-01-17 10:29:08

阅读数:26588

评论数:4

layer弹层遮罩挡住窗体解决

使用代码: 这里面某个按钮触发弹层 如果上面的按钮触发了弹层 layer.open 且content是某个DOM元素 content:$('#dialog') 那么这里弹出层,遮罩会遮住到弹窗导致操作不了。 官网给出的说法是  如果弹层的内容conten...

2017-12-13 21:36:42

阅读数:5337

评论数:3

umeditor简洁富文本使用

一:引入umeditor对应的类库 二:创建对应的编辑器html区域,进行初始化设置等 UM.delEditor("headerTitleTip"); var editor = UM.getEditor(...

2017-08-07 17:46:44

阅读数:1238

评论数:0

textarea根据内容自动增加高度

js处理: function autoTextAreaHeight(o) { o.style.height = o.scrollTop + o.scrollHeight + "px"; } $(function () { ...

2017-07-20 22:55:08

阅读数:3543

评论数:1

Css改变radio样式

结构: 红色 css: .c_radio { height: 35px; line-height: 35px; } .c_radio > input { display: none; } .c_radio label { v...

2017-06-15 13:39:02

阅读数:2107

评论数:0

Css改变checkbox的样式

一个复选框: 带文字的: 复选框的颜色,和对勾的颜色都是可以更改的。 html代码结构: css代码: /*#region checkbox样式 */ span { position: relative; display: block; ...

2017-06-06 13:14:35

阅读数:4951

评论数:0

Css让容器内多个元素垂直居中

通常我们让容器内的元素垂直居中,方法是给容器一个高度,然后设置line-height为容器的高度,这样就垂直居中了。 容器内如果有多个元素,这样就不行了,line-height会把第一个元素后面的元素给挤的看不见了。 这里的方法是,将父容器转换为table: display:tabl...

2017-05-24 08:43:56

阅读数:343

评论数:0

页面遮罩效果

效果: 遮罩效果,就是把页面给遮挡了,让用户无法再点击页面的元素。 原理就是 弄一个遮罩层,在所有元素的最上方,让这个元素铺满屏幕,所以点击实际是点击的这个元素。 利用绝对定位,使元素脱离文档流,z-index属性设置其浮动层的位置,要做这个一个对话框,假设遮罩的z-index是100,...

2016-11-14 14:29:13

阅读数:404

评论数:0

HTTP基础

HTTP协议是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。在Internet上的Web服务器上存放的都是超文本信息,客户机需要通过HTTP协议传输所要访问的超文本信息。HTTP包含命令和传输信息,不仅可用于Web访问,也可以用于其他因特网/内联网应用系统之间的通信,从而实现各类应用资...

2016-11-09 13:29:50

阅读数:136

评论数:0

jQuery操作DOM节点(一)

浏览器中 什么是BOM?是什么DOM? BOM:Browser Object Model 浏览器对象模型,提供一些对浏览器的操作的对象,比如:window对象,window.open,alert.... DOM: Document Object Model 文档对象模型,HTML页面看作一个文档,...

2016-11-04 09:52:54

阅读数:500

评论数:0

jQuery的$.fn和$.extend

$.fn是指jQuery的命名空间,加上fn上的方法及属性,会对每一个jQuery实例有效。 如扩展了$.fn.test = function(){} 则是对jQuery扩展了一个test方法。 那么每个jQuery实例都可以引用这个方法。 $.fn.test=function(){ ...

2016-11-03 16:41:29

阅读数:231

评论数:0

iframe高度设置100%了,并且设置了无滚动条属性,还是出现滚动条

原因:iframe标签和img标签类似,是inline-block标签。 高度写百分比继承的是父层的宽度。 解决办法一般有两种方案: 一种是改变父级样式,如font-size: 0; 或者line-height: 0;  另一路是改变inline-block自身样式,如displa...

2016-09-28 09:27:08

阅读数:1801

评论数:0

jQuery防止动画重复执行

div { position: absolute; right: 0px; background-color: #abc; width: 90px; height: 90px; ...

2016-09-18 09:33:01

阅读数:1764

评论数:0

html5 web客户端数据存储

html5特性-web存储,提供了两种在客户端存储数据的方式,很灵活. web storage |--sessionStorage:数据在同一个会话中可以访问并且会话结束后数据也随之销毁。会话级别存储 |--localStorage:用于数据本地持久化存储,除非主动删除数据,否则不会过期。 ...

2016-08-10 14:57:17

阅读数:288

评论数:0

HTML5技术要点

HTML5的技术组成: 离线功能 HTML5透过JavaScript提供了数种不同的离线储存功能,相对于传统的Cookie而言有更好的弹性以及架构,并且可以储存更多的内容。 WebStorage – 比Cookies更大、更有弹性的的储存 Web SQL Database – 本地端的...

2016-08-10 11:47:02

阅读数:215

评论数:0

EasyUI_Combobox输入文本匹配加载下拉框数据

效果如图: 每次输入数据去匹配数据库数据,加载到下拉框中。 边输入边加载,通常我们想到的就是文本框的onChange事件,不过这里用onchange,可以实现,但bug就太多了。 每次点击文本框,就会触发datagrid的行单击事件,且每次输入保存后也会触发该事件,处理的东西...

2016-08-01 22:08:05

阅读数:4299

评论数:2

网站前端优化:css sprite(Css压缩)

在web系统中,我们的每个按钮都会有图标,当我们加载页面的时候,会把这些图标一个个的请求下载过来。 如图: 这样http的请求很多,请求的资源多,时间长,对系统的性能有一些损耗。 优化:我们只需要请求一次,就可以读取所有的按钮图标,这样减少了http请求, 从而大大的提高页...

2016-08-01 14:00:29

阅读数:303

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭