jquery-slideshowの話をもうちと突っ込んでみる。
jquery-slideshowの話をもうちと突っ込んでみる。
概要
articleを羅列しただけに近いHTMLをパースし、指定スライドだけを表示する。
また表示する際に、エフェクトををかませる。
こちらで利用しているのは、jQueryの簡易アニメーションと、history.pushStateによるURL書き換え。
URLを書き換えて、スライド番号を記録しているのです。
だってほら、途中でネットワークが切れた時1番最初のページからやり直しとかやりたくないじゃない。
ちなみにコンテンツは1枚のHTMLに収まっており、かつ、このplugin中では通信を行わない(あくまで"location.pathname"からURLを取得・history.pushStateで書き換えるだけ)なので、途中で回線きれても何ら問題はない。
そのぶん、ブラウザーの制限を受けるのはわかっているんだけど。
下記に記載したソースが、当pluginの主要部分であるSlideShowクラスです。
ページの初期化、ページ番号の取得、ページの切り替え、次・前のページへの移動を担っている。
jquery-pluginとしてやっていることは、初期化と、書くコントローラへのバインドだけ。
簡単でしょ? 僕はこれに(0から考えると)2日くらいはかけたんだぜ・・・。
以下のソースはこの記事の初回投稿時のものである。
(function($){ var SlideShow = function(){ this.paths = []; this.page = 0; }; SlideShow.prototype.init = function(config){ this.section = $(config.section_tag); this.title = this.section.children(config.title_tag); this.contents= $(config.content_tag); var contents = this.contents; var pages = [this.title]; for (var cnt=1; cnt <= contents.length; cnt++) { pages[cnt] = $(contents[cnt-1]).hide(); } for(var cnt=0; cnt < pages.length; cnt++) { pages[cnt] .bind('slide:hide', config.hide) .bind('slide:show', config.show); } this.pages = pages; }; SlideShow.prototype.getPage = function(path) { var paths = path.split('/'); var page = paths[4]; paths.splice(4,1); this.paths = paths; return page; }; SlideShow.prototype._setPushState = function() { var page = this.page; var push_path = this.paths.join('/')+'/'+page; window.history.pushState({curr_page:page}, document.title, push_path); }; SlideShow.prototype.changePage = function(page, handler) { var pages = this.pages; if (!page) page = 0; if ((page >= pages.length) || (page < 0 && handler == 'back')) return; var prev_page = this.page; if (prev_page === undefined) prev_page = 0; pages[prev_page].trigger('slide:hide'); pages[page].trigger('slide:show'); this.page = page; this._setPushState(); }; SlideShow.prototype.backPage = function(path) { var curr_page = this.getPage(path); this.changePage(--curr_page, 'back'); }; SlideShow.prototype.nextPage = function(path) { var curr_page = this.getPage(path); this.changePage(++curr_page, 'next'); }; var sl = new SlideShow(); $.slideShow = function(config){ var config = $.extend({ section_tag: 'section', title_tag : ':not(article)', content_tag: 'article', hide: function(e){$(this).hide('slow');}, show: function(e){$(this).show('slow');}, }, config); sl.init(config); var pathname = location.pathname; var curr_page = sl.getPage(pathname); sl.changePage(curr_page); return sl; }; }(jQuery));