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文件被加载) —准备:为类的静态变量分配内 ...
随机推荐
- 如何将后台传来的json反序列化为前端具体对象
//jQuery方式 var obj = $.parseJSON(json); .... //eval var obj = eval("("+json+")" ...
- Posix线程编程指南(1) 线程创建与取消
线程创建 1．1 线程与进程 相对进程而言,线程是一个更加接近于执行体的概念,它可以与同进程中的其他线程共享数据,但拥有自己的栈空间,拥有独立的执行序列.在串行程序基础上引入线程和进程是为了提高程序的 ...
- Matlab实现网络拓补图
顶点号 顶点号 权值 1 2 400 1 3 450 2 4 300 2 8 230 2 9 140 3 4 600 4 5 210 4 19 310 5 6 230 5 7 200 6 7 320 ...
- .NET设计模式（10）：装饰模式（Decorator Pattern）（转）
概述 在软件系统中,有时候我们会使用继承来扩展对象的功能,但是由于继承为类型引入的静态特质,使得这种扩展方式缺乏灵活性:并且随着子类的增多(扩展功能的增多),各种子类的组合(扩展功能的组合)会导致更多 ...
- xml string 相互转换
一.使用最原始的javax.xml.parsers,标准的jdk api // 字符串转XMLString xmlStr = /"....../";StringReader sr ...
- spring 两个 properties
A模块和B模块都分别拥有自己的Spring XML配置,并分别拥有自己的配置文件: A模块 A模块的Spring配置文件如下: <?xml version="1.0" enc ...
- Unity--截取屏幕任意区域
原地址:http://blog.csdn.net/tanmengwen/article/details/8501612 void Update () { if(Input.GetKeyDown(Key ...
- hdu 4850 Wow! Such String!（字符串处理，yy）
题目 参考了博客http://blog.csdn.net/u013368721/article/details/37575165 //用visit[26][26][26][26]来判断新家新区的子母河 ...
- DB2对年份的处理Year()
public DataSet GetCustomerAllocListByQC(CustomerAllocQueryDataContract aQC) { StringBuilder sql = ne ...
- BZOJ 1008: [HNOI2008]越狱 快速幂
1008: [HNOI2008]越狱 Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生 ...