Use jQuery to create TabPanel effect code_jquery

For example, when viewing a large amount of information, it will be used when using multi-window frameworks on web pages. Nowadays, there are quite a lot of jquery-based Tab controls on the Internet. The idtabs I have used before is relatively simple and practical, and it is also more flexible. But for complex situations, more coding is needed, which is too simple. There is also the tab control in jquery UI (never used it, I am not very interested in jquery ui), and the tab control in easyui, which has been a bit popular recently, was first seen on javaeye , the interface is quite beautiful, because it has not been open sourced before, so I have not followed up (it seems that it has been open sourced recently. I downloaded it a few days ago and took a look. The coding style is a bit like prototype, and I can’t see the shadow of jquery. I don’t know why it is called jquery easyui haha) , because I didn’t study it in depth, and it’s not easy to make other evaluations). Having said that, let’s go back to the topic. For various reasons, we have to think about developing one ourselves. So here is this article, let’s take a look at the effect first.

The picture below is the rendering of a single web page multi-window frame

The picture below is a screenshot of the calling example provided at the end of the article.

You can see the effect of using ExtJs. In fact, CSS is basically a direct copy of it. I think it looks very good. Of course, when it comes to actual use, everyone can look it their own way

First, let’s start with HTML

Note: My idea of ​​​​control first is always to determine the HTML structure first, then the style, and finally the event methods implemented by js.

In fact, looking at the picture, we can basically confirm that the tab control mainly has two parts of HTML. One is the header, which is used to place the tab tab; the other is the body, which is the container for the content. Then there are two Div containers. The tab control is divided into two parts: header and body.

The header part contains multiple tabs, so it is easy to think of the cooperation of ul li. Let’s take a look at the actual html structure in the header

By passing li as a tab, the first a is the close button, and the second a is the actual content, the background image settings in the left and right are achieved through nested tags (this approach is more common). Of course, to achieve good results, we still need CSS support. Must have some knowledge of CSS.

The structure of the Body is simpler, just a div nested within a div.

Second CSS Stylesheet

Because CSS is copied from EXTJS, I won’t introduce it in detail. You can see the actual code in the code download. If you have any questions, you can communicate

Third: Start writing JS

The old rule is to start with a complete JS code, which is about 500 lines of code. In fact, I am more diligent in changing lines, and the actual amount of code is actually relatively small.

Copy code The code is as follows:

; (function ($) {
$.fn.tabpanel =function(option){
var dfop ={
items:[], //选项卡数据项 {id,text,classes,disabled,closeable,content,url,cuscall,onactive}
width:500,
height:400,
scrollwidth:100,//如果存在滚动条，点击按钮次每次滚动的距离
autoscroll:true //当选项卡宽度大于容器时自动添加滚动按钮
};
var headerheight=28;
$.extend(dfop, option);
var me =$(this).addClass("x-tab-panel").width(dfop.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{
var item =dfop.items[i];
builditemlihtml(item,litemp);
}
litemp.push("

");
ulwrap.html(litemp.join(""));
litemp =null;
stripwrap.append(ulwrap);
if(dfop.autoscroll)
{
header.append(scrollerright).append(scrollerleft);
}
header.append(stripwrap).append(stripspacer);
var bodyheight=dfop.height-headerheight;
var bodywrap = $("

");
var body = $("

").css({width:innerwidth,height:bodyheight});
var bodytemp=[];
for(var i=0,l=dfop.items.length; ivar item =dfop.items[i];
builditembodyhtml(item,bodytemp);
}
body.html(bodytemp.join("")).appendTo(bodywrap);
me.append(header).append(bodywrap);
initevents();
function builditemlihtml(item,parray)
{
parray.push("

");
parray.push("");
parray.push("");
parray.push("",item.text,"");
parray.push("

");
}
function builditembodyhtml(item,parray)
{
parray.push("

");
parray.push("

");
parray.push("

");
if(item.url){
parray.push("