一个选项卡的进化史
发布人:一全科技 来源:Plane Art, 发布于:2010-12-15 21:07:01 浏览:923

辽宁12选5走势图表 www.jc1o.cn 很久以前因为看别人的js选项卡代码从而步入javascript的美丽大门,现在我也小小的写一个小的教程,但愿能帮助道对js困惑的朋友。

一、结构

使用合理的HTML结构是javascript UI组件优雅的最重要条件之一,这里使用dl、dt、dd构建选项卡结构(js罗浮宫讨论成果,见司徒正美:jquery tabs插件

以下为引用的内容:

<dl class="artTabs">
<dt id="tabs"><a href="#tabContent1" class="select">link1</a> <a href="#tabContent2">link2</a> <a href="#tabContent3">link3</a></dt>
<dd id="tabContent1" style="display:block">tabContent1</dd>
<dd id="tabContent2">tabContent2</dd>
<dd id="tabContent3">tabContent3</dd>
</dl>

选项卡按钮的锚点都指向内容,这样在脚本与样式失效的情况下仍然能够进行基本的跳转。

二、编写核心javascript代码

接下来就是js编写。使用事件代理机制可以更加高效的处理业务,无需循环遍历操作去给每个按钮绑定事件,也能节省内存:

以下为引用的内容:

// 参数:选项卡按钮外包裹元素, 按钮选中的样式, 初始化选中的按钮索引值(以0开始)
var artTabs = function (bar, className, index) {
var gid = function (id) {return document.getElementById(id)},
buttons = bar.getElementsByTagName('a'),
selectButton = buttons[index],
showContent = gid(selectButton.href.split('#')[1]);

bar.onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement;

if (target.nodeName.toLowerCase() === 'a') {
showContent.style.display = 'none';
showContent = gid(target.href.split('#')[1]);
showContent.style.display = 'block';
selectButton.className = '';
selectButton = target;
target.className = className;
return false;
};
};
};

是不是很小巧?以上代码压缩后貌似只有351字节:

以下为引用的内容:

var artTabs=function(b,c,i,a){var g=function(x){return document.getElementById(x)},s=b.getElementsByTagName('a'),n=s[i],o=g(n.href.split('#')[1]);b.onclick=function(e){e=e||window.e;a=e.target||e.srcElement;if(a.nodeName.toLowerCase()==='a'){o.style.display='none';o=g(a.href.split('#')[1]);o.style.display='block';n.className='';n=a;a.className=c;return false}}}

调用范例:artTabs(document.getElementById(‘tabs’), ‘select’, 0);

查看演示:artTabs1.html

三、优化接口

是否发现这个刚出炉的选项卡参数有点麻烦?如果要支持鼠标靠近触发怎么办?或者点击选项卡的时候要采用ajax加载填充内容要如何处理回调函数?

显然我们前面的API设计并不能优雅的处理这些需求,我们改用字面量的方式传入参数,增加一些新接口,如:

以下为引用的内容:

var artTabs = function (bar, config) {
var gid = function (id) {return document.getElementById(id)};

config = config || {};
var bar = typeof bar === 'string' ? gid(bar) : bar,
className = config.className || 'select',
callback = config.callback || function () {},
isMouseover = config.isMouseover,

buttons = bar.getElementsByTagName('a'),
selectButton = buttons[
config.index ||
function () {
var ret = 0;
for (i = 0; i < buttons.length; i++) {
if (buttons[i].className === className) ret = i;
};
return ret;
}()
],
showContent = gid(selectButton.href.split('#')[1]),
fn = function (event) {
event = event || window.event;
var target = event.target || event.srcElement;

if (target.nodeName.toLowerCase() === 'a') {
showContent.style.display = 'none';
showContent = gid(target.href.split('#')[1]);
showContent.style.display = 'block';
selectButton.className = '';
selectButton = target;
target.className = className;
target.focus();
callback(selectButton, showContent);
return false;
};
};

if (isMouseover) bar.onmouseover = fn;
bar.onclick = fn;// click事件至少能保证手持设备可以使用
};

调用范例:artTabs(‘tabs’);

查看演示:artTabs2.html

四、扩展

原生代码执行效率往往会比框架高,当然我们还是可以很简单写几行代码为jQuery献身,成为其插件:

以下为引用的内容:

jQuery.fn.artTabs = function (config) {
return this.each(function () {
artTabs(this, config);
});
};

调用范例:jQuery(‘.artTabs > dt’).artTabs();

查看演示:artTabs3.html

以上实现了选项卡最基本的功能,如果需要可以连选项卡HTML结构都封装进去、历史记录支持、URL记忆支持、Ajax数据加载支持等……

planeArt原创文章,原文地址://www.planeart.cn/?p=987

  • 为什么说一直辛苦劳作的农民没有富起来?而不说一直勤劳的农民没有富起来? 2019-06-15
  • 刘红:关注乳腺健康 做好体检预防工作 2019-06-11
  • 中国伊斯兰教协会“四进”清真寺活动启动 2019-06-05
  • 我国社会组织正成为全球治理体系中的新生力量 2019-06-05
  • 林肯全新Navigator领航员正式上市 售112.80万元起 2019-05-27
  • “川商走进新经济”第一场活动落幕 2019-05-14
  • 还加上制裁伊朗引起价格飙升的石油战 2019-05-14
  • 青海:52个客运站卫生间将全面改造 2019-05-12
  • 依规治党和依法治国结合的典范 2019-05-12
  • 内蒙古水利厅厅长付万惠接受纪律审查和监察调查 2019-05-11
  • 传销就是利用这种劣根性。 2019-05-08
  • 女性之声——全国妇联 2019-04-22
  • 不忘初心继续前进——七集政论专题片 2019-04-21
  • 百姓故事:摔跤吧!女孩 2019-04-16
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-04-16
  • 排列三走势图和值和尾 2元彩票官网 浙江11选5走势图导航 中国福利彩票开奖查询 香港叶先生六肖中特 刮刮乐彩票有多少种 北京赛车龙虎软件 双色球热码规律 买2元彩票中 十一运夺金任五遗漏 15选5一胆全托 四肖中特期期淮免费公开 江苏体彩e球彩直播 黄金城娱乐场骗人吗 黑金团队快乐8可靠吗