这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 jquery 实现的代替传统 checkbox 样式插件, 可实现滑动选择的效果, 需要的朋友可以参考下
本文实例讲述了 jquery 实现的代替传统 checkbox 样式插件。分享给大家供大家参考。具体如下:
效果图如下:
具体代码如下:
- (function($){
- $.fn.tzCheckbox = function(options){
- // Default On / Off labels:
- options = $.extend({
- labels : ['ON','OFF']
- },options);
- return this.each(function(){
- var originalCheckBox = $(this),
- labels = [];
- // Checking for the data-on / data-off html5 data attributes:
- if(originalCheckBox.data('on')){
- labels[0] = originalCheckBox.data('on');
- labels[1] = originalCheckBox.data('off');
- }
- else labels = options.labels;
- // Creating the new checkbox markup:
- var checkBox = $('<span>',{
- className: 'tzCheckBox '+(this.checked?'checked':''),
- html:'<span class="tzCBContent">'+labels[this.checked?0:1]+
- '</span><span class="tzCBPart"></span>'
- });
- // Inserting the new checkbox, and hiding the original:
- checkBox.insertAfter(originalCheckBox.hide());
- checkBox.click(function(){
- checkBox.toggleClass('checked');
- var isChecked = checkBox.hasClass('checked');
- // Synchronizing the original checkbox:
- originalCheckBox.attr('checked',isChecked);
- checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
- });
- // Listening for changes on the original and affecting the new one:
- originalCheckBox.bind('change',function(){
- checkBox.click();
- });
- });
- };
- })(jQuery);
希望本文所述对大家的 jQuery 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0422/270747.html