JGUI源码：实现蒙版层显示(18)

【JGUI源码：实现蒙版层显示(18)】的更多相关文章

JGUI源码：实现蒙版层显示(18)

有的时候需要显示一个蒙版层,蒙版层显示的主要原理是在指定元素比如div上创建一个子元素div,设置absolute.宽高100%.设置z-index置于顶层,设置半透明效果,fadein,fadeout即可.如下一段简单代码即可实现. <body> <div>这是mask界面显示代码</div> <div id="test" style="background-color:#124567;color:white;width:100px…

JGUI源码：从头开始，建一个自己的UI框架（1）

开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQuery实现,以后有时间会再做一套vue版本的.有好的建议欢迎大家留言. 3.自己在开发过程中遇到的问题和心得将会写到博客上,在实现过程中由简单到复杂实现,一些功能前期只考虑功能实现,后期再进行优化. 4.本框架是一个学习型的框架,功能都尽量自己手工敲代码实现,虽然有点造轮子,但是对深入理解Jquery…

JGUI源码：鼠标中键滚动再次优化(5)

//电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel"; $(".jgui-accordion").on(mousewheel, function(event) { var delta = 0; var direction = 0; if (!event) /* For IE. */ event =…

前端Vue 源码分析-逻辑层

Vue 源码分析-逻辑层预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处,但实际上会有连带性的触发,触发watch的input函数的时候,还会触发this.answer对应的依赖处理看看内部是如何处理的: Vue在初始化data的时候,会通过Object.defineProperty重新定义input的set与get访问接口,同时会创建一个记录并且保持其数据对应的依赖…

JGUI源码：Accordion鼠标中键滚动和手机端滑动实现(2)

本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:https://github.com/zhaogaojian/JGUI 效果觉得好的给个star,谢谢! 源码未压缩,请右键查看网页源码,相关文件有accordion.js,accordion.css,index.html 隐藏滚动条可以通过设置margin隐藏滚动条方式实现,css3支持直接隐藏滚动条…

netty源码解解析(4.0)-18 ChannelHandler: codec--编解码框架

编解码框架和一些常用的实现位于io.netty.handler.codec包中. 编解码框架包含两部分:Byte流和特定类型数据之间的编解码,也叫序列化和反序列化.不类型数据之间的转换. 下图是编解码框架的类继承体系: 其中MessageToByteEncoder和ByteToMessageDecoder是实现了序列化和反序列化框架. MessageToMessage是不同类型数据之间转换的框架. 序列化抽象实现: MessageToByteEncoder<I> 序列化是把 I 类型的数据转换…

JGUI源码：实现日期控件显示(17)

本文实现一个日期控件显示,日期控件看起来很复杂,其实原理很简单,大部分情况下我们直接使用别人做得好的日期控件就行,但有时候特殊需求,比如显示提醒之类的,恐怕第三方控件就不好实现了, 为了使程序逻辑看起来简单,切换日期,选择日期等事件处理部分未实现,读者可以自己尝试实现. 1.日期控件分为三个区域:顶部的显示当前日期和选择按钮区域:中间的本月日期显示列表,固定7*6=42个单元格: 底部确定.取消.当前日期选择功能. 2.思路主要是:计算出应该显示的单元格内容,然后替换tbody区域即可. 代码如…

JGUI源码：右键菜单实现(12)

1.要想实现右键菜单,就要先能响应右键函数 $('#down').mousedown(function(e){ if(3 == e.which){ alert('这是右键单击事件'); }else if(1 == e.which){ alert('这是左键单击事件'); } }) 2.通过上面方法,虽然弹出了右键菜单,但是浏览器系统菜单也会出现. $('#down')[0].oncontextmenu = function () { return false; } 3.如果单纯右键函数可以直接用…

JGUI源码：实现简单进度条(19)

程序效果如下实现进度条动画主要有两种方法:(1)使用缓动,(2)使用Jquery Animate,本文使用第二种方法,先实现代码,后续进行控件封装 <style> .jgui-processbar .loading { background-color: #22B581; height: 100%; width:0%; color:white; text-align: center; } </style> </head> <body> <div>…

JGUI源码：Tip实现（14）

tip是当鼠标放到控件上显示的提示文本,下面说下实现思路方法一: 使用hover:before,hover:after组合一个三角符号和一个圆角矩形实现,以右三角为例 .jgui-tip:after { content: attr(data-tip); visibility: hidden; position: absolute; padding: 5px 10px; right: -10px; transform:translateX(100%); bottom: 50%; margin-le…