- 浏览: 1466299 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
KISSY kisses bootstrap navbar
- 博客分类:
- framework / lib
看了下 bootstrap 的导航菜单,立刻非常喜欢,注意是浅色的那个:
而不是黑色的那个:
由于浅色的导航css定义在 docs 中,故没有 less 源码文件可以参考,纯看 css 非常混乱,这次就用 less 重新实现了下浅色导航,实现后才发现 bootsrap 对于细节非常重视,其中样式状态非常之多,和之前搞的语法解析的状态有得一比。
html 代码
重新实现后的导航为 KISSY toolbar 组件,html 如下:
<div class="ks-toolbar> <div class="ks-menu-button ks-button"> <div class="ks-menu-button-caption">menu-button</div> <div class="ks-menu-button-dropdown"></div> </div> <div class="ks-button">button</div> <div class="ks-menu-button ks-button"> <div class="ks-menu-button-caption">menu-button2</div> <div class="ks-menu-button-dropdown"></div> </div> </div>
包含下拉菜单的为 menubutton(button 的子类),不包含则为普通的 button 组件.
状态枚举
toolbar
toolbar 有背景色以及边框和阴影样式,可以先定义变量:
@toolbarBackgroundHighlight: #F5F5F5; @toolbarBackground: #eee; @toolbarShadow: inset 0 1px 0 white, 0 1 px 5 px rgba(0, 0, 0, .1);
之后定义 toolbar 样式:
.ks-toolbar { #gradient > .vertical(@toolbarBackgroundHighlight, @toolbarBackground); border: 1px solid @toolbarItemBorderColor; border-radius: 4px; outline: none; .box-shadow(@toolbarShadow); }
注意 :.vertical 表示垂直渐变,最终 toolbar 视觉效果如下:
toolbaritem(button)
普通状态
补齐
即普通的按钮组件,首先按钮组件都有一定的 padding,只有左右边框,并且首按钮没有左边框,右按钮没有右边框,那么首尾按钮要通过 padding 补齐来防止移位:
.ks-toolbar {.ks-button { padding: 11px 12px 11px 12px; }}
.ks-toolbar { .ks-button:first-child { border-left: 0; padding-left: 13px; } .ks-button:last-child { border-right: 0; padding-right: 13px; } }
颜色
普通状态下按钮有两种颜色:
@toolbarItemBorderColor: #e5e5e5; // 右边框颜色 @toolbarItemColor: #08C; // 字体颜色
而左边框则定义为和 toolbar 的渐变的浅色背景一样,从而达到突出分割的效果:
.ks-toolbar { .ks-button color: @toolbarItemColor; border-left: 1px solid @toolbarBackgroundHighlight; border-right: 1px solid @toolbarItemBorderColor; } }
视觉效果:
注意边框旁边的留白.
hover 状态
当鼠标经过时即进入 hover 状态,引入三种颜色:
@toolbarItemHoverColor: #005580; // hover 字体颜色 @toolbarItemHoverBackgroundColor: @toolbarBackground; // hover 背景色 @toolbarItemHoverBorderColor: #ddd; // hover 右边框颜色
视觉效果:
注意左右边框对比.
checked(active) 状态
按钮可以有选中状态,以及 active(鼠标按下) 状态,引入三种颜色:
@toolbarItemCheckedBackgroundColor: #e9e9e9; @toolbarItemCheckedColor: #777; @toolbarItemCheckedShadow: inset 0 3px 5px rgba(0, 0, 0, .05);
同时需要将左边框的留白部分消除,并用padding补齐(左边框的颜色变为和背景一样有点问题),以更好得融入
.ks-button-checked, .ks-button-active { color: @toolbarItemCheckedColor; background-color: @toolbarItemCheckedBackgroundColor; padding-left: 13px; border-left: 0; box-shadow: @toolbarItemCheckedShadow; }
视觉效果:
toolbaritemOpen(menubutton)
此即为带下拉菜单的按钮,由于有独特的下拉箭头而需要设置不同的样式(下拉菜单 menu 部分暂不处理)
普通状态
由于 menubutton 继承自 button 则 button 的状态会自动附加到 menubutton 上面,menubutton仅需考虑下拉箭头颜色,和 toolbaritem 的文字颜色保持一致即可:
@toolbarDropdownBackgroundColor: @toolbarItemColor;
注意这里使用border(详见前同事lizzie总结)来画三角
.ks-menu-button-dropdown { border-top-color: @toolbarDropdownBackgroundColor; }
视觉效果:
注意原本箭头即具备 menubutton 组件的透明效果
hover 状态
按钮部分仍然无需处理,仅处理箭头部分即可:
@toolbarDropdownHoverBackgroundColor: @toolbarItemCheckedColor;
.ks-button-hover .ks-menu-button-dropdown { border-top-color: @toolbarDropdownHoverBackgroundColor; }
注意颜色和按钮选中状态一致,更加突出,视觉效果(注意由于menubutton影响,箭头已恢复透明度):
open 状态
menubutton 没有选中状态,只有当菜单打开时的 open 状态, 在 open 状态又是三个颜色:
@toolbarItemOpenColor: white; // open 文字颜色 @toolbarItemOpenBackgroundColor: #999; // open 背景颜色 @toolbarDropdownOpenBackgroundColor: @toolbarItemOpenColor; // open 箭头颜色
注意箭头颜色仍然和 open 时的文字颜色保持一致。
.ks-menu-button-open { color: @toolbarItemOpenColor; background-color: @toolbarItemOpenBackgroundColor; border-color: @toolbarItemOpenBackgroundColor; } .ks-menu-button-open { .ks-menu-button-dropdown { border-top-color: @toolbarDropdownOpenBackgroundColor; } }
视觉效果(注意由于menubutton,透明度已恢复)
最终 demo:
最终代码
.ks-toolbar { #gradient > .vertical(@toolbarBackgroundHighlight, @toolbarBackground); border: 1px solid @toolbarItemBorderColor; border-radius: 4px; outline: none; .box-shadow(@toolbarShadow); } .ks-toolbar { .ks-button { background: transparent; border: none; text-shadow: none; padding: 11px 12px 11px 12px; color: @toolbarItemColor; margin: 0; border-left: 1px solid @toolbarBackgroundHighlight; border-right: 1px solid @toolbarItemBorderColor; border-radius: 0; background-image: none; .box-shadow(none); } .ks-button:first-child { border-left: 0; padding-left: 13px; } .ks-button:last-child { border-right: 0; padding-right: 13px; } .ks-button-hover { color: @toolbarItemHoverColor; background-color: @toolbarItemHoverBackgroundColor; border-right-color: @toolbarItemHoverBorderColor; } .ks-button-checked, .ks-button-active { color: @toolbarItemCheckedColor; background-color: @toolbarItemCheckedBackgroundColor; padding-left: 13px; border-left: 0; box-shadow: @toolbarItemCheckedShadow; } .ks-menu-button-dropdown { border-top-color: @toolbarDropdownBackgroundColor; } .ks-button-hover .ks-menu-button-dropdown { border-top-color: @toolbarDropdownHoverBackgroundColor; } .ks-menu-button-open { color: @toolbarItemOpenColor; background-color: @toolbarItemOpenBackgroundColor; border-color: @toolbarItemOpenBackgroundColor; } .ks-menu-button-open { .ks-menu-button-dropdown { border-top-color: @toolbarDropdownOpenBackgroundColor; } } }
最好欢迎你的建议!
发表评论
-
模块化高扩展性的前端框架 KISSY
2013-03-14 14:58 8636模块化高扩展性的前端框架 KISSY 注:本文为 2 ... -
构建前端 DSL
2012-10-11 22:10 5375目前在传统的软件开 ... -
promise api 与应用场景
2012-02-07 17:34 7404promise 是 commonjs 社区中提出的异步规范,其 ... -
unified event model
2011-10-14 23:02 1792为了处理原生事件在各 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2856简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2855场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2274分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 7081作为前端开放的基础安全保证,caja 是目前比较合 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2485这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
just another event model
2011-06-08 20:47 2174事件模型也算是客户端兼容性的一个长期问题,早期 jquery ... -
框架 build 系统介绍
2010-07-11 01:29 1664一个复杂的类库通常都包括很多子模块( jquery@git ... -
querySelectorAll 探讨
2010-07-01 22:35 5265随着css selector engine在越来越多的java ... -
再谈 attribute
2010-06-22 11:37 2685@slideshare 原生: ... -
事件机制探讨
2010-06-21 13:54 2247由于浏览器事件机制的不兼容性,譬如最常见的注册事件差异 ... -
利用Attribute重构:业务与UI分离
2010-06-08 16:54 1595很简单的一个应用 通过按钮来限制输入范围 ,这样的话再 ... -
yui3 loader的串行加载特性
2010-06-04 12:30 1818yui3 的沙箱机制可以在 ... -
yui3下的load事件触发
2010-06-01 13:31 3250以前的一些总结:页面l ... -
理解YUI3 extension:Base.create
2010-05-31 03:01 2008YUI3中为了避免不必要的类继承层次,以及摆脱利用原型链模拟的 ... -
google WebFont Loader 源码阅读
2010-05-22 01:04 2791资料: 关于新发 ... -
jquery yui 对比
2010-04-29 09:58 0http://carlos.bueno.org/jq-yui. ...
相关推荐
Kissy 是一个由淘宝开发并开源的JavaScript库,它的设计目标是为Web开发者提供一套全面、强大且易用的UI组件。Kissy 的出现旨在简化Web应用的开发过程,提高开发效率,尤其在构建复杂的前端界面时表现出强大的优势。...
Kissy 是一个强大的Web前端开发框架,源自阿里巴巴集团,旨在简化前端开发流程,提高开发效率。Kissy 1.4.8 版本是这个框架的一个稳定版本,它包含了丰富的功能和优化,使得开发者能够更好地应对复杂的前端项目需求...
【Kissy框架详解】 Kissy 是一个轻量级的JavaScript库,专为前端开发者设计,旨在简化Web开发过程,提高代码质量和效率。这个名为“Kissy 15天学会.zip”的压缩包,很可能是为了帮助初学者在15天内快速掌握Kissy...
Kissy 是一个轻量级的前端JavaScript库,它旨在简化Web开发,提高代码效率和可维护性。这个“Kissy学习教程”压缩包文件包含了深入理解并掌握Kissy的资源,帮助开发者快速上手和应用Kissy到实际项目中。 在学习...
淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。 KISSY ...
KISSY是一款由阿里巴巴集团的前端团队所开发和维护的国产JavaScript框架,它在淘宝网、天猫等阿里旗下的大型电子商务网站中得到了广泛的应用。KISSY框架自2009年10月26日诞生以来,已经经历了近五年的发展,其成熟度...
《淘宝帮派编辑器Kissy Editor 2.0详解》 Kissy Editor 2.0是淘宝帮派推出的一款强大的富文本编辑器,专为提升用户在社区中的内容创作体验而设计。它集成了多种功能,使用户可以方便地创建、编辑和格式化文本,同时...
标题中的“Kissy Suggest”是指Kissy框架中的一个组件,Kissy是一个轻量级的JavaScript库,专注于前端开发,提供了丰富的组件化功能。Suggest组件则是Kissy中用于实现自动提示、补全功能的部分,常见于搜索框或...
"Kissy"是一个专门为Shopify设计的免费主题模板,由个人开发者辛勤工作数晚精心打造,专用于内衣商品的展示。在本文中,我们将深入探讨Shopify平台、主题模板的重要性以及Kissy主题的特点和优势。 首先,让我们了解...
Kissy 是一个由淘宝开发的前端JavaScript库,它旨在简化Web开发,提高代码质量和性能。Kissy 提供了一种模块化的解决方案,使得开发者能够更好地组织和管理他们的代码,同时提供了丰富的组件来支持日常的Web开发任务...
《Kissy Suggest 自动提示实现详解》 在IT领域,自动提示功能是提升用户体验、提高工作效率的重要手段,尤其在编程、搜索等场景下。Kissy Suggest 是一个基于 JavaScript 的开源库,专为实现自动提示功能而设计。...
"修改的Kissy富文本编辑器"是一款基于Kissy框架的增强型文本编辑器,它在原生的Kissy Editor基础上进行了定制和优化,旨在提供更丰富的功能和更好的用户体验。Kissy是一个轻量级的JavaScript库,专注于前端开发,而...
KISSY提供稳定的核心,包括 oo、dom、Event、Anim、Ajax 等;强大且易用的脚本加载器,特有的 loader;丰富的UI组件,包括 Switchable、Overlay、Draggable and Droppable 等。KISSY具备模块化、高扩展性、组件齐全...
《Kissy 文件与 KissyTeam 的前端开发实践》 Kissy 是一个轻量级的 JavaScript 框架,由 KissyTeam 团队开发并维护。这个名为 "kissyteam-kissyteam.github.com-901d2cd.rar" 的压缩包文件,包含了 KissyTeam 在 ...
js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码
kissy-1.4.8.zip,淘宝最新前端开发包
**JS开源编辑器 Kissy Editor** 是一个专为前端开发者设计的轻量级文本编辑器,它具有良好的浏览器兼容性,能适应各种主流浏览器环境,包括Chrome、Firefox、Safari、Opera以及Internet Explorer等。Kissy Editor的...
KISSY 1.4.8,一个淘宝用的类似jQuery的前端框架
淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。
**KISSY Editor** 是一个轻量级且高度可定制的网页编辑器,它专为开发者设计,提供了丰富的API和灵活的插件机制,使得在网页中实现富文本编辑功能变得更加简单。这款编辑器以其小巧的体积、高效的性能以及易用性著称...