[转]jQuery.flickable での覚え書き

結局フリックエリア内のリンクの挙動に難があるということで使用しなかった jQuery.flickable ですが、使用しないという判断に至ったところまではページ内に複数設置可能、ページネーションの実装などをしていたので、一応忘れないように…

$('.flickableblock').each(function(){ // 複数フリックエリア対応
    var element = $(this).find('.flickable').flickable({
        section: 'li'
    });
    $(this).find('.flickable li').each(function(idx){
        $(this).closest('.flickableblock').find('.flickablenavi').append('<a href="#" title="'+(idx+1)+'">●</a>');
    }); //ページネーションインターフェース生成
     
    $(this).find('.flickablenavi a:first').addClass('active');
    $(this).find('.flickable').bind('flickchange', function(event, ui) {
        var num=$(this).find('li').index(ui.newSection); //現在のセクション番号取得
        $(this).parent().find('.flickablenavi a').removeClass('active');
        $(this).parent().find('.flickablenavi a:eq('+num+')').addClass('active');
        });
    $(this).find('.flickablenavi a').click(function() {
        var index = $(this).attr('title') - 1;
        element.flickable('select', index); //ページネーションインターフェースでの移動
    });
    $(this).find('.flickable li a').click(function() {
        var href_text= $(this).attr('href');
        alert(href_text)
        location.href=href;
    });
});

現在のセクション番号の取得は悩みました…プログラマじゃないので。

 

转自：http://www.days.jp/blog/2012/02/jquery-flickable-%E3%81%A7%E3%81%AE%E8%A6%9A%E3%81%88%E6%9B%B8%E3%81%8D/