Web 前端

全栈的定义是什么? 如果 前端开发/后端开发/部署/运维 都能hold住就算full stack, 我现在都overflow stack了, 需求/架构/开发/项目管理/运维 都做.  单开发这块, DWBI项目也做, C/S项目也开发, B/S项目也开发, 最没有想到的是最近1年B/S的前端居然也做了不少. 当前流行的前端技术, 大都有些许了解, 但比较熟悉的还是 bootstap + JQuery 这一套. 本文总结一些我认为不错的组件.


==============
组件包
==============
(1) bootstap 是我最熟悉的一个了,  我一般用的是 bootstap 3 + bootswatch.

(2) bootstrap flat ui 这个bootstrap UI 包中, 可以完整代替原版bootstrap UI组件包, 样式比原版bootstrap更炫一些, 不过原版bootstrap+js 扩展组件能满足我目前的需求, 所以暂时还没用过, http://designmodo.github.io/Flat-UI/

(3) LayUI库,  该UI库和Bootstrap类似, 很赞! 包含很多个组件. 我感兴趣的有:日期组件,弹出层组件,树形组件,文件上传组件,富文本编辑器组件, http://www.layui.com/ , 项目在用的有 layer, upload, tree, datepicker 组件


==============
菜单组件
==============
一般的bootstrap navbar都是位于页面顶部, 或者是浏览器的顶部, jquery.bootstrap-autohidingnavbar.js 插件有点意思, 能将导航条隐藏, 我用在了文档内的section 导航, 效果还可以.


==============
日期组件
==============
(1) bootstrap-daterangepicker 组件, 一个组件就能搞定range的设定, 也能搞定单个日期的设定, 也可以带上时间值. 其他datepicker也支持range, 但都是两个datepicker组合体, 本组件不是两个日期组件简单的组合体, 直接就是携程选机票时间的效果.   网址: http://www.daterangepicker.com/,  https://github.com/dangrossman/bootstrap-daterangepicker

(2) bootstrap-datepicker 插件,  不带时刻的picker, https://github.com/uxsolutions/bootstrap-datepicker
demo and code auto generate: https://uxsolutions.github.io/bootstrap-datepicker/
demo: http://www.eyecon.ro/bootstrap-datepicker/

(3) layui 的 laydate 日期组件, 可以输入时间, 可以显示假期, 可以方便设定日期范围 http://www.layui.com/demo/laydate.html

(4) bootstrap-datetimepicker 也是很赞的日期组件, 可以带时刻, 可以方便设定日期范围, 可以inline显示(没有下拉框, 直接平铺的显示) http://eonasdan.github.io/bootstrap-datetimepicker/


==============
选择框组件
==============
(1) multiple-select 也是一个下拉框组件, 功能比bootstrap-select更强大, 视觉效果不如bootstrap-select,   http://wenzhixin.net.cn/p/multiple-select/docs/#multiple-select

(2) bootstrap-select 是一个很赞的下拉框组件, 能多选, 能显示层级, 输入和自动过滤, 样式很漂亮 https://github.com/silviomoreto/bootstrap-select


==============
checkbox/radiobutton组件
==============
(1) awesome-bootstrap-checkbox , 是更加轻量级的checkbox/radiobutton组件, 只需要加载css, 无javascript. 样式和传统的checkbox/radiobutton一样, 但 视觉效果更佳. https://github.com/flatlogic/awesome-bootstrap-checkbox

(2) bootstrap-switch 都是很不错的checkbox/radiobutton的组件, 样式和手机上的checkbox一样. http://www.bootstrap-switch.org/examples.html


==============
modal 组件
==============
(1) 使用bootstrap的自带的modal组件, 要控制dialog的高度和宽度不太容易. bootstrap-modal 插件能解决这些问题. http://jschr.github.io/bootstrap-modal/

(2) layui的layer组件, 即支持model窗体,  http://layer.layui.com/

 

==============
弹出提示组件
==============
(1) sweetalert组件, 漂亮的alert组件, https://github.com/t4t5/sweetalert

(2) layui的layer组件, 即可以展现tips式的提示, 也展现进度spin, 也可展现弹出框,  http://layer.layui.com/

(3) bootbox 组件, 貌似该组件和bootstrap-modal 有冲突, http://bootboxjs.com/



==============
进度提示组件
==============
(1) spin.js.org，一个可视化的进度条代码工具，很赞.

(2) layui的layer组件, 即可以展现tips式的提示, 也展现进度spin, 也可展现弹出框,  http://layer.layui.com/
 

==============
文件上传组件
==============
layui 的upload组件, 我认为是最好的了, 没用flash, 同时样式也可以调的, http://www.layui.com/doc/modules/upload.html
 

