重构jquery图片切换插件ntabs

重构了公司产品中使用的tabs插件,添加了版本控制功能。github: https://github.com/thinkjs/ntabs

截图预览:
1.

2.

3.

巧用ie条件注释解决浏览兼容问题

在做web开发的时候,最头疼的就是处理各种浏览器兼容。尤其是ie低版本的兼容。于是各种 css hack层出不穷。类似 _ * \9 \0一类的,功能是实现的,却让本来写得很整齐的 css 代码变得乱糟糟的。其实用ie的条件注释就可以很简单的解决处理这些问题。

示例:

<!DOCTYPE html>
<html>
  <!--[if lt IE 7]><html class="ie6"><![endif]-->
  <head>
    <meta charset="utf-8">
    <title>css hack</title>
    <style>
      .test {height: 40px; background: blue;}
      .ie6 .test {background: red;}
    </style>
  </head>
  <body>
    <p class="test"></p>
  </body>
</html>

继续阅读

ie9中border-collapse至box-shadow无法显示的bug

前几天维护公司项目,给一个弹出层添加box-shadow效果,在ie9中效果无法显示,搜索出的结果多为更改doctype声明。页面本身使用html5声明,不存在冲突,调试了半天找出原因,弹出层外框为table默认添加了border-collapse: collapse的样式,因为这个样式导致box-shadow无法生效,修改为border-collapse: separate后解决。

示例代码:

<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <table style="border-collapse: collapse">
      <tr>
        <td>
          <div style="box-shadow:0 0 50px rgba(0, 0, 0, 0.5); width: 200px; height: 200px; border: 1px solid #CCC;"> </div>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>
          <div style="box-shadow:0 0 50px rgba(0, 0, 0, 0.5); width: 200px; height: 200px; border: 1px solid #CCC;"> </div>
        </td>
      </tr>
    </table>
  </body>
</html>

 

[锋利web前端开发]使用vim插件autocommand进行整合开发

锋利web前端为一个系列文章,分享利用python、vimscript等语言,整合haml、sass、coffee等实现快速前端开发。

可以到 [锋利web前端开发]索引贴 查看当前系列的所有文章

本篇主要讲解 使用vim插件autocommand进行整合开发

更新:
2016/11/26:更新插件地址到 https://github.com/lccf/autocommand

准备工作

下载vim、git、python等软件

gvim下载地址 ftp://ftp.vim.org/pub/vim/pc/gvim73_46.exe 鉴于国内网络情况,本人推荐到 http://www.xiazaiba.com/html/3347.html 下载
git下载地址 http://code.google.com/p/msysgit/downloads/list 我选择的是 Git-1.7.11-preview20120704.exe 这个安装包。

继续阅读

[锋利web前端开发]索引贴

锋利web前端为一个系列文章,分享利用python、vimscript等语言,整合haml、sass、coffee等实现快速前端开发。

  1. haml/sass/coffee的安装(win平台)
  2. 使用vim插件autocommand进行整合开发
  3. sass小技巧extend和include组合运用
  4. sass小技巧图片版本号和绝对路径引用
  5. vim用autocommand插件编译coffee

[锋利web前端开发]haml/sass/coffee的安装(win平台)

锋利web前端为一个系列文章,分享利用python、vimscript等语言,整合haml、sass、coffee等实现快速前端开发。

可以到 [锋利web前端开发]索引贴 查看当前系列的所有文章

本篇主要讲解 haml/sass/coffee 在windows平台的安装

准备工作

下载ruby、devkit、nodejs等软件
ruby、devkit 等可在 http://rubyinstaller.org/downloads/ 下载鉴于国内网络情况此网址可以无法打开。附上备选方案
ruby http://rubyforge.org/frs/?group_id=167
devkit https://github.com/oneclick/rubyinstaller/downloads
也可上 http://ruby.taobao.org 上面下载。

继续阅读