基于jQuery实现Tabs选项卡自定义插件

前端之家收集整理的这篇文章主要介绍了基于jQuery实现Tabs选项卡自定义插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

控件这东西网上找的多少都有些功能不如意的,只能自己动手来写了。

Tabs插件

很多人都需要用到,网上也有很多的例子,但是不是风格不搭调就是用着不习惯(自己写的不一定比别人的好但用着顺手In love)

下面直接贴代码,不喜勿喷:

")); $this.append($("
")); if (settings.data) { if (typeof settings.data === 'string') { settings.data = $.parseJSON(settings.data); } $.each(settings.data,function () { $this.tabs("add",this); }); } }); },add: function (tab) { var $this = $(this); var settings = $this.data("tw.tabs"); var headers = $this.find("." + settings.style.header_panel); var contents = $this.find("." + settings.style.content_panel); if (headers.find("[data-tab='" + tab.id + "']").length == 0) { var header = $("
  • " + "" + "" + tab.name + "
  • "); if (tab.canClose) { var close = $(""); close.click(function () { $this.tabs("remove",tab.id); }); header.append(close); } header.data("tw.tab",tab); header.click(function () { $this.tabs("select",tab); }); headers.append(header); var content = $("
    "); if (settings.type == "iframe") { content.append(""); } else if (settings.type == "ajax"){ $.ajax({ url: tab.url,type: "post",async: false,data: { target_id: tab.id },success: function (result) { content.html(result); } }); } else { content.html(tab.content); } contents.append(content); if (tab.selected) { $this.tabs("select",tab); } } else { $this.tabs("select",tab); } },select: function (tab) { var $this = $(this); var settings = $this.data("tw.tabs"); $this.find("." + settings.style.selected).removeClass(settings.style.selected); if (typeof tab == "object") { $this.find("[data-tab='" + tab.id + "']").addClass(settings.style.selected); } else { $this.find("." + settings.style.header).eq(tab).addClass(settings.style.selected); $this.find("." + settings.style.content).eq(tab).addClass(settings.style.selected); } if (settings.onchanged) { settings.onchanged(tab); } },refresh: function () { var $this = $(this); var selected = $this.find("." + settings.style.selected); var tab = $this.find("." + settings.style.header).data("tw.tab"); if (settings.type == "iframe") { selected.find("iframe").attr('src',tab.url + "?target_id=" + tab.id); } else if (settings.type == "ajax") { $.ajax({ url: tab.url,success: function (result) { content.html(result); } }); } else { content.html(tab.content); } },remove: function (id) { var $this = $(this); var settings = $this.data("tw.tabs"); var tab = $this.find("[data-tab='" + id + "']"); if (tab.find("." + settings.style.selected)) { var index = tab.eq(0).index() - 1; $this.tabs("select",index); } tab.remove(); },destroy: function (options) { return $(this).each(function () { var $this = $(this); $this.removeData('tabs'); }); } } $.fn.tabs = function () { var method = arguments[0]; var args = arguments; if (typeof (method) == 'object' || !method) { method = methods.init; } else if (methods[method]) { method = methods[method]; args = $.makeArray(arguments).slice(1); } else { $.error('Method ' + method + ' does not exist on tw.tabs'); return this; } return method.apply(this,args); } } )(jQuery);

    本文已被整理到了、大家还可以点击进行学习。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/jquery/44352.html

    猜你在找的jQuery相关文章