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

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源码：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源码：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源码：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源码：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:…

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源码：实现简单进度条(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源码：实现简单MVVM单项绑定学习笔记(15)

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

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源码：响应式布局简单实现(13)

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

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源码：DataTable固定列样式（20）

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

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源码：开发中遇到的问题（11）

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

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

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

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

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

easyui源码翻译1.32--accordion(手风琴)

前言前几天加班比较忙未能及时更新翻译的今天多发布几篇..下载该插件翻译源码 Accordion 分类空间允许用户使用多面板,但在同一时间只会显示一个.每个面板都内建支持展开和折叠功能.点击一个面板的标题将会展开或折叠面板主体.面板内容可以通过指定的'href'属性使用ajax方式读取面板内容.用户可以定义一个被默认选中的面板,如果未指定,那么第一个面板就是默认的源码 /** * jQuery EasyUI 1.3.2 * *翻译:lbq */ (function ($) { //调整大小…

element-ui Collapse 折叠面板源码分析整理笔记（十）

Collapse 折叠面板源码: collapse.vue <template>  <div class="el-collapse" role="tablist" aria-multiselectable="true"> <slot></slot> </div> </template> <script> exp…

读源码 | metisMenu侧边栏插件

————————————————————————————————————————————————————————— 使用方法实现效果引入文件 <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"> // bootstrap样式 <link href="vendor/font-awesome/css/font-awesome.min.css" rel=…

antd源码分析之——折叠面板（collapse）

官方文档 https://ant.design/components/collapse-cn/ 目录一.antd中的collapse 代码目录 1.组件结构图(♦♦♦重要) 2.源码节选:antd/components/collapse/collapse.tsx 3.源码节选:antd/components/collapse/CollapsePanel.tsx 二.RcCollapse 代码目录 1.组件内部属性结构及方法调用关系图(♦♦♦重要) 2.组件应用的设计模式(♦♦♦重要) 3.源码…

转--2014年最新810多套android源码2.46GB免费一次性打包下载

转载自:http://www.eoeandroid.com/thread-497046-1-1.html 感谢该博客主人无私奉献~~ 下面的源码是从今年3月份开始不断整理源码区和其他网站上的安卓例子源码,目前总共有810套左右,根据实现的功能被博主分成了100多个类,总共接近2.5G,还在不断更新.初学者可以快速方便的找到自己想要的例子,大神也可以看一下别人的方法实现.虽然的例子都是博主一个人辛辛苦苦花了很多时间和精力整理的,但是既然这些例子是来自于社区那就让他们免费回归社区吧,(是的!特么的不…

easyui源码翻译1.32--panel(面板)

前言昨天发布了表格datagrid的翻译源码 ,easyui的许多插件有依赖关系比如datagrid 的渲染需要panel.resizable.linkbutton.pagination 今天则翻译面板的源码来看看,面板比较简单,也不依赖其他的插件.面板作为承载其它内容的容器.这是构建其他组件的基础(比如:layout,tabs,accordion等).它还提供了折叠.关闭.最大化.最小化和自定义行为.面板可以很容易地嵌入到web页面的任何位置插件翻译源码下载地址源码 /** *…

2014年最新720多套Android源码2.0GB免费一次性打包下载

之前发过一个帖子,但是那个帖子有点问题我就重新发一个吧,下面的源码是我从今年3月份开始不断整理源码区和其他网站上的android源码,目前总共有720套左右,根据实现的功能被我分成了100多个类,总共2G多,还在不断更新安卓源码.初学者可以快速方便的找到自己想要的例子,大神也可以看一下别人的方法实现.虽然的例子都是我一个人辛辛苦苦花了很多时间和精力整理的,但是既然这些例子是来自于社区那就让他们免费回归社区吧,(是的!特么的不要一分钱!最看不起那些挂羊头卖狗的)你可以在本帖里面按Ctrl+F查找你…

（转）Bootstrap 之 Metronic 模板的学习之路 - （3）源码分析之 body 部分

https://segmentfault.com/a/1190000006697252 body 的组成结构 body 部分包含了 HEADER.CONTAINER.FOOTER,其中 CONTAINER 部分又包含了 SIDEBAR.CONTENT.QUICK SIDEBAR 几个部分.body部分源码折叠后截图如下: Header 页面顶部 Header contains of logo and top menu bar and it used in all pages. 页面顶部(或头部)…

iOS开发之Alamofire源码解析前奏--NSURLSession全家桶

今天博客的主题不是Alamofire, 而是iOS网络编程中经常使用的NSURLSession.如果你想看权威的NSURLSession的东西,那么就得去苹果官方的开发中心去看了,虽然是英文的,但是结合代码理解应该不难.更详细的信息请移步于苹果官方介绍URL Loading System,网上好多iOS网络编程的博客都翻译于此.因为目前iOS开发中,网络请求大部分使用NSURLSession,所以今天的博客我们就以NSURLSession展开.关于之前使用的NSURLConnection在此就不…

Web 开发中很实用的10个效果【附源码下载】

在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记得收藏! 超炫的页面切换动画效果今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 源码下载在线演示美!视差滚动在图片滑块中的应用视差滚动(Parallax Scrolling)已经被广泛应用于网页…

【JGUI源码：Accordion折叠到侧边栏实现(6)】的更多相关文章