aralejs / switchable Goto Github PK

不知道 0.9.12 改了啥。

我参照http://aralejs.org/switchable/examples/slide.html这个demo，但是会抛出错误，在chrome下的问题截图是chrome.png,在firefox下出现的问题如firefox.png所示

。
我在初始化时的代码是跟线上的demo一模一样的。

.

ui-switchable-active

from alipay/arale#172

http://aralejs.org/switchable/tests/runner.html

有全局变量泄露。

之前想到的几点需求, 看看是否有必要加:

1. Switchable 中每屏中添加分层动画, 添加个 layer 的 plugin 形式
2. 响应式动态调整宽高
3. 兼容手机端浏览器
4. 动态添加/删除 triggers or panels
5. datalazyload

bugfix:

• 无缝切换

http://rightjs.org/ui/billboard/demo 第一个。

我有两个问题想请教一下，应该不算是提bug：
1.我使用tabs控件，我想问下是否支持动态添加和关闭标签页的功能。
2.控件好像没有默认的样式，需要自己单独引入，是吗？

代码也没有。。

$ spm install arale-switchable
download: http://spmjs.io/repository/arale-switchable/1.1.0/arale-switchable-1.1.0.tar.gz
        extract: ~/.spm/cache/arale-switchable-1.1.0.tar.gz
      installed: $CWD/spm_modules/arale-switchable/1.1.0
        depends: [email protected], [email protected], [email protected]
...
$ ll -a spm_modules/arale-switchable/1.1.0
total 40
drwxr-xr-x  7 hotoo  staff   238B  9 22 21:50 .
drwxr-xr-x  3 hotoo  staff   102B  9 22 21:50 ..
-rwxr-xr-x  1 hotoo  staff   139B  9 22 21:50 .gitignore
-rwxr-xr-x  1 hotoo  staff   273B  9 22 21:50 .travis.yml
-rwxr-xr-x  1 hotoo  staff   1.7K  9 22 21:50 HISTORY.md
-rwxr-xr-x  1 hotoo  staff   6.7K  9 22 21:50 README.md
drwxr-xr-x  4 hotoo  staff   136B  9 22 21:50 examples

我在同一个页面中使用了tabs组件和slide组件，代码如下：

var marketTrends = new Slide({
    element:'#slide-market',
    effect:'scrolly',
    interval:5000,
    autoplay:true,
    circular:true,
    easing:'easeBoth',
    hasTriggers:true
}).render();

var tabs = new Tabs({
    element: '#banner',
    triggers: '.ui-switchable-nav li',
    panels: '.ui-switchable-content div',
    activeIndex: 0,
    autoplay:true,
    interval:1000,
    circular:true,
    effect: 'fade'
});

结果，两个组件都会给自己的panels设置类名：ui-switchable-panel，
然后悲剧发生了，两个组件开始互相调用彼此的 ui-switchable-panel，tabs以为自己的panels有自身+slide个。slide的ui-switchable-panel也会被tabs给隐藏掉。

目前好像只有 multiple: true 的情况下可以全关闭，multiple: false 的情况下最后一个关不掉。

如果初始化的时候设 activeIndex: -1，效果是全关闭，但因为不可能 switchTo(-1)，所以再也达不到这个全关闭的状态了。

