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文件被加载) —准备:为类的静态变量分配内 ...
随机推荐
- Python python 基本语法
程序1 def buildConnectionString(params): """Build a connection string from a dictionary ...
- web开发--文档下载
GOOGLE在线文档下载地址分享(GOOGLE的文档地址暂不能用了,会放在其它位置..) GOOGLE的在线文档功能好象挂掉了...等找个其它存放的位置把这些文档再上传上去... 存在GOOGLE里面 ...
- zoj 2314 Reactor Cooling 网络流
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1314 The terrorist group leaded by a ...
- Spring3.0实现REST实例
关于REST是什么东西,在这里我就不再多说,大家可以去http://blog.csdn.net/pilou5400/archive/2010/12/24/6096861.aspx看看介绍,直接切入主题 ...
- Leetcode#106 Construct Binary Tree from Inorder and Postorder Traversal
原题地址 二叉树基本操作 [ ]O[ ] [ ][ ]O 代码: TreeNode *restore(vector<i ...
- 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果
利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...
- UML建模类型（转载）
区分UML模型, UML建模用于不同类型的不同的图.有三个重要类型的UML建模: 结构建模: 系统结构建模捕捉静态功能.它们包括下列各项: 类图 对象图 部署图 包图 复合结构图 组件图 结构模型代表 ...
- 2014_GCJ_A
题目链接:http://code.google.com/codejam/contest/2984486/dashboard#s=p0 最想吐槽的是想些DFS过小数据,居然写不出来,不知道我这半年的AC ...
- Unity3D之Assetbundle
原地址: Unity3D之Assetbundle 有几个地方需要注意下 1.如何解决资源重复加载的问题 2.初始化了就直接出现在场景中了 感觉怪怪的 3.标红的地方要注意下 prefab上挂载的脚 ...
- Razor语法学习
原文:http://www.cnblogs.com/youring2/archive/2011/07/24/2115254.html 1.Razor的文件类型 Razor支持两种文件类型,分别是.cs ...