codecamp

H-ui 概述

1. 引言

老子《道德经》曰:道生一,一生二,二生三,三生万物。

H-ui前端框架将带你从点、线、面、体去剖析前端中的道!

点:html标签、css属性、js语法

线:由HTML+css+js 开发的组件、模块

面:由组件组合起来的页面

体:由多个页面组合起来的网站系统

2.下载

请具备一定的html和css web前端基础。

 下载H-ui v2.2.1

3.目录结构

Lib/	库文件
├── jquery			jQuery类库(v1.9.1)
├── bootstrapSwitch		开关控件
├── Hui-iconfont		阿里图标字体库(H-ui定制 _v1.0.6)
├── icheck			单选框、复选框控件
├── laypage			laypage 翻页插件
├── layer			layer弹出层插件
├── laytpl			JavaScript模板引擎
├── My97DatePicker		日期插件
├── Validform			表单验证插件
├── zepto			zepto库
├── ueditor			百度编辑器
├── Highcharts			图表插件
├── dataTables			表格排序,检索插件
├── WebUploader			百度文件上传组件
├── jquery.SuperSlide		幻灯片组件

├── html5.js			html5插件,让低版本IE支持html5元素
├── DD_belatedPNG_0.0.8a-min.js	解决IE6png透明
├── swfobject.js		Flash插件
├── expressInstall.swf  	检查flash插件
├── stickUp.min.js		让页面元素"固定"位置
├── respond.min.js		让IE兼容media
├── Echo.js			图片延迟加载插件
├── colpick.js			颜色插件
├── handlebars.js		js模版引擎

static/	资源
├── h-ui/	H-ui特有资源
│    ├── css/		样式
│    │    ├── H-ui.reset.css		CSS Reset
│    │    ├── H-ui.css			H-ui基础样式
│    │    ├── H-ui.min.css			H-ui.css 压缩版
│    │    ├── style.css			自己的项目样式
│    ├── images/	图片资源
│    ├── js/
│    │    ├── H-ui.js			H-ui核心脚本

Html5.js

让IE低版本浏览器兼容html5元素。

注意: H-ui将全部采用HTML5的元素,所以为了更好的兼容IE低版本浏览器,请在<head>区优先引用html5.js。

  1. <!--[if lt IE 9]>
  2. <script type="text/javascript" src="Lib/html5.js"></script>
  3. <script type="text/javascript" src="Lib/respond.min.js"></script>
  4. <script type="text/javascript" src="Lib/PIE_IE678.js"></script>
  5. <![endif]-->

DD_belatedPNG_0.0.8a-min.js

解决IE6png透明,请使用注释方式的方式加载,只有IE6的浏览器才会加载,避免增加其他浏览器的资源冗余。

  1. <!--[if IE 6]>
  2. <script type="text/javascript" src="Lib/DD_belatedPNG_0.0.8a-min.js" ></script>
  3. <script>DD_belatedPNG.fix('.pngfix,.icon');</script>
  4. <![endif]-->

经常见有人把这一块写成

  1. <script>DD_belatedPNG.fix('*');</script>

或者

  1. <script>DD_belatedPNG.fix('div,p,h1,h2……');</script>

注意: 不建议使用*通配符或者"div,p,li……"等标签的形式,比较消耗系统资源。

采用大量图片的作为UI的网站设计风格已经过时了,真正优雅的网站用到的图片并不多,在加上现在流行扁平化的设计风格,一个整站用到png 半透明的地方屈指可数,所以只需要在用到png半透明的css类名后面补个pngfix就可以了。或者我们可以采用css Sprites 业界称精灵图,将全站的图片合并到一张图上,统一写到.icon样式中。

jquery.min.js

H-ui的脚本全部基于基于jquery,必须引用jquery.min.js。

H-ui.reset.css

就是我们常用的CSS Reset,许多大网站的CSS文件中也含有CSS Reset内容。

作用:把浏览器提供的默认样式覆盖掉。因为浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览 器的默认样式全部去掉,更准确说就是通过重新定义标签样式。

H-ui.reset在传统的css reset基础上做了调整改进,增加了常用的.clearfix样式(简写.cl),增加了HTML5 的reset。

后面我们的框架,扩展,案例中都会首先引用到H-ui.reset.css文件,或者引用里面的代码。

注意: 如果你直接调用了H-ui.css文件就不要调用H-ui.reset.css文件,避免代码重复。

H-ui.css

H-ui的基础样式,也是核心样式,框架章节重要讲解的内容。

注意: h-ui.min.css是H-ui.css的压缩版本,只用引用一个,请勿全部引用。建议项目发布时引用h-ui.min.css。

剩下的文件都属于扩展文件,可以在实用项目实施过程中灵活调用修改。

后期会不断增加。H-ui的宗旨是:不求多炫,实用为主

H-ui Html书写规范
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

框架

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }