Add bulletin list.

docs/assets/bulletin/README.md

@@ -0,0 +1,41 @@
+## Bulletin
+
+A jQuery plugin to show bulletin for website. [demo](http://wenzhixin.net.cn/p/bulletin/)
+
+### How to use:
+
+html + css:
+	
+	<link rel="stylesheet" href="bulletin.css" />
+	<div id="bulletin" class="bulletin">
+      <ul>
+        <li><a href="http://wenzhixin.net.cn/p/multiple-select/">Multiple Select - Multiple select is a jQuery plugin to select multiple elements with checkboxes.</a></li>
+        <li><a href="http://wenzhixin.net.cn/p/bootstrap-login/">Bootstrap Login - Login plugin from for bootstrap.</a></li>
+        <li><a href="http://wenzhixin.net.cn/p/bulletin/">Bulletin - A jQuery plugin to show bulletin for website.</a></li>
+      </ul>
+      <div class="close"><a href="javascript:void(0)">×</a></div>
+    </div>
+	
+js:
+	
+	<script type="text/javascript" src="jquery.bulletin.js"></script>
+	<script type="text/javascript">
+		$(function() {
+			$('#bulletin').bulletin();
+		});
+	</script>
+	
+### Options:
+
+	{
+		index: 0,
+		interval: 3000,
+		speed: 1000,
+		direction: 'up' // up or down
+	}
+	
+### Author:
+
+blog: http://wenzhixin.net.cn
+
+email: wenzhixin2010@gmail.com

docs/assets/bulletin/bulletin.css

@@ -0,0 +1,39 @@
+.bulletin {
+	background: none repeat scroll 0 0 #000000;
+	bottom: 0;
+	left: 0;
+	box-shadow: 10px 0 5px #000000;
+	opacity: 0.6;
+	filter: alpha(opacity=60);
+	position: fixed;
+	width: 100%;
+	z-index: 9999;
+}
+.bulletin ul {
+	position: absolute;
+	float: left;
+	margin: 0 0 0 30px;
+	height: 23px;
+	overflow: hidden;
+	left: 0;
+	right: 20px;
+	background: url(bulletin.gif) no-repeat;
+}
+.bulletin li {
+	position: absolute;
+	top: -999em;
+	left: 25px;
+	display: block;
+	white-space: nowrap;
+}
+.bulletin a {
+	height: 23px;
+	line-height: 23px;
+	text-decoration: none;
+	color: #ffffff;
+}
+.bulletin .close {
+	float: right;
+	margin-right: 10px;
+	z-index: 1001;
+}

docs/assets/bulletin/jquery.bulletin.js

@@ -0,0 +1,92 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ * @version 1.0.0
+ * @github https://github.com/wenzhixin/bulletin
+ * @blog http://wenzhixin.net.cn
+ */
+
+(function($) {
+			
+	'use strict';
+
+	function Bulletin($el, options) {
+		this.$el = $el;
+		this.options = options;
+	}
+
+	Bulletin.prototype = {
+		constructor : Bulletin,
+		
+		init: function() {
+			var that = this;
+			this.index = this.options.index;
+			this.$li = this.$el.find('li');
+			this.$li.eq(this.options.index).css('top', 0);
+			if (this.$li.length > 1) {
+				setTimeout(function() {
+					that.scroll();
+				}, this.options.interval);
+			}
+			this.events();
+		},
+		
+		events: function() {
+			var that = this;
+			this.$el.find('.close').on('click', function() {
+				that.$el.slideUp(that.options.speed);
+			});
+		},
+		
+		scroll: function() {
+			var that = this,
+				curIndex = this.index,
+				dir = this.options.direction,
+				speed = this.options.speed,
+				height = this.$li.css('height');
+			this.index = dir === 'down' ? this.index - 1 : this.index + 1;
+			this.index = this.index % this.$li.length;
+			this.$li.eq(curIndex).animate({top: (dir === 'down' ? '' : '-') + height}, speed);
+			this.$li.eq(this.index).css('top', (dir === 'down' ? '-' : '') + height).animate({top: '0'}, speed);
+			setTimeout(function() {
+				that.scroll();
+			}, this.options.interval);
+		}
+	};
+
+	$.fn.bulletin = function() {
+		var option = arguments[0], 
+			args = arguments,
+			
+			value, 
+			allowedMethods = [];
+
+		this.each(function() {
+			var $this = $(this), 
+				data = $this.data('bulletin'), 
+				options = $.extend({}, $.fn.bulletin.defaults, typeof option === 'object' && option);
+
+			if (!data) {
+				data = new Bulletin($this, options);
+				$this.data('bulletin', data);
+			}
+
+			if (typeof option === 'string') {
+				if ($.inArray(option, allowedMethods) < 0) {
+					throw "Unknown method: " + option;
+				}
+				value = data[option](args[1]);
+			} else {
+				data.init();
+			}
+		});
+		
+		return value ? value : this;
+	};
+	
+	$.fn.bulletin.defaults = {
+		index: 0,
+		interval: 3000,
+		speed: 1000,
+		direction: 'up' // up or down
+	};
+})(jQuery);

docs/common.js

@@ -12,6 +12,7 @@ $(function() {
         initScrollspy();
         showGotoTop();
         showBaiduShare();
+        $('#bulletin').bulletin();
     }
 
     function initScrollspy() {

docs/docs.css

@@ -1207,7 +1207,7 @@ h1[id], h2[id] {
 .goto-top {
     cursor: pointer;
     position: fixed;
-    bottom: 2px;
+    bottom: 26px;
     right: 2px;
     width: 48px;
     height: 48px;

docs/documentation.html

@@ -6,6 +6,7 @@
     <meta name="author" content="zhixin">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/bulletin/bulletin.css">
     <link rel="stylesheet" href="../src/bootstrap-table.css">
     <link rel="stylesheet" href="docs.css">
     <!--<link rel="stylesheet" href="//wenzhixin.net.cn/css/fork.css">-->
@@ -149,8 +150,19 @@
     <i class="glyphicon glyphicon-plane"></i>
 </div>
 
+<div id="bulletin" class="bulletin">
+    <ul>
+        <li><a href="http://repos.wenzhixin.net.cn/">My Repositories - Show my repositories list.</a></li>
+        <li><a href="http://wenzhixin.net.cn/p/multiple-select/">Multiple Select - Multiple select is a jQuery plugin to select multiple elements with checkboxes.</a></li>
+        <li><a href="https://github.com/wenzhixin/bootstrap-show-password">Bootstrap Show Password - Show/hide password plugin for bootstrap.</a></li>
+        <li><a href="http://wenzhixin.net.cn/p/bulletin/">Bulletin - A jQuery plugin to show bulletin for website.</a></li>
+    </ul>
+    <div class="close"><a href="javascript:void(0)">×</a></div>
+</div>
+
 <script src="assets/jquery.min.js"></script>
 <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+<script src="assets/bulletin/jquery.bulletin.js"></script>
 <script src="../src/bootstrap-table.js"></script>
 <script src="docs.js"></script>
 <script src="common.js"></script>

docs/examples.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
     <!--<link rel="stylesheet" href="assets/bootstrap2.3/css/bootstrap.min.css">-->
     <!--<link rel="stylesheet" href="assets/bootstrap2.3/css/bootstrap-responsive.min.css">-->
+    <link rel="stylesheet" href="assets/bulletin/bulletin.css">
     <link rel="stylesheet" href="../src/bootstrap-table.css">
     <link rel="stylesheet" href="assets/highlightjs/default.min.css">
     <link rel="stylesheet" href="docs.css">
@@ -19,6 +20,7 @@
 
     <script src="assets/jquery.min.js"></script>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/bulletin/jquery.bulletin.js"></script>
     <!--<script src="assets/bootstrap2.3/js/bootstrap.min.js"></script>-->
     <script src="../docs/examples.js"></script>
 </head>
@@ -994,6 +996,16 @@
     <i class="glyphicon glyphicon-plane"></i>
 </div>
 
+<div id="bulletin" class="bulletin">
+    <ul>
+        <li><a href="http://repos.wenzhixin.net.cn/">My Repositories - Show my repositories list.</a></li>
+        <li><a href="http://wenzhixin.net.cn/p/multiple-select/">Multiple Select - Multiple select is a jQuery plugin to select multiple elements with checkboxes.</a></li>
+        <li><a href="https://github.com/wenzhixin/bootstrap-show-password">Bootstrap Show Password - Show/hide password plugin for bootstrap.</a></li>
+        <li><a href="http://wenzhixin.net.cn/p/bulletin/">Bulletin - A jQuery plugin to show bulletin for website.</a></li>
+    </ul>
+    <div class="close"><a href="javascript:void(0)">×</a></div>
+</div>
+
 <script src="../src/bootstrap-table.js"></script>
 <script src="common.js"></script>
 <script src="//wenzhixin.net.cn/js/analytics.js"></script>

docs/getting-started.html

@@ -6,6 +6,7 @@
     <meta name="author" content="zhixin">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/bulletin/bulletin.css">
     <link rel="stylesheet" href="../src/bootstrap-table.css">
     <link rel="stylesheet" href="docs.css">
     <!--<link rel="stylesheet" href="//wenzhixin.net.cn/css/fork.css">-->
@@ -152,8 +153,19 @@
     <i class="glyphicon glyphicon-plane"></i>
 </div>
 
+<div id="bulletin" class="bulletin">
+    <ul>
+        <li><a href="http://repos.wenzhixin.net.cn/">My Repositories - Show my repositories list.</a></li>
+        <li><a href="http://wenzhixin.net.cn/p/multiple-select/">Multiple Select - Multiple select is a jQuery plugin to select multiple elements with checkboxes.</a></li>
+        <li><a href="https://github.com/wenzhixin/bootstrap-show-password">Bootstrap Show Password - Show/hide password plugin for bootstrap.</a></li>
+        <li><a href="http://wenzhixin.net.cn/p/bulletin/">Bulletin - A jQuery plugin to show bulletin for website.</a></li>
+    </ul>
+    <div class="close"><a href="javascript:void(0)">×</a></div>
+</div>
+
 <script src="assets/jquery.min.js"></script>
 <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+<script src="assets/bulletin/jquery.bulletin.js"></script>
 <script src="../src/bootstrap-table.js"></script>
 <script src="common.js"></script>
 <script src="//wenzhixin.net.cn/js/analytics.js"></script>

docs/index.html

@@ -6,6 +6,7 @@
     <meta name="author" content="zhixin">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/bulletin/bulletin.css">
     <link rel="stylesheet" href="../src/bootstrap-table.css">
     <link rel="stylesheet" href="docs.css">
     <!--<link rel="stylesheet" href="//wenzhixin.net.cn/css/fork.css">-->
@@ -85,8 +86,19 @@
     <i class="glyphicon glyphicon-plane"></i>
 </div>
 
+<div id="bulletin" class="bulletin">
+    <ul>
+        <li><a href="http://repos.wenzhixin.net.cn/">My Repositories - Show my repositories list.</a></li>
+        <li><a href="http://wenzhixin.net.cn/p/multiple-select/">Multiple Select - Multiple select is a jQuery plugin to select multiple elements with checkboxes.</a></li>
+        <li><a href="https://github.com/wenzhixin/bootstrap-show-password">Bootstrap Show Password - Show/hide password plugin for bootstrap.</a></li>
+        <li><a href="http://wenzhixin.net.cn/p/bulletin/">Bulletin - A jQuery plugin to show bulletin for website.</a></li>
+    </ul>
+    <div class="close"><a href="javascript:void(0)">×</a></div>
+</div>
+
 <script src="assets/jquery.min.js"></script>
 <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+<script src="assets/bulletin/jquery.bulletin.js"></script>
 <script src="../src/bootstrap-table.js"></script>
 <script src="common.js"></script>
 <script src="//wenzhixin.net.cn/js/analytics.js"></script>