Bootstrap plugin编写
滚动demo：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="lib/jquery.js"></script>
<style>
*{margin: 0; padding: 0;}
span{display: block;}
#container{height: 71px; overflow: hidden;}
</style>
</head>
<body>
<span id="container" data-toggle>
<ul class="box" data-target>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</span> <script> ;(function ($) {
'use strict'; var Roll = function (element, options) {
this.element = $(element);
this.defaults = $.extend({}, Roll.defaults, options);
this.target = this.element.find('[data-target]');
this.cloneTarget = this.target.clone(true);
this.element.append(this.cloneTarget);
this.init();
} Roll.defaults = {
timer: null,
speed: 10,
time: 25
} Roll.prototype.init = function () {
var that = this;
$(document).on('mouseenter', '[data-target] li', $.proxy(this.enter, this));
$(document).on('mouseleave', '[data-target] li', $.proxy(this.leave, this)); this.defaults.timer = setInterval(function () {
that.rolling();
}, this.defaults.time);
} Roll.prototype.enter = function (e) {
var $this = $(e.target);
clearInterval(this.defaults.timer);
$this.css({'backgroundColor': 'pink', 'color': 'white'});
} Roll.prototype.leave = function (e) {
var $this = $(e.target),
that = this;
this.defaults.timer = setInterval(function () {
that.rolling();
}, this.defaults.time);
$this.css({'backgroundColor': 'white', 'color': 'black'});
} Roll.prototype.rolling = function () {
if (this.element.scrollTop() === this.cloneTarget.height()) {
this.defaults.speed = 0
this.element.scrollTop(this.defaults.speed);
} else {
this.defaults.speed++;
this.element.scrollTop(this.defaults.speed);
};
} var old = $.fn.roll; $.fn.roll = function (options) {
return this.each(function () {
var $this = $(this); var data = $this.data('bui.roll');
if (!data) {
data = $this.data('bui.roll', (data = new Roll(this, options)))
};
})
} $.fn.roll.Constructor = Roll; $.fn.roll.noConflict = function () {
$.fn.roll = old;
return this;
} }(jQuery));
$("#container").roll({time: 20}); </script>
</body>
</html>
日期选择器：
;(function ($) {
'use strict';
var wisdomRoot = '.wisdom-quan-date';
var Digit = function (element) {
this.$element = $(element);
this.dropYearWrap = this.$element.find('.wisdom-digit-drop-year');
this.dropMonthWrap = this.$element.find('.wisdom-digit-drop-month');
this.dropYearContent = this.$element.find('.wisdom-digit-drop-year ul');
this.dropMonthContent = this.$element.find('.wisdom-digit-drop-month ul');
this.yearDigit = this.$element.find('.year-digit-content');
this.yearI = this.$element.find('.year-digit-i');
this.monthDigit = this.$element.find('.month-digit-content');
this.monthI = this.$element.find('.month-digit-i');
this.wisdomBtn = $('.wisdom-btn input[type="button"]');
this.init();
}
Digit.prototype.setUpNum = function (year, month, offset) {
window.maxDateYear = year;
window.minDateMonth = month + offset - 12;
}
Digit.prototype.init = function () {
var dateAll = new Date(),
dateYear = dateAll.getFullYear(),
dateMonth = dateAll.getMonth() + 1,
that = this,
path;
window.dateYear = dateYear;
window.dateMonth = dateMonth;
this.dropYearWrap.hide();
this.dropMonthWrap.hide();
this.get2Num((+this.yearDigit.text()), (+this.monthDigit.text()));
this.setUpNum(dateYear, dateMonth, 9);
window.initYear = (+this.yearDigit.text());
if (dateMonth + 9 < 12) {
this.dropYearContent.html(this.getYear(dateYear, dateMonth, 0));
this.dropMonthContent.html(this.getMonth((+this.yearDigit.text()), (+this.monthDigit.text())));
} else {
this.dropYearContent.html(this.getYear(dateYear, dateMonth, 1));
this.dropMonthContent.html(this.getMonth((+this.yearDigit.text()), (+this.monthDigit.text())));
}
this.yearDigit.bind('click', $.proxy(this.yearToggle, this));
this.yearI.bind('click', $.proxy(this.yearToggle, this));
this.monthDigit.bind('click', $.proxy(this.monthToggle, this));
this.monthI.bind('click', $.proxy(this.monthToggle, this));
path = '' + this.yearDigit.text() + this.monthDigit.text();
this.wisdomBtn.bind('click', function () {
window.open('/community/club' + ((path ? path : false) || ('' + dateYear + (dateYear < '2009' ? '00' : dateMonth))), '_blank');
});
$('.wisdom-ask').bind('click.digit-other-event', function (event) {
event.stopPropagation();
var $this = $(event.target);
if (!/(month-digit-i)|(year-digit-i)|(year-digit-content)|(month-digit-content)/.test($this.attr('class'))) {
that.dropYearWrap.hide();
that.dropMonthWrap.hide();
}
});
var yearLi = this.dropYearContent.find('li'),
monthLi = this.dropMonthContent.find('li');
var flag = false;
yearLi.bind('click',$.proxy(function (e) {
var $this = $(e.target),
txt = $this.text(),
txt2 = that.monthDigit.text();
path = '' + txt + txt2;
$this.addClass('curren').siblings().removeClass('curren');
that.yearDigit.html(txt);
that.get2Num(txt, txt2)
if (((+txt) === window.maxDateYear) && (flag=== true)) {
this.dropMonthContent.html(this.getMonth(dateYear, (+that.monthDigit.text()), 1, 12));
this.dropMonthContent.find('li').click( function (e) {
var $this = $(e.target),
txt = $this.text(),
txt2 = that.yearDigit.text();
path = '' + txt2 + txt;
$this.addClass('curren').siblings().removeClass('curren');
that.monthDigit.html(txt);
that.get2Num(txt2, txt);
that.dropMonthWrap.hide();
});
} else if ((+txt > window.maxDateYear)){
flag = true;
this.dropMonthContent.html(this.getMonth(dateYear, (+that.monthDigit.text()), 1, Math.abs(window.minDateMonth)));
this.dropMonthContent.find('li').click( function (e) {
var $this = $(e.target),
txt = $this.text(),
txt2 = that.yearDigit.text();
path = '' + txt2 + txt;
$this.addClass('curren').siblings().removeClass('curren');
that.monthDigit.html(txt);
that.get2Num(txt2, txt);
that.dropMonthWrap.hide();
})
} else if (((+txt) === window.maxDateYear) && (flag === false)) {
this.dropMonthContent.html(this.getMonth(dateYear, (+that.monthDigit.text()), 1, (12 - Math.abs(window.minDateMonth))));
this.dropMonthContent.find('li').click( function (e) {
var $this = $(e.target),
txt = $this.text(),
txt2 = that.yearDigit.text();
path = '' + txt2 + txt;
$this.addClass('curren').siblings().removeClass('curren');
that.monthDigit.html(txt);
that.get2Num(txt2, txt);
that.dropMonthWrap.hide();
});
} else {
this.dropMonthContent.html(this.getMonth(dateYear, (+that.monthDigit.text())));
this.dropMonthContent.find('li').click( function (e) {
var $this = $(e.target),
txt = $this.text(),
txt2 = that.yearDigit.text();
path = '' + txt2 + txt;
$this.addClass('curren').siblings().removeClass('curren');
that.monthDigit.html(txt);
that.get2Num(txt2, txt);
that.dropMonthWrap.hide();
})
}
that.dropYearWrap.hide();
}, this));
monthLi.bind('click', function (e) {
var $this = $(e.target),
txt = $this.text(),
txt2 = that.yearDigit.text();
path = '' + txt2 + txt;
$this.addClass('curren').siblings().removeClass('curren');
that.monthDigit.html(txt);
that.get2Num(txt2, txt);
that.dropMonthWrap.hide();
});
}
Digit.prototype.yearToggle = function () {
if (this.dropYearWrap.css('display') === 'none') {
this.dropYearWrap.show();
} else {
this.dropYearWrap.hide();
}
}
Digit.prototype.monthToggle = function () {
if (this.dropMonthWrap.css('display') === 'none') {
this.dropMonthWrap.show();
} else {
this.dropMonthWrap.hide();
}
}
Digit.prototype.get2Num = function (year, month) {
var month = year < '2009' ? '00' : month;
$.ajax({
url: '/ask/ask_ajax.php',
type: 'get',
dataType: 'json',
data: {
action: 'get_birthclub_info',
year: year,
month: +month
},
success: function (resp) {
if (resp.status === 'success') {
var user_count;
if (resp.data === null) {
$('.wisdom-count strong').html(0);
return;
}
user_count = resp.data.user_count;
if (user_count) {
$('.wisdom-count strong').html(user_count);
}
}
}
});
}
Digit.prototype.toDouble = function (num) {
if (num < 10) {
return '0' + num;
} else {
return '' + num;
}
}
Digit.prototype.getYear = function (current, dateMonth, start, end) {
var start = start || 0,
end = end || 6,
totalYearNum = start + end,
i = 1,
tempYear = [],
tmpl = current,
current = current - end;
for (; i <= totalYearNum; i ++) {
(function (num) {
if ((num + current) === window.initYear) {
tempYear.unshift('<li class="curren">' + (current + num) + '</li>');
} else {
tempYear.unshift('<li>' + (current + num) + '</li>');
}
})(i);
}
return tempYear.join('')
}
Digit.prototype.getMonth = function (dateYear, current, start, end) {
var start = start || 1,
end = end || 12,
i = 1,
tempMonth = [],
that = this;
for (; i <= end; i ++) {
(function (num) {
if (num === current) {
tempMonth.unshift('<li class="curren">' + that.toDouble(num) + '</li>')
} else {
tempMonth.unshift('<li>' + that.toDouble(num) + '</li>')
}
})(i);
}
return tempMonth.join('');
}
var old = $.fn.digit;
$.fn.digit = function (option) {
return this.each(function () {
var $this = $(this),
data = $this.data('bui.digit');
if (!data) {
data = $this.data('bui.digit', (data = new Digit(this)));
}
if (typeof option === 'string') {
data[option].call($this);
}
})
}
$.fn.digit.Constructor = Digit;
$.fn.digit.noConflict = function () {
$.fn.digit = old;
return this;
}
$(document).on('mouseenter.bui.digit.data-api', wisdomRoot, Digit.prototype.setUp);
}(jQuery));
bootstrap提供了很优美的插件写法， 可以拿来学习练手
Bootstrap plugin编写的更多相关文章
- Bootstrap——Jumbotron编写
<div class="jumbotron"> <h1>Navbar example</h1> <p>T ...
- lua 5.3最简单plugin编写
#include <windows.h> #include "lauxlib.h" /* Pop-up a Windows message box with your ...
- HearthBuddy Plugin编写遇到的问题
错误1 赋值问题 貌似编译器版本有点低,无法识别C#的高级语法糖 属性的初始值,必须是public bool IsEnabled { get{return true;} } 不能写成public bo ...
- 35 个必须有的Bootstrap工具和生成器
Bootstraptor If you think that bootstrap templates are not enough for you, you should go with bootst ...
- AS 自定义 Gradle plugin 插件 案例 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- （转）Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分
https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...
- 【Bootstrap】一个PC、平板、手机同一时候使用并且美观的登陆页面
Bootstrap如同前台框架,它已经布置好不少的CSS.前端开发的使用须要则直接调用就可以.其站点的网址就是http://www.bootcss.com.使用Bootstrap能降低前端开发时候在C ...
- FastAdmin 基本知识流程一栏
fastadmin进阶 安装:出现登陆页无法显示:可能是php的gd2扩展未开启 FastAdmin 在 Nginx 中的配置 用的是AdminLTE后台模板require.js.less.Bow ...
- java JVM
1.ClassLoader(类加载器) 1.加载:查找并加载类的二进制数据 2.连接 —验证:确保被加载的类的正确性(防止不是通过java命令生成的class文件被加载) —准备:为类的静态变量分配内 ...
随机推荐
- apache与tomcat负载集群的3种方法
花了两天时间学习apache与tomcat的集成方法,现在把学习成果记录下来. apache与tomcat负载集群集成方法有3种jk.jk_proxy.http_proxy 本次集成使用的软件版本: ...
- Codeforces Round #352 (Div. 2) C. Recycling Bottles 暴力+贪心
题目链接: http://codeforces.com/contest/672/problem/C 题意: 公园里有两个人一个垃圾桶和n个瓶子,现在这两个人需要把所有的瓶子扔进垃圾桶,给出人,垃圾桶, ...
- mac上安装port
今天和大家分享下 在mac os x 上安装port 本人在 OS X El Capitan 版本的操作系统上进行安装并测试. --------------------------------- 第 ...
- BZOJ 3143 HNOI2013 游走 高斯消元 期望
这道题是我第一次使用高斯消元解决期望类的问题,首发A了,感觉爽爽的.... 不过笔者在做完后发现了一些问题,在原文的后面进行了说明. 中文题目,就不翻大意了,直接给原题: 一个无向连通图,顶点从1编号 ...
- max_flow(Ford-Fulkerson) 分类： ACM TYPE 2014-09-02 01:50 110人阅读 评论(0) 收藏
#include <cstdio> #include <iostream> #include <cstring> #include<queue> usi ...
- frequentism-and-bayesianism-chs
frequentism-and-bayesianism-chs 频率主义和贝叶斯主义——一个实用的介绍 此notebook最初出现在博客Pythonic Perambulations的文章.BSD l ...
- Sublime搭建nodejs环境(windows)
1.下载nodejs,并安装ok后,配置好环境变量. 2.下载sublime text3 3.在package install 包中新增node插件(或者直接去SublimeText-Nodejs插件 ...
- 偏序集的Dilworth定理
定理1 令(X,≤)是一个有限偏序集,并令r是其最大链的大小.则X可以被划分成r个但不能再少的反链.其对偶定理称为Dilworth定理:定理2 令(X,≤)是一个有限偏序集,并令m是反链的最大的大小. ...
- mybatis sql注入安全
1.mybatis语句 SELECT * FROM console_operator WHERE login_name=#{loginName} AND login_pwd=#{loginPwd} 2 ...
- 小圣求职记A：腾讯篇
本人普通985高校计算机专业研究生一枚,从9月12号开始正式找工作,一个月过去了,参加了能参加的各个互联网公司的宣讲.笔试.面试,现用两篇随笔分享所见所闻.随笔A将以腾讯为例详细展示整个过程,随笔B将 ...