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文件被加载) —准备:为类的静态变量分配内 ...
随机推荐
- android开发 实现同时显示png/jpg 等bitmap图片还可以显示gif图片，有效防止OOM
本来使用第三方jar包 GifView.jar 发现使用的时候不能显示png图片,而且多次setgifimage的时候还会OOM: 现在使用了一个新的第三方,demo是别人的, 下载链接:http: ...
- MySQL高可用读写分离方案预研
目前公司有需求做MySQL高可用读写分离,网上搜集了不少方案,都不尽人意,下面是我结合现有组件拼凑的实现方案,亲测已满足要求,希望各位多提建议 :) 一. 网上方案整理(搜集地址不详...) 1 ...
- vmware workstation 10.0
2013.9.3 vmware workstation 10.0 build 1295980新增功能– 可以将windows 8.1物理pc转变为虚拟机:unity模式增强,与windows 8.1 ...
- JSP页面批量选择&全选操作&选择回显
效果如下: js验证部分: 页面body部分: 附:控制器Controller中验证批量选择条件回显:
- [poj 1741]Tree 点分治
题意 求树上距离不超过k的点对数,边权<=1000 题解 点分治. 点分治的思想就是取一个树的重心,这种路径只有两种情况,就是经过和不经过这个重心,如果不经过重心就把树剖开递归处 ...
- Leetcode#71 Simplify Path
原题地址 用栈保存化简后的路径.把原始路径根据"/"切分成若干小段,然后依次遍历 若当前小段是"..",弹栈 若当前小段是".",什么也不做 ...
- html5碰撞小球模拟
这里根据动量守恒和能量守恒定理来计算小球的位置,从而模拟完全弹性碰撞下的小球运行轨迹. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- HDU 1104 Remainder
与前一题类似,也是BFS+记录路径, 但是有很多BUG点, 第一MOD操作与%不同i,其实我做的时候注意到了我们可以这样做(N%K+K)%K就可以化为正数,但是有一点要注意 N%K%M!=N%M%K; ...
- CSS预处理器实践之Sass、Less大比拼[转]
什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...
- poj 3684
Physics Experiment Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 784 Accepted: 266 ...