具体的需求是在tab中切换图表，切换才去加载，用display控制图表画出来大小有问题，也不想用fade，因为在ie下切换比较慢，会有重叠的情况，现在是自己写的：

              if (fromPanel[0]) {
                 toPanel.css({
                    opacity: 1 ,
                    position: 'absolute',
                    zIndex:  9 
                });
                fromPanel.css({
                    opacity: 0,
                    position: 'absolute',
                    zIndex:  1
                });

TypeError: this.stop is not a function
[在此错误处中断]     
this.stop();

http://aralejs.org/switchable/examples/switchable.html

直接firebug查看

DATA-API 中, 设置的 data-role 应该换成 data-switchable-role, 以对应于 data-widget-role

设为relative较为稳妥。

Carousel 中的134217726px 在360 6.3版本的浏览器下是不支持的 改成小点的值就可以了，浏览器对width和height支持的最大值不是统一的哦！！！

Carousel在360安全浏览器下无法正常演示，官方演示也出现了bug额……

举例来说：
$(".J_slide").each(function(){
new Slide({
element: this,
panels: '.img_contain li',
activeTriggerClass: 'hover',
effect: 'fade',
easing: 'easeOutStrong',
interval: 2000
}).render();
});

我理解的panels，应该是当前J_silde这个类下面的img_contain类下面的li元素，但实际是找的是所有的document下面的

这个版本中加入了 unload 时的资源销毁。Firefox 浏览器（发现问题的浏览器是 Firefox 20.0.1）使用一些组件的时候，如：Switchable，提到的 destroy() 方法会在初始化之前就被调用一次，所以会有页面报错如下：

如题，通过Switchable组件生成的代码总是会加上ui-switchable-的class，看着难受:(

可否通过配置项的形式干掉，比如navClass之类的

如题，现在circular设置true和false，自动播放的时候最后一屏回到第一屏的动画是反方向过度的，没有无缝无限滚动的感觉，除了Carousel组件上下按钮点击能感觉到效果外，其他组件里感觉到circular参数就是个摆设，很鸡肋，是否在autoplay里播放到最后一页的时候判断circular是否设置调用不同的处理方式呢？

直接使用slider时发现scrolx有问题,它总是把panel自动调整到left=0时,再开始滑动;
而在显示区域上来说,应该是以viewsize(或是content)这个中间区域块为参考点来滑动,而不是最左边;
虽然它滑动的的每次位移是正确的;但是参考点不对了,在可见区域上可能出现图片某边进入遮罩区了.

这样会影响页面布局。

https://github.com/aralejs/switchable/blob/master/src/plugins/effects.js#L131

应该在这句话后面加上 fromPanel.css('display: none');

新建1.1.0分支，代码将提交在这里

文档：

• https://github.com/aralejs/switchable/blob/1.1.0/README.md
• https://github.com/aralejs/switchable/blob/1.1.0/docs/simple.md

和原来相比的几个修改点（均可讨论）：

• 将核心功能和主要功能分开，提供精简版，方便不同场景使用（2者差异见文档）。tab基于精简版，而 slide 与 carousel 基于完整版。
• 暂时先不实现 accordion 模块（在基础上可以快速添加）
• 增加 延时加载 功能（api设置参考 kissy，采用 textarea 存放 html 代码）
• carousel模块增加高宽自适应功能（简单的适应响应式布局）
• 需要js代码里追加class的处理（这个还没完全想清楚）

@lizzie @afc163 @popomore

这个修改影响到 @lianqin7 他们了. 暂时先改回来. 以后要改的话, 所有组件一起改.

#20 这个问题已经修复过了，后来重构貌似又被还原了，现在自动播放没有问题，但是有导航按钮切换的话从第一页切换到最后一页是有些问题的，从最后一页到第一页没有问题~

switchable组件在setup方法里就调用了render方法，和其他widget的生命周期管理有不同，影响了整个arale组件的一致性，是否能把render方法放出来，用new Widget().render()的方式代替

#27 还是这个问题，今天终于明白哪里不对了,看图先~

按右边的>进行操作，画面向左一直循环，这里没有问题！
然后测试左边<按钮，理论和用户感觉上都应该是画面向右一直循环，但是现在确是：当切换首页和尾页的时候滚动方向会改变，而且会一次性滚动几个屏幕！
纠结啊~

Carousel.js,因为在项目中经常的需求是，panels != step * n，这样就会导致element出现空白，而不是真正的无缝切换，请问这个问题应该怎样解决呢？

issue #32
code: https://github.com/aralejs/switchable/blob/master/src/switchable.js#L99

如题，或者有什么变通的方式。

widget升级到1.0.0后，对于data-api中的role部分需要手动进行处理.

RT

从整个交互形式上来说，accordion 更像是 toggle 而不是 switch 。
当初将 accordion 设计进 switchable 是看中了switchable 的什么功能？

@lifesinger @lizzie @leoner

https://github.com/aralejs/switchable/blob/master/src/plugins/effects.js#L56

因为写死了宽度是 9999px，在某些页数非常多（宽度超过9999px）的情况下，容器无法盛下。

个人建议，让这个数字 可配置

@lizzie

https://github.com/aralejs/switchable/blob/master/dist/switchable-debug.js

这个文件里面有好几个define方法，是否符合规范？

require这个文件出来的对象，是const.js里面的那个object。

360浏览器 6.2版本 急速模式下
如果配置参数的effect为scrollx时，SPM上默认设置#content的宽度为134217726px，但是在GitHub中effects.js#L59中，却写到：

// 水平排列
if (effect === SCROLLX) {
    panels.css('float', 'left');
    // 设置最大宽度，以保证有空间让 panels 水平排布
    // 35791197px 为 360 下 width 最大数值
    content.width('35791197px');
}

请及时更新SPM上的信息

1. 我的页面有12组需要轮播的地方，都是相同的dom结构
2. 一开始我是这样初始化的

  $('.the-same-top-class').each(function(index, element) {
    new Switchable({
        panels: $(element).find('.content'),
        triggers: $(element).find('.triggers'),
        activeTriggerClass: 'trigger-selected',
        autoplay: true,
        circular: true,
        interval: 2500,
        effect: 'scrollx',
        duration: 300,
        delay: 500
    }).render();
    ...
 })

，因为switchable 的 triggers 参数 和 pannels 参数除了接受 字符选择器之外还支持jQuery数组，所以我是传入了数组，因为dom结构都一样，要是传入字符选择器的话会混乱
3. 但是页面初始化成功之后轮播在没有发生页面滚动的时候是正常的
4. 页面发生滚动后，轮播就不再自动播放了
5. debug源码之后发现，问题出现在 ’arale/switchable/1.0.2/plugins/autoplay-debug‘ 的 install 函数里面
6. 问题代码在这里

 // 滚出可视区域后，停止自动播放
            this._scrollDetect = throttle(function() {
                console.log($(element).html());
                console.log(isInViewport(element) ? "start" : "stop");
                // 不自动播放的时候，输出这里的element，指向的不是轮播的 viewport ，而是一个空的 div
                that[isInViewport(element) ? "start" : "stop"]();
            });

1. 在页面有多个相同结构的dom需要用到switchable的时候，初始化switchable的时候如果没有明确的指定 element 参数，则这里的 element 会指向一个空的div，导致页面一旦发生滚动，这个 that[isInViewport(element) ? "start" : "stop"](); 会一直返回 stop ，因为那个空的 div 根本就不在 viewport 里。
2. 翻开官方文档 http://aralejs.org/switchable/#配置说明 配置说明里也没有 element 这个参数说明
3. 只有这里才有 http://aralejs.org/switchable/#tabs-普通标签页 关于 element 这个参数的说明
4. 综上所述，当页面有多个相同结构 dom 需要用 js 初始化 switchable 这个组件的时候，除了 triggers pannels 这两个参数需要唯一之外，还需要指定对应的 父级 element 参数，要不自动播放会失效，不知道是不是个 bug ，此坑已踩，望加文档或修正，避免他人再踩。

Carousel组件的配置写明可以配置prevButtonClass和nextButtonClass，但是其实不支持
`
//Carousel组件的attrs：
module.exports = Switchable.extend({

    attrs: {
        circular: true,

        prevBtn: {
            getter: function(val) {
                return $(val).eq(0);
            }
        },

        nextBtn: {
            getter: function(val) {
                return $(val).eq(0);
            }
        },

        _isNext: false
    },

`

是否考虑增加 动态add/remove 的接口？

@lizzie

Carousel的demo，在第一屏单击“上一页”时，出现滚动了一个空白屏的问题（demo中为向右滚动）

jquery.switchable

http://spmjs.io/docs/arale-switchable/examples/index.html

这个组件的demo挂掉了。

现在自动生成nav默认生成在element最下面，无法定制到指定元素，这个需求还是有的！