最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

YUI的Tab切换实现代码_YUI.Ext相关

来源:动视网 责编:小采 时间:2020-11-27 20:48:40
文档

YUI的Tab切换实现代码_YUI.Ext相关

YUI的Tab切换实现代码_YUI.Ext相关:Tab切换应该不依赖于HTML结构,能给设计人员和前端开发最大的灵活性。原理:一个tab对象分为控制部分(trigger),内容部分(sheet)。当trigger被触发时,显示对应的sheet。 以前大树写过一个TabControl的代码,经过两年的使用依旧很考谱,说明当初这个思路还是
推荐度:
导读YUI的Tab切换实现代码_YUI.Ext相关:Tab切换应该不依赖于HTML结构,能给设计人员和前端开发最大的灵活性。原理:一个tab对象分为控制部分(trigger),内容部分(sheet)。当trigger被触发时,显示对应的sheet。 以前大树写过一个TabControl的代码,经过两年的使用依旧很考谱,说明当初这个思路还是


Tab切换应该不依赖于HTML结构,能给设计人员和前端开发最大的灵活性。原理:一个tab对象分为控制部分(trigger),内容部分(sheet)。当trigger被触发时,显示对应的sheet。

以前大树写过一个TabControl的代码,经过两年的使用依旧很考谱,说明当初这个思路还是比较符合实际需求的。我改成了基于YUI的版本,可能看起来更清晰一些。先访问测试页面查看效果,完整javascript代码在这里。

注意:改成实际代码时,请将Tab类放在某个命名空间下,不要直接暴露在全局空间中。

1:使用
以下是常用的html结构,但不限于此。
代码如下:

  • t1

  • t2

  • t3



  • s1
    s2
    s3


    对应的javascript代码如下,四种初始化方法都是可以的。

    代码如下:
    var tab = new Tab($D.get('t').getElementsByTagName('li'), $D.get('s').getElementsByTagName('div'));//1
    var tab = new Tab(['t1','t2', 't3'],['s1','s2', 's3']);//2
    var tab = new Tab(['t1','t2','t3'],['s1','s2','s3'],{ triggerEvent:'mouseover',slideEnabled:true});//3
    var tab = new Tab();//4
    tab.add('t1', 's1');
    tab.add('t2', 's2');
    tab.add('t3', 's3');
    tab.config['triggerEvent'] = 'mouseover';
    tab.config['slideEnabled'] = true;
    tab.onShow.subscribe(function(t, a){ ... });
    tab.init();


    2:扩展
    已经实现自动切换功能(默认关闭),另外可以通过onShow自定义事件扩展,也可以在原代码基础上添加更多的自定义事件。

    文档

    YUI的Tab切换实现代码_YUI.Ext相关

    YUI的Tab切换实现代码_YUI.Ext相关:Tab切换应该不依赖于HTML结构,能给设计人员和前端开发最大的灵活性。原理:一个tab对象分为控制部分(trigger),内容部分(sheet)。当trigger被触发时,显示对应的sheet。 以前大树写过一个TabControl的代码,经过两年的使用依旧很考谱,说明当初这个思路还是
    推荐度:
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top