归档 2014年5月7日

Bootstrap的JS插件中包含了标签页组件，使用步骤如下：

1. 在页面中添加bootstrap的样式与js引用，例如可以从百度CDN获取：

<script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

2. 添加标签头部，class样式为nav nav-tabs，标签标题设置属性data-toggle=tab。例如：

<ul id="myTab" class="nav nav-tabs">
 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 <li><a href="#profile" data-toggle="tab">Profile</a></li>
 <li class="dropdown"><a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
   <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
   <li><a ...

heroku网页截图服务搭建流程:

基于nodejs与phantomjs可以在heroku上搭建网页截图服务（Screenshot as a Service）

示例页面：http://screenshot.bookshadow.com/

该服务基于github的项目https://github.com/fzaninotto/screenshot-as-a-service的heroku分支版本

部署具体步骤如下：

• 1. git clone https://github.com/GoBoundless/screenshot-as-a-service.git
• 2. cd screenshot-as-a-service
• 3. npm install
• 4. heroku create --stack cedar --buildpack https://github.com/ddollar/heroku-buildpack-multi.git
• 5. 修改config/default.yaml，将path: '/tmp/' 修改为 '/app/tmp/' （heroku的/tmp/目录禁止程序写入，使用该目录直接部署会报错Error: ENOENT）
• 6. heroku config:set PATH=/app/bin:/app/node_modules/bin:/usr/local/bin:/usr/bin:/bin:/app/vendor/phantomjs/bin
• 7. git ...