澳门贵宾会娱乐官网基于jQuery实现Tabs选项卡自定义插件_jquery_脚本之家

如大量信息查看,当网页多窗口框架等都会用到,现在网上基于jquery
Tab控件,其实也蛮多了,我以前用过的idtabs,就比较简单实用,也是比较灵活,但是对于复杂情况就要编码多些,太简单了些。还有就是jquery
UI的里面的tab控件,另外就是近期有点小火的easyui
中的tab控件,最早在javaeye上面看到的,界面还算漂亮,因为之前没开源,所以一直没跟进(好像最近开源了,前几天下载了看看,编码风格有点像prototype,看不出jquery的影子,不知道为什么叫jquery
easyui呵呵,因为没太深入去学习,也不好做其他评价)。说了那么多,我们还是回到主题,因为种种原因不得不想着自己开发一个吧。于是就有了这篇,先来看看效果吧。

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

下图是单网页多窗口框架的效果图

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

下图是文末提供调用示例的效果截图。

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

大家可以看到了还是使用ExtJs的效果。其实CSS基本上是直接copy它的。我觉得它那个就非常好看,当然实际使用的时候大家有能力完全可以自己样子

 { 'use strict'; var defaults = { type: "iframe", onchanged: null, style: { header_panel: "tab-headers", content_panel: "tab-contents", header: "tab-header", content: "tab-content", selected: "selected", icon_base: "fa", icon_close: "fa-close" } } var methods = { init: function  { return this.each { var $this = $; if (!$this.hasClass { $this.addClass; } var settings = $this.data; if  == 'undefined') { settings = $.extend({}, defaults, options); $this.data; } else { settings = $.extend({}, settings, options); $this.data; } $this.empty(); $this.append($("

第一 我们还是从HTML开始吧

“)); $this.append($(“

注:我先控件的思路始终是先确定HTML结构,其次是样式,最终才是js实现的事件方法等。

“)); if { if (typeof settings.data === ‘string’) { settings.data =
$.parseJSON; } $.each(settings.data, function () { $this.tabs; } }); },
add: function { var $this = $; var settings = $this.data; 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控件主要有两个部分的html
一个是头,用于放tab选项卡的;另外一个是体,是内容的容器。那么就是两个Div容器,讲tab控件分成了header和body两部分。

” + “” + “” + tab.name + “

其中header部分因为包含多选项卡 所以很容易想到ul
+li的配合。来看一下header中的实际html结构

“); if { var close = $(“”); close.click { $this.tabs; header.append; }
header.data; header.click { $this.tabs; headers.append; var content =
$(“

通过通过其中li即是一个选项卡,第一个a是关闭按钮,第二个a才是实际内容
通过嵌套标签来实现
左右中的背景图片设置。当然能够有个好的效果,还是要靠CSS支持。必须对CSS有一定的了解。

“); if (settings.type == “iframe”) { content.append(“

Body的结构则更简单就是div嵌套div就就结束了。

“); } else if (settings.type == “ajax”){ $.ajax({ url: tab.url, type:
“post”, async: false, data: { target_id: tab.id }, success: function {
content.html; } else { content.html; } contents.append; if { $this.tabs;
} } else { $this.tabs; } }, select: function { var $this = $; var
settings = $this.data; $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.addClass(settings.style.selected);
$this.find(“.” +
settings.style.content).eq.addClass(settings.style.selected); } if {
settings.onchanged; } }, refresh: function () { var $this = $; var
selected = $this.find(“.” + settings.style.selected); var tab =
$this.find(“.” + settings.style.header).data; if (settings.type ==
“iframe”) { selected.find.attr(‘src’, tab.url + “?target_ajax”) {
$.ajax({ url: tab.url, type: “post”, async: false, data: { target_id:
tab.id }, success: function { content.html; } else { content.html; } },
remove: function { var $this = $; var settings = $this.data; var tab =
$this.find(“[data-tab='” + id + “‘]”); if (tab.find(“.” +
settings.style.selected)) { var index = tab.eq – 1; $this.tabs; }
tab.remove(); }, destroy: function { return $.each { var $this = $;
$this.removeData; } } $.fn.tabs = function () { var method =
arguments[0]; var args = arguments; if == ‘object’ || !method) {
method = methods.init; } else if { method = methods[method]; args =
$.makeArray; } else { $.error(‘Method ‘ + method + ‘ does not exist on
tw.tabs’); return this; } return method.apply;

第二 CSS样式表

.tabs { width:100%; height:100%;} .tabs .tab-headers { margin:0; padding:0 10px; height:40px; list-style:none; background:#f5f5f5; border-bottom:1px solid #ccc; } .tabs .tab-headers .tab-header { float:left; height:30px; font-size:12px; padding:7px 15px 0; margin-top:10px; margin-right:5px; border:1px solid #ccc; border-bottom:none; position:relative; cursor:pointer; } .tabs .tab-headers .tab-header:hover { background:#ccc; color:#0094ff; } .tabs .tab-headers .tab-header.selected { background:#fff; border:none; cursor:default; padding-top:5px; margin-left:1px; margin-right:6px; border-top:3px solid #0094ff; } .tabs .tab-headers .tab-header .tab-title { margin-left:5px; } .tabs .tab-headers .tab-header .fa-close { position:relative; right:-6px; top:0; } .tabs .tab-headers .tab-header .tab-close:hover { color:#f00; cursor:pointer; } .tabs .tab-contents { width: 100%; height: calc; } .tabs .tab-contents .tab-content { display:none; } .tabs .tab-contents .tab-content.selected { display: block; width: 100%; height: 100%; overflow: hidden; } .tabs .tab-contents .tab-content.selected iframe { width: 100%; height: 100%; border: none; }

因为CSS是copy
EXTJS的我也就不多介绍了。大家可以看代码下载里面的实际代码,如果有问题可以再沟通交流

本文已被整理到了jquery选项卡操作方法汇总、大家还可以点击javascript选项卡操作方法汇总进行学习。

第三:开始编写JS了

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

老规矩先来一段完整的JS代码,大概有500行左右的代码,其实我换行比较勤快,实际的代码量其实还是比较少。复制代码 代码如下: ; { $.fn.tabpanel =function{
var dfop ={ items:[], //选项卡数据项
{id,text,classes,disabled,closeable,content,url,cuscall,onactive}
width:500, height:400,
scrollwidth:100,//如果存在滚动条,点击按钮次每次滚动的距离
autoscroll:true //当选项卡宽度大于容器时自动添加滚动按钮 }; var
headerheight=28; $.extend; var me =$.addClass.width; innerwidth =
dfop.width-2; //构建Tab的Html var tcs=
dfop.autoscroll?”x-tab-scrolling-top”:””; var header = $(“

“); var stripwrap = $(“

“); var scrollerright = $(“

“); var scrollerleft = $(“

“); var ulwrap = $(“

“); var stripspacer = $(“

“); var litemp =[]; for(var i=0,l=dfop.items.length; i

“); ulwrap.html; litemp =null; stripwrap.append; if {
header.append.append; } header.append.append; var
bodyheight=dfop.height-headerheight; var bodywrap = $(“

“); var body = $(“

“).css({width:innerwidth,height:bodyheight}); var bodytemp=[]; for(var
i=0,l=dfop.items.length; i”); parray.push(“”); parray.push(“”);
parray.push(““,item.text,”“);
parray.push; } function builditembodyhtml {
parray.push(“

“); parray.push(“

“); parray.push(“

澳门贵宾会娱乐官网,”); if{ parray.push(“

“); } else if{ parray.push(“

“); } else{ parray.push; } parray.push; } function initevents() {
//reset scoller resetscoller; ulwrap.find”).each{ inititemevents; }
function inititemevents { liswaphover.call; liclick.call;
closeitemclick.call; } function scollerclick() { if {
scrollerleft.click{scolling; scrollerright.click{scolling; } } function
resetscoller() { if { var edge = ulwrap.find; var eleft
=edge.position().left; var sleft = stripwrap.attr; if(
sleft+eleft>innerwidth ) { header.addClass;
scrollerleft.css(“visibility”,”visible”);
scrollerright.css(“visibility”,”visible”); if {
scrollerleft.removeClass(“x-tab-scroller-left-disabled”); } else{
scrollerleft.addClass(“x-tab-scroller-left-disabled”); } if {
scrollerright.removeClass(“x-tab-scroller-right-disabled”); } else{
scrollerright.addClass(“x-tab-scroller-right-disabled”); }
dfop.showscrollnow =true; } else { header.removeClass;
stripwrap.animate({“scrollLeft”:0},”fast”);
scrollerleft.css(“visibility”,”hidden”);
scrollerright.css(“visibility”,”hidden”); dfop.showscrollnow =false; } }
} // function scolling { //debugger; if(!dfop.autoscroll ||
!dfop.showscrollnow) { return; } //debugger; //var swidth =
stripwrap.attr; var sleft = stripwrap.attr; var edge = ulwrap.find; var
eleft = edge.position().left ; if{
if(scrollerleft.hasClass(“x-tab-scroller-left-disabled”)) { return; }
if(sleft-dfop.scrollwidth-20>0) { sleft -=dfop.scrollwidth; } else{
sleft =0; scrollerleft.addClass(“x-tab-scroller-left-disabled”); }
if(scrollerright.hasClass(“x-tab-scroller-right-disabled”)) {
scrollerright.removeClass(“x-tab-scroller-right-disabled”); }
stripwrap.animate({“scrollLeft”:sleft},”fast”); } else{
if(scrollerright.hasClass(“x-tab-scroller-right-disabled”) && !max) {
return; } //left + ; if(max || (eleft>innerwidth &&
eleft-dfop.scrollwidth-20<=innerwidth)) { //debugger; sleft =
sleft+eleft- ; scrollerright.addClass(“x-tab-scroller-right-disabled”);
// sleft = eleft-innerwidth; } else { sleft +=dfop.scrollwidth; } if {
if(scrollerleft.hasClass(“x-tab-scroller-left-disabled”)) {
scrollerleft.removeClass(“x-tab-scroller-left-disabled”); } }
stripwrap.animate({“scrollLeft”:sleft},”fast”); } } function
scollingToli { var sleft = stripwrap.attr; var lleft =
liitem.position().left; var lwidth = liitem.outerWidth(); var edge =
ulwrap.find; var eleft = edge.position { sleft += ; if { sleft=0;
scrollerleft.addClass(“x-tab-scroller-left-disabled”); }
if(scrollerright.hasClass(“x-tab-scroller-right-disabled”)) {
scrollerright.removeClass(“x-tab-scroller-right-disabled”); }
stripwrap.animate({“scrollLeft”:sleft},”fast”); } else{
if(lleft+lwidth>innerwidth-40) { sleft =
sleft+lleft+lwidth+-innerwidth+40; // 40 =scrollerleft and
scrollerrightwidth;
if(scrollerleft.hasClass(“x-tab-scroller-left-disabled”)) {
scrollerleft.removeClass(“x-tab-scroller-left-disabled”); }
//滚到最后一个了,那么就要禁用right;
if(eleft-(lleft+lwidth+-innerwidth+40)<=innerwidth) {
scrollerright.addClass(“x-tab-scroller-right-disabled”); }
stripwrap.animate({“scrollLeft”:sleft},”fast”); } } liitem.click(); }
function liswaphover.hover{ if.hasClass(“x-tab-strip-disabled”)) {
$.addClass; } },function.hasClass(“x-tab-strip-disabled”)) {
$.removeClass; } }); } function
closeitemclick.hasClass(“x-tab-strip-closable”)) {
$.find(“a.x-tab-strip-close”).click{ deleteitembyliid.attr; } } function
liclick.click{ var itemid = this.id.substr; var curr = getactiveitem();
if( curr !=null && itemid == curr.id) { return; } var clickitem =
getitembyid; if(clickitem && clickitem.disabled) { return ; } if {
$.removeClass; $.addClass; curr.isactive =false; } if.addClass;
$(“#tab_item_”+clickitem.id).removeClass; if { var cururl =
$(“#tab_item_frame_”+clickitem.id).attr; if(cururl ==”about:blank”)
{ $(“#tab_item_frame_”+clickitem.id).attr; } } else
if(clickitem.cuscall && !clickitem.cuscalled) { var panel =
$(“#tab_item_content_”+clickitem.id); var ret = clickitem.cuscall;
clickitem.cuscalled =true; if //如果存在返回值,且不为空 {
clickitem.content = ret; panel.html; } } clickitem.isactive =true; if {
clickitem.onactive.call; } } }); } //获取当前活跃项 function
getactiveitem() { for(var i=0,j=dfop.items.length;i复制代码 代码如下: ;
{ $.fn.tabpanel =function; 接着就是编写默认参数 复制代码 代码如下:var dfop ={ items:[],
//选项卡数据项
{id,text,classes,disabled,closeable,content,url,cuscall,onactive}
width:500, height:400,
scrollwidth:100,//如果存在滚动条,点击按钮次每次滚动的距离
autoscroll:true //当选项卡宽度大于容器时自动添加滚动按钮 };
默认参数还是比较简单,我已加上了注释,其中就是item数组的项麻烦些,不过我相信大家通过字面的意思就已经知道大半了,我还是描述一下吧:id
即标示,必须唯一、text显示的文本、classes
特定的样式,如效果中的主页,我加了个图标,就通过此属性实现、disabled
是否禁用、closeable 是否可关闭、 content 和url 和cuscall
三个只要设置其中之一即可,content就是实际的内容html、url标示内容为网页,自动往内容中添加iframe,cuscall则是自定义,即内容显示什么有cuscall执行的结果来决定,可通过此属性来实现异步content内容。
onactive是指当tab项被激活时触发的事件。
是一个接受item内容的函数,详见demo
参数设置完了,通过外部传递的参数来更新默认的参数: $.extend;
接着就是构建html的部分,这部分比较长,我就不重复贴代码了。
当我们把html构建完成之后,就要给html元素添加事件,包括
选项卡的点击事件,左移按钮,右移按钮的点击事件,选项卡的鼠标hover效果事件等。
复制代码 代码如下: function initevents()
{ //reset scoller resetscoller(); //设置默认是否出现滚动掉
scollerclick(); //滚动条的点击事件,如果存在的话 ulwrap.find”).each{
inititemevents; //给每个选项卡 添加事件 }); } function inititemevents {
liswaphover.call; //选项卡的鼠标hover效果 liclick.call;
//选项卡的点击事件 closeitemclick.call; // 点击关闭按钮的事件 }
至于事件的实现,其实一个个来做,各个击破也就简单了。主要繁琐在控制滚动按钮的出现和禁用等的处理上,其他点击事件等都比较简单。
最后就是公开方法,和为了公开这些方法来编写一些内部方法,这个tabpanel自然还是比较简单易用,同时扩展性。大家可以根据实际的需求做些调整,当然现在的功能应该也满足大部分的要求了。
最后来看一下公开了哪些方法: 1:动态
新增tab项的方法,即通过js动态新增tab项,这里其实就是对items数据的维护,然后重新调用tabitem的输出html方法,最后单独为其设置事件。简单
2:选中或者新增。这也是通过js调用的方法,是对上一方法的扩展,即可通过js让某个tab项激活,如果该项不存在则通过参数来新增该选项卡
3:重新设置tabpanel的大小,即通过js重新设置tabpanel的大小,这个在窗口大小变化时调用,非常实用哦。
4:设置某项为禁用,通过js方法设置某项tabitem状态为禁用。
最后大家可以通过 代码
包括之前控件的实例,我已经提供了一个压缩包,但是我更推荐大家实用SVN获取最新代码。因为有的时候一些小的变动我就不发文告知了。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注