1. ホーム
  2. 質問と答え
  3. spotify apps APIに「カルーセル」のようなウィジェットを作成するにはどうすればよいですか？

spotify apps APIに「カルーセル」のようなウィジェットを作成するにはどうすればよいですか？

2012-01-13 20 views

答えて

3

はい、import/scripts/pagerを使用します。ここでは、「What's New」アプリから抜粋して簡略化した例を示します。あなたのpager.js：

"use strict"; 

sp = getSpotifyApi(1); 
var p = sp.require('sp://import/scripts/pager'); 
var dom = sp.require('sp://import/scripts/dom'); 

exports.init = init; 

function init() { 
    var pagerSection = dom.queryOne('#pager'); 
    var datasource = new DataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); 

    var options = { 
    perPage: 5, 
    hidePartials: true, 
    orientation: 'vertical',  // 'vertical', 'horizontal' 
    pagingLocation: 'top',  // 'top', 'bottom' 
    bullets: false, 
    listType: 'list',    // 'table', 'list' 
    context: 'aToplist'   // some string unique for each pager 
    }; 

    var pager = new p.Pager(datasource, options); 
    pager.h2.innerHTML = "Example Pager"; 
    dom.adopt(pagerSection, pager.node); 
} 

function DataSource(data) { 
    var data = data; 

    this.count = function() { 
    return data.length; 
    }; 

    this.makeNode = function(index) { 
    var dataItem = data[index]; 
    var li = new dom.Element('li'); 

    var nameColumn = new dom.Element('div', { 
     className: 'nameColumn', 
     html: '<div class="nameColumn">'+ 
       '<a href="#" class="name">Name' + dataItem + '</a>'+ 
       '<a href="#" class="creator">Creator' + dataItem +'</a>'+ 
      '</div>' 
    }); 

    dom.adopt(li, nameColumn); 
    return li; 
    }; 
}

あなたのindex.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="pager.css"> 
</head> 

<body onload="sp = getSpotifyApi(1); sp.require('pager').init();"> 
    <div id="wrapper"> 
    <section class="toplists" id="bottomToplists"> 
     <section id="pager" class="playlists playlistsTable toplist"></section> 
    </section> 
    </div> 
</body> 
</html>

そして最後に、あなたのプロジェクトにwhatsnew.cssをコピーしpager.cssに名前を変更します。もちろん、CSSを整理してindex.htmlの要素をアプリケーションに合わせて変更する必要がありますが、これは良い出発点です。

「What's New」アプリには、アルバムアートワークを備えた横型ページャの例もあります。アプリのソースを抽出する方法を理解するにはthis question and answerを見てください。

また、pager.jsがパブリックAPIに含まれるかどうかはわかりません。そうでなければ、あなた自身のページャウィジェットにそれを抽出して、それをとにかく使うことができます。

出典

2012-01-13 14:58:05

関連する問題

 関連する問題