table切换jquery插件 jQuery插件写法模板流程

最新推荐文章于 2023-07-28 14:46:41 发布

转载最新推荐文章于 2023-07-28 14:46:41 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaomaotao/p/7273573.html

文章标签：

#javascript #ui #ViewUI

本文介绍了如何通过$.extend()扩展jQuery的功能，并演示了如何利用$.fn为jQuery添加新的方法实现表格内容的动态切换。通过具体实例展示了jQuery的灵活性及其实现网页交互的能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建

通过$.extend()来扩展jQuery

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //调用
$.sayHello('Wayou');

2 通过$.fn 向jQuery添加新的方法

.table-container{width:460px;height: 460px;margin:50px auto;border: 1px solid #ddd;padding:30px;color: #333;}
.table-title{height:50px;line-height: 50px;text-align: center;font-size: 14px;}
.table-title li{width: 25%;cursor:pointer;float: left;}
.table-title li{cursor:pointer;float: left;}
.table-title li.active{background: grey;color: #fff;}
.table-content-wrap>div{height: 350px;text-align: center;line-height: 350px;}
.table-content-wrap>div{width:100%;padding: 20px;display: none;}
.table-content-wrap>div:nth-child(1){background: pink;}
.table-content-wrap>div:nth-child(2){background: grey;}
.table-content-wrap>div:nth-child(3){background: yellowgreen;}
.table-content-wrap>div:nth-child(4){background: purple;}
.table-content-wrap>div.active{display: block;}

;(function($) {
$.fn.tableSwitch = function() {
return this.each(function() {

var tableEl = $(this).children('.table-title').find('li'),
tableCon = $(this).find('.table-content');
tableEl.click(function(event) {
var i = $(this).index();
switchClass(tableEl, 'li');
switchClass(tableCon, 'div');
function switchClass(el, elName) {
el.eq(i).addClass('active').siblings(elName).removeClass('active');
}

})
})
}

$('.table-container').tableSwitch();

})(jQuery);

转载于:https://www.cnblogs.com/xiaomaotao/p/7273573.html

table切换jquery插件 jQuery插件写法模板 流程

table切换jquery插件 jQuery插件写法模板流程