【JGUI源码：JS菜单动态绑定(8)】的更多相关文章

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 =…

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

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

JGUI源码：JS菜单动态绑定(8)

我们知道Jquery绑定事件后的新添加的对象是不响应事件的,为了解决这个问题,动态添加的对象需要从新绑定,使用一个init方法实现代码如下 //Accordion封装 (function($) { J.Accordion = function($p_selector) { init = function(p_options, p_datas, p_param) { return $p_selector.each(function() { var $accordion = $(this); var…

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源码：实现图标按钮及下拉菜单(16)

效果如下 代码片段如下 <div class="jgui-btn" id="personalbtn" style="float:right;"> <div class="jgui-btn-info"> <img src="./images/head.jpg"></img> <span>麦田守望者</span> <i class=&…

JGUI源码：组件及函数封装方法(7)

以Accordion为例1.在base.js定义一个对象,这样可以和JQuery对象区分开,用户使用组件时比较清晰一点,也可以在这里引用多个库. var JGUI = J = { version : '0.01', $ : window.jQuery }; 2.Accordion.js修改Init,fold,unfold如下,之前全局方法,现在改成下面的写法,里边的selector要换成$(this). /** * Accordion封装 */ J.Accordion = (function($…

JGUI源码：实现简单MVVM单项绑定学习笔记(15)

前面几节都是jquery界面方面的东西,本节研究些数据方面的东西:MVVM. MVVM由三部分组成:Model <=> ViewModel <=> View,当Model数据改变时,通知所有与Model关联的View进行数据更新. 以vuejs一个简单例子实现为例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例&…

JGUI源码：响应式布局简单实现(13)

首先自我检讨下,一直没有认真研究过响应式布局,有个大致概念响应式就是屏幕缩小了就自动换行或者隐藏显示,就先按自己的理解来闭门造车思考实现过程吧. 1.首先把显示区域分成12等分,bootstrap是这样分的 |1|-|2|-|3|...|12| 2.现在定义不同的大小的盒子用来装物品,假如所在盒子为1024px,盒子内两个矩形A,B都是512px,那么800px下,肯定是显示不完全了,那么就要么让B隐藏,要么让B换行显示. 3.假如定义显示区域 1024时使用 lg 大盒子,lg-1~lg-12…

JGUI源码：Accordion折叠到侧边栏实现(6)

折叠和非折叠效果如左右图所示 代码如下 //折叠 $.fn.jAccordionfold = function() { return this.each(function() { var obj = $(this); obj.find('.jgui-accordion-navitem').siblings("dd").slideUp(); obj.find('.jgui-accordion-navitem span').hide(); obj.find('.jgui-accordion…

JGUI源码：DataTable固定列样式（20）

本来感觉这个固定列很容易实现的,一般都是几个table组合实现,真正自己从头做的时候,发现有很多坑,本文只是固定列原理,真正实现datatable的话,代码量比较大的,后续再进行完善. 使用左中右三个datatable实现显示 |left|center|right| left和right是固定列,效果如下 实现原理: (1)左右div使用posion:absolute固定(2)center区域div使用overflow:scroll显示(3)设置line-height,这个属性很重要,不然的话三…

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源码：实现蒙版层显示(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源码：实现日期控件显示(17)

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

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…

JGUI源码：开发中遇到的问题（11）

1.IE8下浏览器下css body边缘要留一个像素,如果不留的话,很有可能看不到最边缘的像素. 2.同一种颜色在深色背景和浅色背景下给人的感觉不一样,在深色背景下,给人感觉特别亮,所以深色背景下的颜色要调整的稍微暗点,才能保持整体色调一致. 颜色尽量使用单一颜色,方便以后在不同行业使用时可以快速替换颜色. 3.如果想使用:before显示下三角的话,需要外层高度有一个额外高度,然后设置三角符号的z-index,同时在IE8下要设置zoom:1 4.IFrame如果设置宽高100%的话,要注意,…

JGUI源码：prefixfree 这个库有时候会引起网页一直加载中（10）

如题,大部分情况下正常,但是chrome频繁刷新时,会出现这个问题,控制台没有异常信息.最终放弃使用引用第三方库prefixfree.min.js…

JGUI源码：Tab组件实现（9）

程序界面效果如下 Tab组件由多个TabItem组成,超出部分隐藏,可以通过左右按钮滑动显示出来 1.封装 // 初始化内容 $(function () { J.JTab($(".jgui-tab")).init(); }); //Tab封装 (function($) { J.JTab = function($p_selector) { //初始化 init = function(p_options, p_datas, p_param) { return $p_selector.eac…

JGUI源码：解决手机端点击出现半透明阴影(4)

下面开始进入正题,问题发现与解决 1.According解决手机浏览器点击出现半透明阴影 手机下点击有白色蒙版,原始效果如下,看起来很不协调 2.解决办法:增加 -webkit-tap-highlight-color:transparent; 看起来正常了…

JGUI源码：Accordion兼容IE8实现(3)

本来不考虑IE8,但是还是有部分客户用的XP,有不代表没有,尽量做一下兼容处理1.before,after,要使用:不能使用:: 2.阻止冒泡 function stopPropagation(e) { e = window.event || e; if (document.all) { //只有ie识别 e.cancelBubble = true; } else { e.stopPropagation(); } } 3.SlideToggle 在IE8下经常会导致一些元素不可见.使用zoom:…

Redrain 通用菜单控件使用方法和说明（附源码和demo）

转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42889709 大概半年前我写过博客说明怎么改造duilib的原代MenuDemo来支持消息发送(地址为:http://blog.csdn.net/zhuhongshu/article/details/38253297),而后在仿酷狗项目里也用到了菜单类,并且菜单类岁仿酷狗一起开源了.但是仿酷狗里面的菜单是专门针对仿酷狗的需求而修改的,所以通用性还不够.考虑到菜单也比较常…

easyui源码翻译1.32--SplitButton（分割按钮）

前言 扩展自$.fn.linkbutton.defaults.用于$.fn.splitbutton.defaults重写默认值对象.下载该插件翻译源码 类似菜单按钮,分割按钮也与linkbutton和菜单有关系.menubutton和splitbutton之间的区别是,splitbutton分为两部分.它只会在鼠标移动到splitbutton按钮右边的时候才会显示出“分割线”. 源码 /** * jQuery EasyUI 1.3.2 * *翻译 qq 1364386878 分割按钮 */ (f…

Python+页面元素高亮源码实例

简单写了一个页面元素高亮的方法,原理就是在python中调用js实现元素高亮,分享一下源码如下: 1.元素高亮源码 Js调用 js = "var q=document.getElementById('" + element + "');q.style.border='3px solid red';" 通过id进行定位,设置3px的红色框 2.调用封装的方法 实现的效果…

vue系列---响应式原理实现及Observer源码解析(一)

_ 阅读目录 一. 什么是响应式? 二:如何侦测数据的变化? 2.1 Object.defineProperty() 侦测对象属性值变化 2.2 如何侦测数组的索引值的变化 2.3 如何监听数组内容的增加或减少? 2.4 使用Proxy来实现数据监听 三. Observer源码解析 回到顶部 一. 什么是响应式? 我们可以这样理解,当一个数据状态发生改变的时候,那么与这个数据状态相关的事务也会发生改变.用我们的前端专业术语来讲,当我们JS中的对象数据发生改变的时候,与JS中对象数据相关联的DOM…

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.com/amazon-site-navigation/ 它提到亚马逊左侧菜单的秘密在于它有一个三角形的缓冲延迟区域. 当鼠标在这个蓝色范围内移动时,会有延迟,所以右侧的二级菜单才不会马上变化. 顺着博客在github找到了这个插件:https://github.com/jayuh/jQuery-menu…

easyui源码翻译1.32--Menu（菜单）

前言 使用$.fn.menu.defaults重写默认值对象.下载该插件翻译源码 菜单组件通常用于快捷菜单.他是构建其他菜单组件的必备基础组件.比如:menubutton和splitbutton.它还可以用于导航和执行命令. 源码 /** * jQuery EasyUI 1.3.2 * * 翻译:qq 1364386878 * *g=this p=g.options */ (function ($) { //初始化 function _init(target) { $(target).appen…

easyui源码翻译1.32--MenuButton（菜单按钮）

前言 扩展自$.fn.linkbutton.defaults.使用$.fn.menubutton.defaults重写默认值对象..下载该插件翻译源码 菜单按钮是下拉菜单的一部分.它伴随着linkbutton和menu组件.在用户点击linkbutton之前菜单是隐藏的,当用户用鼠标点击或移动到linkbutton上面的时候菜单才会显示. 源码 /** * jQuery EasyUI 1.3.2 * *翻译 qq 1364386878 菜单按钮 */ (function ($) { //初始化方…

jQuery实现多级手风琴树形下拉菜单（源码）

前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴在园子里了.效果图片如下:…

JS禁止右键查看源码，禁止复制，复制内容到剪切板

有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 function noMenuOne() { alert('禁止右键菜单!'); return false; } document.oncontextmenu = noMenuOne</script> 第二种方法: <script> //当用户按下鼠标按钮触发 function noMenu2(…

关于HTML、js加密、混淆、源码保护、代码安全，防止解压直接看源码

一直有人问HTML加密混淆怎么做,其实这在业内是早已很多人研究过的课题.假日期间整理一篇文章分享给大家. 我们先理下需求,加密的目的是什么?加密到什么级别?为此我们可以牺牲什么?我们知道这个世界不存在绝对的安全,加密会被破解.混淆会被反混淆.技术小白.开发者.黑客,是完全不同的级别,防范不同级别的人策略都不一样.防范力度越大,投入代价也越大,比如聘请专业的安全公司.除了投入,我们还需要考虑程序的执行性能和用户体验.加密的代码在运行时必须解密,混淆后尤其是混淆HTML后,程序的执行性能会下降.是否…