首页 / JQUERY / 基于jquery的tabsUI实现思路

基于jquery的tabsUI实现思路

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于jquery的tabsUI实现思路，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含18283字，纯文字阅读大概需要27分钟。

内容图文

直接开始：

1.首先

制作静态html+css 页面

代码如下

html代码

  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="../../src/DUI/themes/default/css/dui_tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br />
基本的tab
<div class="dui_tab">
<div class="dui_tab_title">
 <a class="dui_tab_title_a_right"></a>
 <ul class="dui_tab_title_ul">
  <li>
   <a class="dui_tab_title_ul_li_iconl"></a>
   主页主页主页
   <a class="dui_tab_title_ul_li_iconr"></a>
  </li>
  <li>
     <a class="dui_tab_title_ul_li_iconl"></a>
   主页
   <a class="dui_tab_title_ul_li_iconr"></a>
  </li>
 </ul>
</div>
<div class="dui_tab_title_a_right_cont">
               <div class="dui_tab_title_a_right_contc">主页</div>
               <div class="dui_tab_title_a_right_contc">主页主页主页</div>
</div>
<div class="dui_tab_bodyc">
cddcs
</div>
</div>
<br />
左边的tab
<div class="dui_tableft">
<div class="dui_tableft_title">
 <ul class="dui_tableft_title_ul">
  <li>
   <a class="dui_tableft_title_ul_li_iconl"></a>
   主页主页
   <a class="dui_tableft_title_ul_li_iconr"></a>
  </li>
  <li>
     <a class="dui_tableft_title_ul_li_iconl"></a>
   主页
   <a class="dui_tableft_title_ul_li_iconr"></a>
  </li>
 </ul>
</div>
<div class="dui_tableft_bodyc">
cddcs
</div>
</div>
<br />
右边的tab
<div class="dui_tabright">
<div class="dui_tabright_title">
 <ul class="dui_tabright_title_ul">
  <li>
   <a class="dui_tabright_title_ul_li_iconl"></a>
   主页主页
   <a class="dui_tabright_title_ul_li_iconr"></a>
  </li>
  <li>
     <a class="dui_tabright_title_ul_li_iconl"></a>
   主页
   <a class="dui_tabright_title_ul_li_iconr"></a>
  </li>
 </ul>
</div>
<div class="dui_tabright_body">
cds
</div>
</div>
<br />
底下的tab
<div class="dui_tabbot">
<div class="dui_tabbot_bodyc">
cddcs
</div>
<div class="dui_tabbot_title_a_right_cont">
               <div class="dui_tabbot_title_a_right_contc">主页</div>
               <div class="dui_tabbot_title_a_right_contc">主页主页主页</div>
</div>
<div class="dui_tabbot_title">
 <a class="dui_tabbot_title_a_right"></a>
 <ul class="dui_tabbot_title_ul">
  <li>
   <a class="dui_tabbot_title_ul_li_iconl"></a>
   主页主页主页
   <a class="dui_tabbot_title_ul_li_iconr"></a>
  </li>
  <li>
     <a class="dui_tabbot_title_ul_li_iconl"></a>
   主页
   <a class="dui_tabbot_title_ul_li_iconr"></a>
  </li>
 </ul>
</div>
</div>
<br /><br /><br /><br /><br />
</body>
</html>

css代码如下：

*{padding:0px;margin: 0px; font-family: SimSun;}
img{border:none;}
body{height: 100%; padding-left: 100px;}
/*icon*/
.dui_tab_title_ul_li_iconl{display: block; float:left;background:url('../images/tabs/datebox_arrow.png') no-repeat center; width: 20px; margin-top: 5px; height: 16px;  margin-right: 0px;}
.dui_tab_title_ul_li_iconl1{display: block; float:left;background:url('../images/tabs/datebox_arrow.png') no-repeat center; width: 20px; margin-top: 5px; height: 16px;  margin-left: 15px;}

