什么是自适应布局 CabloyJS提供了一套布局管理器,实现自适应布局 关于自适应布局的概念,强烈建议先阅读以下两篇文章: 自适应布局:pc = mobile + pad 自适应布局:视图尺寸 什么是PC布局 CabloyJS内置了一套Mobile布局和PC布局.其中,PC布局提供了更丰富的布局元素和交互体验. PC布局是由模块a-layoutpc实现的,如果对底层的实现机制感兴趣,可以直接查看模块a-layoutpc的源码,这里重点说明PC布局的风格,以及如何定制,如何进行二次开发 演示 1.…
突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕竟站在前辈肩膀上学习,我整理起来更轻松[哈哈].(然后我再说一些我能想到的处理方式,帮助我们在工作中应对不同的布局结构时,选择性的去找最适合自己页面布局的方法) 说在前面:为了更好的看出来两列结构,截图我都做了蓝线和红线的框选.颜色较深的换成了黄线.总之就是为了让你一眼看出来,哪块和哪块.适合布局萌…
要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html 提供了一个不错的方案,简洁明了. 问题来了,在Knockout Js被用于绑定Table的数据源时候,上文中的JS就不起作用了,具体说就是无法固定列. 解决方案很简单,修改其一条JS代码即可. 原因就在于:使用Knockout…
背景:easyui在做上下布局的时候,上面是数据列表,下面是数据图表.如下图 需要在上下面板右上角加上最大化按钮,以便可以全屏显示.逻辑就是当上面点击最大化时候,隐藏下面,主意:此时需要将下面的div标题设置为空字符,否则后果就是列表中间有一道人员能力统计图标题:当点击恢复按钮的时候,展示下面图表,同时将标题设置为以前的.上图: 注释:1.上面布局最大化按钮显示:2.恢复按钮点击事件:3.最大化按钮点击事件:4.下面布局最大化按钮:5.不显示折叠(必须的) 现在问题完美的解决了:不过花费的时间有…
HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管理系统左侧菜单,右侧内容.​1. [文件] layout_float_bfc.html <!doctype html><html lang="en"><head>    <meta charset="UTF-8">   …
一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset="UTF-8"> <meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' /> <title>YanGo</tit…
主要特点: 所有列轻松实现相同高度 兼容性极高 ------------------------------------------------ 代码 ----------------------------------------------------- <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <…
我们看到手机中的各种APP的花样繁多的下拉刷新是不是有点心动呢,想着自己定制自己的专门的下拉刷新,市场上比如,58同城,京东,天猫,美团等下拉刷新都是在下拉头部执行帧动画,我最近看到一个APP,就是慕课网的Android客户端,平时有时候看这个网站的学习视频,就下了一个,发现它的头部是一个圆形的水波纹效果: 看起来很Cool,正好公司有需求做官网的APP,正好可以用上公司的Logo做一个水波纹的下拉刷新,首先要实现水波纹的效果,通过解压慕课网的客户端,发现它的实现其实也是用帧动画,就是假的水波纹…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ…
表单验证是前端开发过程中常见的一个需求,产品需求.业务逻辑的不同,表单验证的方式方法也有所区别.而最重要的是我们要清楚,表单验证的核心原则是--错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体验. 该插件依赖于jQuery,demo地址:点击 基于以上原则,个人总结出表单验证的通用方法论: 为了使开发思路更加清晰,我将表单验证的过程分为两步:第一步,用户输入完验证当前输入的有效性:第二步,表单提交时验证整个表单.考虑如下布局: <form action=""> &l…