==============
grid 组件
==============
(1) jqgrid 组件, 企业应用推荐使用, License 友好

(2) wenzhixin的 bootstrap table 是bootstrap 下最强大的table插件, 没有之一, 支持排序和分页, cell还可以是radio/checkbox等形态. http://bootstrap-table.wenzhixin.net.cn/ , 企业应用我推荐使用jqgrid, 互联网行业或栏位不多的table, 推荐用we zhixin的 bootstrap table
 
(3)easyui grid组件, lincese不友好, 行数超过100条效率就变得很差, 早期的项目在用, 现在已经全面用jqgrid替换了


==============
tree  组件
==============
(1) 我使用 LayUI 的 tree 组件, http://www.layui.com/  

 
==============
Chart组件
==============
百度 ECharts, 功能强大, 完全免费.   http://echarts.baidu.com/
   

==============
graph 组件
==============
基于d3.js的dagre-d3,  dagre-d3主页 https://github.com/cpettitt/dagre-d3. airflow项目也用它显示 pipeline 的flow图

===========================
Bootstrap Grid布局
===========================
之前经常使用 table 进行 html component的布局, table 能比较精确, 而且table里面还可嵌套 table, 能完成复杂界面的布局.
其实并不推荐使用table进行界面布局, 详细讨论见SO问答, http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html
 ,Bootstrap 也是follow 同样的规则, 不使用table进行布局, table回归到原始的用途, 用来显示数据表格. 布局更多是使用 div, 以及配合 container/row/grid和span 样式做布局.

---------------------------
顶层row
---------------------------
1. row必须包含在 .container (固定宽度) 或 .container-fluid(100% 宽度)中.
2. 你的内容应当放置于"列(column)"内，并且，只有"列(column)"可以作为行(row)"的直接子元素。
3. 如果row下列(column)宽度总和大于12, 多余的列所在的元素将被作为一个整体另起一行排列

<div class="container-fluid">
  <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
  </div>
</div>

---------------------------
panel里的row
---------------------------
宽度为col-md-4 的panel, 在该panel中再嵌套一个row, 注意row下的span总和仍需要等于12, 而不是容器的宽度4.
<div class="container">
  <div class="col-md-4">
    <!--panel-->
    <div class="panel panel-default">
     <div class="panel-heading">Title</div>
     <div class="panel-body">
        <div class="row">
            <div class="col-md-6">col1</div><div class="col-md-6">col2</div>
        </div>
        <div class="row">
            <div class="col-md-6">col1</div><div class="col-md-6">col2</div>
        </div>
        <div class="row">
            <div class="col-md-6">col1</div><div class="col-md-6">col2</div>
        </div>
     </div>
    </div>
  </div>
</div>

 

---------------------------
如何解决垂直对齐问题呢?
---------------------------
经常会碰到一行有2个panel, 这个两个panel高度不一致, 界面很难看. 这时需要做垂直对齐.
在高度小的panel中加<br/>肯定不是一个好方法, 最终也不一定正好能对齐.  我的方法是, 加高度很小的空行, 直接加空row 的话, 空row的高度是0, 所以还需要再加一些margin-top css指令, 下面是增加10个px的空行例子.

<html>
<head>
<style type="text/css">
/* enable word wrap in jqgrid header */
th.ui-th-column div {
    white-space: normal  ;
    height: auto  ;
    padding: 2px;
}

.top-buffer10 { margin-top:10px; }
.top-buffer13 { margin-top:13px; }
</style>
</head>
<body>
 <div class="container">
  <div class="row  top-buffer10"></div>
 </div>
</body>
</html>



==============
开发工具和文档资源
==============
(1) 还在找javascript的editor吗? 我使用firefox developer edition 版, https://developer.mozilla.org/en-US/docs/Tools , 安装完, F12进入dev tool, 在设置中, 开启Scratchpad, Scratchpad就是一个很好的js editor, 并且可以run.  但要说网页开发调试, 还得是chrome, 在公司我的chrome是V4, 但比最新版的firefox还是强一些, 网页报错提示更准确, 定位也最准.

(2) bootstrap3 的IE8+兼容经验小结 hustlzp.com/post/2014/01/ie8-compatibility, 我参考的是 apache spark 站点做的IE兼容性.

(3) bootstrap button代码生成器 http://www.tutorialrepublic.com/twitter-bootstrap-button-generator.php , 另外tutorialrepublic上有很多bootstrap示例讲的也很好

(4) http://v3.bootcss.com/getting-started/ , bootstrap 中文网真不错, 有JQuery 最新版1.9的 API, http://jquery.bootcss.com/

(5) 九个 console 命令，让 js 调试更简单 , http://www.oschina.net/news/76366/9-console , http://www.cnblogs.com/zhongxinWang/p/4121111.html