/*basic tab*/
.dui_tab{width:500px; height: 300px;background:#F0F5F6; border-radius: 6px; padding:1px;}
.dui_tab_title{width: 100%; height: 26px; background:url('../images/tabs/tabs-bg.gif') repeat-x;overflow: hidden;overflow-x: auto; border-bottom:thin solid #BED5F3;}
.dui_tab_title_ul{list-style: none; width: 100%; }
.dui_tab_title_ul li{display:block; float:left; min-width: 50px; padding-left: 5px; padding-right:2px; height: 100%; line-height: 26px; cursor: pointer; font-size: 13px;border:thin solid #BED5F3; border-bottom:none; margin-left: 2px;border-radius: 5px; text-align: center;}


.dui_tab_title_ul_li{background:url('../images/tabs/layout-header-over.gif');}


.dui_tab_title_a_right{display:block; float:right;background:url('../images/tabs/accordion_arrows.png') no-repeat -16px 0px; width: 16px;height: 16px; margin-top: 5px; height: 16px;margin-right: 3px;cursor: pointer;}
.dui_tab_title_a_right_cont{width: 110px; min-height: 23px;position: absolute; display: none;}
.dui_tab_title_a_right_contc{width: 100%; height: 23px; text-align: right; line-height: 23px; font-size: 12px; padding-right: 5px;background:url('../images/tabs/layout-header-over.gif') repeat-x;}
.dui_tab_title_a_right_contc1{width: 100%; height: 23px; text-align: right; line-height: 23px; padding-right:5px;background:url('../images/tabs/tabs-bg.gif') repeat-x;}

.dui_tab_title_a_right_contc:hover{background:url('../images/tabs/tabs-bg.gif'); cursor: pointer;}
.dui_tab_title_ul_li_iconr{display:block; float:right;background:url('../images/tabs/icon-close.gif') no-repeat center; width: 15px;height: 11px; margin-top:1px; margin-left: 4px; overflow: hidden;}
.dui_tab_title_ul_li_iconr:hover{cursor: pointer; background:url('../images/tabs/icon-close-over.gif') no-repeat center;}
.dui_tab_bodyc{width: 100%; height: 272px; overflow: auto;}
.dui_tab_body{width: 100%; height: 100%;}

/*左边的tab*/
.dui_tableft{width:500px; height: 300px;background:#F0F5F6; border-radius: 6px; padding-top: 2px;}
.dui_tableft_title{width: 100px; float: left;   height: 100%; overflow: hidden;overflow-y: auto;  border-right:thin solid #BED5F3;}
.dui_tableft_title_ul{list-style: none; width: 100%; }
.dui_tableft_title_ul li{display:block; width: 98%; padding-left: 2%; height: 23px; line-height: 23px; cursor: pointer; font-size: 12px;border:thin solid #BED5F3; border-right:none; margin-top: 2px;border-radius: 5px; overflow: hidden; }
.dui_tableft_title_ul_li{background:url('../images/tabs/layout-header-over.gif');}

.dui_tableft_title_ul_li_iconr{display:block; float:right;background:url('../images/tabs/icon-close.gif') no-repeat center; width: 15px;height: 11px; margin-top:1px; margin-right: 3px; overflow: hidden;}
.dui_tableft_title_ul_li_iconr:hover{cursor: pointer; background:url('../images/tabs/icon-close-over.gif') no-repeat center;}
.dui_tableft_bodyc{width: 398px; height: 100%; overflow: auto;float: right;   }
.dui_tableft_body{width: 100%; height: 100%;}

/*右边的tab*/
.dui_tabright{width:500px; height: 300px;background:#F0F5F6; border-radius: 6px; padding-top: 2px;}
.dui_tabright_title{width: 100px; height: 100%; overflow: hidden;overflow-y: auto;  border-left:thin solid #BED5F3;float: right;  }
.dui_tabright_title_ul{list-style: none; width: 100%;}
.dui_tabright_title_ul li{display:block; width: 97%; padding-left: 2%; height: 23px; line-height: 23px; cursor: pointer; font-size: 12px;border:thin solid #BED5F3; border-left:none; margin-top: 2px;border-radius: 5px; overflow: hidden;}

.dui_tabright_title_ul_li{background:url('../images/tabs/layout-header-over.gif');}

.dui_tabright_title_ul_li_iconr{display:block; float:right;background:url('../images/tabs/icon-close.gif') no-repeat center; width: 15px;height: 11px; margin-top:1px; margin-right: 2px; overflow: hidden;}
.dui_tabright_title_ul_li_iconr:hover{cursor: pointer; background:url('../images/tabs/icon-close-over.gif') no-repeat center;}
.dui_tabright_bodyc{width: 398px; height: 100%; overflow: auto; float: left;  }
..dui_tabright_body{width: 100%; height: 100%;}

/*bot tab*/
.dui_tabbot{width:500px; height: 300px;background:#F0F5F6; border-radius: 6px; padding-top: 2px;}
.dui_tabbot_bodyc{width: 100%; height: 272px; overflow: auto; }
.dui_tabbot_body{width: 100%; height: 100%;}

.dui_tabbot_title{width: 100%; height: 26px; background:url('../images/tabs/tabsb-bg.gif') repeat-x;overflow: hidden;border-top:thin solid #BED5F3;border-bottom:thin solid #BED5F3;}
.dui_tabbot_title_ul{list-style: none; width: 100%; }
.dui_tabbot_title_ul li{display:block; float:left; min-width: 50px; padding-left: 5px; padding-right: 2px;  height: 100%; line-height: 26px; cursor: pointer; font-size: 13px;border:thin solid #BED5F3; border-top:none; margin-left: 2px;border-radius: 5px; text-align: center;}

.dui_tabbot_title_ul_li{background:url('../images/tabs/layout-header-over.gif');}

.dui_tabbot_title_a_right{display:block; float:right;background:url('../images/tabs/accordion_arrows.png') no-repeat 0px 0px; width: 16px;height: 16px; margin-top: 5px; height: 16px;margin-right: 3px;cursor: pointer;}
.dui_tabbot_title_a_right_cont{width: 110px; min-height: 23px;position: absolute; margin-left: 384px; margin-top: -40px;display: none;}
.dui_tabbot_title_a_right_contc{width: 100%; height: 23px; line-height: 23px; font-size: 12px; padding-right: 5px;background:url('../images/tabs/layout-header-over.gif') repeat-x; text-align: right;}
.dui_tabbot_title_a_right_contc1{background:url('../images/tabs/tabs-bg.gif'); cursor: pointer;text-align: right;}

.dui_tabbot_title_ul_li_iconr{display:block; float:right;background:url('../images/tabs/icon-close.gif') no-repeat center; width: 15px;height: 11px; margin-top:1px; margin-left: 4px; overflow: hidden;}
.dui_tabbot_title_ul_li_iconr:hover{cursor: pointer; background:url('../images/tabs/icon-close-over.gif') no-repeat center;}

效果如下：

技术分享

好了现在做完静态代码，将其转换为jquery 组件, 先看效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="./css/dui_tabs.css" rel="stylesheet" type="text/css" />
<script src="/plugins/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
   <script src="/DUI_Tab.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function(){
    $(".dui_tab").DUITabs();
   });
       </script>
</head>
<body>
<br />
基本的tab
<div class="dui_tab" data-options="xtype:'basic'" style="width: 600px; height: 400px;">
<div class="dui_tab_body" data-options="title:'DUI',closed:true,selected:true">
这是第一个DTAB
<img src="../../src/DUI/themes/default/images/tabs/messager_icons.png" />
</div>
<div class="dui_tab_body" data-options="title:'tab2',icon:'dui_tab_title_ul_li_iconl'">这是第二个DTAB</div>
<div class="dui_tab_body" data-options="title:'tab3',">这是第三个DTAB</div>
<div class="dui_tab_body" data-options="title:'DUI_Tab组件',closed:true,icon:'dui_tab_title_ul_li_iconl'">这是第四个DTAB</div>
</div>
<br />
左边的tab
<div class="dui_tab" data-options="xtype:'left'" style="width: 600px; height: 400px;">
<div class="dui_tab_body" data-options="title:'tab1',closed:true,selected:true">这是第一个DTAB</div>
<div class="dui_tab_body" data-options="title:'tab2',icon:'dui_tab_title_ul_li_iconl1'">这是第二个DTAB</div>
<div class="dui_tab_body" data-options="title:'tab3',">这是第三个DTAB</div>
<div class="dui_tab_body" data-options="title:'tab4',closed:true,icon:'dui_tab_title_ul_li_iconl1'">这是第四个DTAB</div>
</div>
<br />
右边的tab
<div class="dui_tab" data-options="xtype:'right'" style="width: 600px; height: 400px;">
<div class="dui_tab_body" data-options="title:'tab1',closed:true,selected:true">这是第一个DTAB</div>
<div class="dui_tab_body" data-options="title:'tab2',icon:'dui_tab_title_ul_li_iconl1'">这是第二个DTAB</div>
<div class="dui_tab_body" data-options="title:'tab3',">这是第三个DTAB</div>
<div class="dui_tab_body" data-options="title:'tab4',closed:true,icon:'dui_tab_title_ul_li_iconl1'">这是第四个DTAB</div>
</div>
<br />
下边的tab
<div class="dui_tab" data-options="xtype:'bottom'" style="width: 600px; height: 400px;">
<div class="dui_tab_body" data-options="title:'tab1',closed:true,selected:true">这是第一个DTAB</div>
<div class="dui_tab_body" data-options="title:'tab2',icon:'dui_tab_title_ul_li_iconl'">这是第二个DTAB</div>
<div class="dui_tab_body" data-options="title:'tab3',">这是第三个DTAB</div>
<div class="dui_tab_body" data-options="title:'tab4',closed:true,icon:'dui_tab_title_ul_li_iconl'">这是第四个DTAB</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

DUI_tab.js 代码如下：

/**
 * 描述：DUI Tab
 * 作者：樊浩强
 * 时间：2016/3/12
 * 版本：DUI1.0
 */
;(function($, window, document, undefined) {
var methods = {
init: function(options) {
return this.each(function() {
var $this = $(this);
var dataopts = eval('({' + $this.data('options') + '})');
dataopts.items=$.extend([],dataopts.items);
$.each($this.children(), function(n, val) {
var daopt=eval('({' + $(val).data('options') + '})');
daopt.content=$(val).html();
dataopts.items.push(daopt);
});
if (typeof(options) == 'undefined') {
dataopts =  $.extend({}, methods.prototype._defaults, dataopts);
} else {
dataopts = $.extend({}, methods.prototype._defaults, $.extend({}, dataopts, options));
}
//执行代码
methods.prototype._render($this,dataopts);
});
},
destroy: function() {
return this.each(function() {


});
}
};
methods.prototype = {
/** 
* 默认的属性
*/
_defaults: {
xtype:'basic',
smenu:true,
titleWidth:'110',
rcmenu:false,
items:[{
title:'主页',
closed:true,
icon:'dui_tab_title_ul_li_iconl',
selected:true,
load:'', 
content:'sxsd1',
}],
},
/**
* 渲染器
*/
_render: function(ele,options) {
var widthele=ele.width();
var heightele=ele.height();
if(options.xtype=='left'||options.xtype=='right'){
ele.attr('class','dui_tab'+options.xtype);
var title=$('<div class="dui_tab'+options.xtype+'_title"></div>');
var ul=$('<ul class="dui_tab'+options.xtype+'_title_ul"></ul>');
var body=$('<div class="dui_tab'+options.xtype+'_bodyc"></div>');
body.css('width',(widthele-options.titleWidth-2)+'px');
var b=true;
$.each(options.items, function(n,value) {
var li=$('<li></li>');
var bodyc=$('<div class="dui_tab'+options.xtype+'_body" >'+value.content+'</div>');
   li.click(function(){
ul.children('li').removeClass();
body.children('.dui_tab'+options.xtype+'_body').css('display','none');
li.attr('class','dui_tab'+options.xtype+'_title_ul_li');
bodyc.css('display','block');
});
if(value.selected&&b){
li.addClass('dui_tab'+options.xtype+'_title_ul_li');
bodyc.appendTo(body);
b=false;
}else{
bodyc.css('display','none').appendTo(body);
}
if(value.icon!=''){li.append(' <a class="'+value.icon+'"></a>');};
li.append(value.title==''?'DTab'+n:value.title);
if(value.closed){
var iconr=$('<a class="dui_tab'+options.xtype+'_title_ul_li_iconr"></a>');
li.append(iconr);
iconr.click(function(event){
if(li.attr('class')=='dui_tab'+options.xtype+'_title_ul_li'){
if(li.prev().length==0){
if(li.next().length!=0){
li.next().attr('class','dui_tab'+options.xtype+'_title_ul_li');
bodyc.next().css('display','block');
}
}else{
li.prev().attr('class','dui_tab'+options.xtype+'_title_ul_li');
bodyc.prev().css('display','block');
}
}
li.remove();
bodyc.remove();
event.stopPropagation();
}); 
};
li.appendTo(ul);
});
title.append(ul);
ele.empty().append(title).append(body);
}else if(options.xtype=='bottom'||options.xtype=='basic'){
var tabtype="tab";
if(options.xtype=='bottom'){
 tabtype+='bot';
}
ele.attr('class','dui_'+tabtype);
var title=$('<div class="dui_'+tabtype+'_title"></div>');
var ul=$('<ul class="dui_'+tabtype+'_title_ul"></ul>');
var smenu='';
var body=$('<div class="dui_'+tabtype+'_bodyc"></div>');
body.css('height',(heightele-28)+'px');
if(options.smenu){
var sm=$('<a class="dui_'+tabtype+'_title_a_right"></a>');
sm.click(function(){
if(smenu.css('display')=='block'){
smenu.css('display','none');
}else{
smenu.css('display','block');
}
});
title.append(sm);
smenu=$('<div class="dui_'+tabtype+'_title_a_right_cont"></div>');
smenu.css('margin-left',(widthele-117)+'px');
};
var b=true;
$.each(options.items, function(n,value) {
var li=$('<li></li>');
var smenuc=$('<div class="dui_'+tabtype+'_title_a_right_contc">'+(value.title==''?'DTab'+n:value.title)+'</div>');
   smenuc.click(function(event){
    li.click();
    smenu.css('display','none');
    event.stopPropagation();
   });
   var bodyc=$('<div class="dui_'+tabtype+'_body" >'+value.content+'</div>');
   li.click(function(){
ul.children('li').removeClass();
body.children('.dui_'+tabtype+'_body').css('display','none');
smenu.children('div').attr('class','dui_'+tabtype+'_title_a_right_contc')
li.attr('class','dui_'+tabtype+'_title_ul_li');
bodyc.css('display','block');
smenuc.attr('class','dui_'+tabtype+'_title_a_right_contc1');
});
if(value.selected&&b){
li.addClass('dui_'+tabtype+'_title_ul_li');
bodyc.appendTo(body);
smenuc.attr('class','dui_'+tabtype+'_title_a_right_contc1');
b=false;
}else{
bodyc.css('display','none').appendTo(body);
}
if(value.icon!=''){li.append(' <a class="'+value.icon+'"></a>');};
li.append(value.title==''?'DTab'+n:value.title);
if(value.closed){
var iconr=$('<a class="dui_'+tabtype+'_title_ul_li_iconr"></a>');
li.append(iconr);
iconr.click(function(event){
if(li.attr('class')=='dui_'+tabtype+'_title_ul_li'){
if(li.prev().length==0){
if(li.next().length!=0){
li.next().attr('class','dui_'+tabtype+'_title_ul_li');
bodyc.next().css('display','block');
}
}else{
li.prev().attr('class','dui_'+tabtype+'_title_ul_li');
bodyc.prev().css('display','block');
}
}
li.remove();
bodyc.remove();
smenuc.remove();
if(options.xtype=='bottom'){
smenu.css('margin-top',-(ul.children().length*23)+'px');
}
event.stopPropagation();
}); 
};
li.appendTo(ul);
if(options.smenu){
smenu.append(smenuc);
}
});
title.append(ul);
if(options.xtype=='bottom'){
 smenu.css('margin-top',-(ul.children().length*23)+'px');
 ele.empty().append(body).append(smenu).append(title);
}else{
ele.empty().append(title).append(smenu).append(body);
} 
}
},
};
$.fn.DUITabs = function() {
var method = arguments[0];
if (methods[method]) {
method = methods[method];
arguments = Array.prototype.slice.call(arguments, 1);
} else if (typeof(method) == 'object' || !method) {
method = methods.init;
} else {
$.error('Method ' + method + ' does not exist on jQuery.DUIlayout');
return this;
}
return method.apply(this, arguments);
};
})(jQuery, window, document);

css内容还是上面的

效果如下：

源码稍后同步

原文：http://blog.csdn.net/sxlesq/article/details/51160876

内容总结

以上是互联网集市为您收集整理的基于jquery的tabsUI实现思路全部内容，希望文章能够帮你解决基于jquery的tabsUI实现思路所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1238635.html

来源：【匿名】

【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【基于jquery的tabsUI实现思路】教程文章相关的互联网学习教程文章

基于jquery的tabsUI实现思路【图】

直接开始：1.首先制作静态html+css 页面代码如下 html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="../../src/DUI/themes/default/css/dui_tabs.css" rel="stylesheet" type="text/css" /> </head> <body> <br /> 基本的tab <div class="dui_tab"> <div class="dui_tab_title"><a class="dui_tab_title_a_right"></a><ul class="dui_tab_title_ul"><li><a class="dui_tab_title_...

jQuery支持链式编程,一句话实现左侧table页+常用筛选器总结【代码】【图】

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ min-width: 150px; background-color: black; color: white; } .hide{ display: none; } .content{ min-height: 50px; } </style></head><body><div style="border: 1px solid silver;width: 200px;height: 60...

js与jQuery实现方式对比汇总【代码】

CreateTime--2016年12月16日09:11:23Author:Marydonjs与jQuery实现方式对比汇总<div id="ListContainer" style="border:1px solid red;height:100px;width:100px;"></div>1.控制元素的显示与隐藏　　javascript方式/*控制div隐藏*/ document.getElementById("ListContainer").style.display = "none"; /*控制div显示*/ document.getElementById("ListContainer").style.display = "block";　　jQuery方式/*控制div隐藏*/ $("#List...

微信小程序实现类似JQuery siblings()的方法【代码】【图】

想要实现的效果：1、点击数字时背景为红色，字体为白色2、点击1或2时，对应下面的灰点消失，再次点击其他数字时灰点显示 wxml:<block wx:for="{{weekDay}}" wx:key="item.index"><view data-key="{{index}}" bindtap=‘select_d‘ class="day_list {{d_state==index?‘red_day‘:‘‘}}"><text>{{item.day_n}}</text><text class=‘{{item.dian_class}} {{item.state==0?"dian_none":"dian_block"}}‘></text></view></block>wxss:...

用jquery实现toast的原理【代码】

function toast(mess){var str=‘<div class="mess"><span></span></div>‘;$("body").append(str);$(".mess").fadeIn().find("span").html(mess);setTimeout(function(){$(".mess").fadeOut();},2000) } toast("验证码不能为空"); 原文：https://www.cnblogs.com/yuanyanbk/p/8572766.html

struts+ajax+jquery：实现异步新增数据【代码】【图】

很久未有更新，最近因为团队其它事耽误没有继续学习，但心中十分忐忑不安，抽空把自己薄弱的点拿来再巩固一下！本身异步刷新用处非常多，SSH框架对我来讲，已无难度，但结合ajax处理一些增删查改分页等，就觉得无奈，还是把基础抓起来先先看一下本次功能的效果图：1、用到的jar包下载地址：http://pan.baidu.com/s/1hspDeoW2、index.jsp<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = re...

jquery 实现tab切换

大家都知道使用QQ的时候需要输入账号和密码这个时候一个TAB键盘就可以实现切换到下一个输入框里具体是怎么实现的呢请看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin:0; padding:0; } .container{ width: 600px; margin: 20px; overflow: hidden; ...

jquery 实现拖动文件上传加进度条【代码】

通过对文件的拖动实现文件的上传，主要用到的是HTML5的ondrop事件，上传内容通道FormData传输：//进度条 <div class="parent-dlg" ><div class="progress-label">0%</div><div class="son"></div> </div> //要拖动到的地方 <div class="main_content_center"></div> js:var dz = $(‘#main_content_center‘); dz.ondragover = function(ev) {//阻止浏览器默认打开文件的操作ev.preventDefault(); }dz.ondrop = function(ev) {ev.p...

jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程【代码】【图】

有两天没发表文章了，今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航，这款菜单看起来非常大气，可以展示非常多的产品类目，如果你在设计电子商务网站，不妨可以拿来参考，一下是效果图：我们也可以到这里来查看这款菜单的DEMO演示。接下来还是分析一下源代码，源码由HTML、CSS和jQuery组成，先来看看HTML，东西很多，但结构非常简单：<div class="sidebar"><div class="sidebar_top sidebar_top_tc">全部产品分...

jquery.roundabout.js实现3D图片层叠旋转木马切换【代码】【图】

最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。兼容性如图：html结构代码：<div id="featured-area"><ul><li><img src="images/fnfast.jpg"/></li><li><img src="images/photoshop_plus.jpg"/></li><li><img src="images/speedometer.jpg"/></li><li><img src="images/photoshop_plus.jpg"/></li></ul><a href="javascript:void(0)" class="ban_l_btn"></a><a href="javascript:void(0)" clas...

利用jquery 实现单页定位动画运动【代码】

首先引入jquery 第二步在样式中设置锚点和锚链的id<p id = "title1"></p><br><br><br><br><br><br><br><div id = "modOne"></div>第三步直接上代码：jQuery(document).ready(function($) { /*回到顶部*/ $(‘#gotop‘).click(function(){//回到顶部所在元素的 id为gotop 这里创建他的点击事件 $(‘body,html‘).animate({ scrollTop: 0；//这个是body html 距离顶部的距离最顶端和窗...

分别用html+css,js,jquery实现二级下拉列表【代码】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title><style type="text/css"> *{ margin:0px; padding:0px;}#menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}ul{ list-style...

php+jQuery.uploadify实现文件上传教程【图】

这两天用上传的控件，PHP+Jquery今天先介绍这个uploadify，嗯，我今天下载因为我英文不是很好所以我就在网上找的使用教程，我发现好多用不了，我那个去，你看官方文档才知道很多API已经不是以前的API了。今天总结一下给大家，给大家一个提醒最多还是要看官方的http://www.uploadify.com/documentation/！简单举例一下使用然后我都加上注释给大家，方便大家阅读和使用下载官方的之后直接使用就OK了，当然你需要什么在直接修改就可以...

jquery实现表格内容筛选【代码】【图】

对于表格来说，当数据比较多的时候，我们无法一页一页的查找，这时可以通过一个搜索框来实现搜索。对于这个搜素框，我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选，而不是填完以后点击搜索按钮再执行。 <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"/><script src="jquery-1.3.2.min.js"></script><link href="css/style.css" rel="stylesheet" type="...

jQuery实现瀑布流的简单方法【代码】

HTML代码<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>waterFall</title><link rel="stylesheet" href="wf.css"><script src="jquery.js"></script><script src="wf.js"></script></head><body><div class="wrap"><div class="box"><img src="1.jpg" alt=""><p>11111111111</p></div><div class="box"><img src="2.jpg" alt=""><p>22222222222</p></div><div class="box"><img src="3.jpg" alt=""><p>33333...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / 基于jquery的tabsUI实现思路

基于jquery的tabsUI实现思路

内容导读

内容图文

DUI_tab.js 代码如下：

css内容还是上面的

效果如下：

源码稍后同步

内容总结

内容备注

内容手机端

【基于jquery的tabsUI实现思路】教程文章相关的互联网学习教程文章

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程