Spotify Apps API Tutorials

Getting started

Playing music

Searching

Playlists

Interacting with Facebook

Experimental

Handling arguments and creating navigational tabs

In the manifest.json file, you can update the DefaultTabs property with arguments that corespond to nagivational tab names. In the Application class, when tabs are clicked, the arguments property is updated. In this example, we are simply showing and hiding a <div /> element each time the arguments are updated.

The manifest.json snippet

{
    ...
    "DefaultTabs": [
        {
            "arguments": "index",
            "title": {
                "en": "Home"
            }
        },
        {
            "arguments": "tabs",
            "title": {
                "en": "How to use tabs"
            }
        }
    ],
    ...
}

The Javascript

sp = getSpotifyApi(1);   
var models = sp.require('sp://import/scripts/api/models');

tabs(); // See function definition below

/* When a user clicks a tab, the "arguments" property on the 
 * Application object changes, and the tabs() function fires */               
models.application.observe(models.EVENT.ARGUMENTSCHANGED, tabs);  

function tabs() {
    var args = models.application.arguments;
    $('.section').hide(); // Hide all sections
    $('#'+args[0]).show(); // Show the current section
}

The HTML

<div id="index">

</div>

<div id="tabs">

</div>
tabs(); models.application.observe(models.EVENT.ARGUMENTSCHANGED, tabs); function tabs() { var args = models.application.arguments; console.log(args[0]); $('.section').hide(); $('#'+args[0]).show(); } });

Spotify Apps API Tutorials

Getting started

Playing music

Searching

Playlists

Interacting with Facebook

Experimental

Handling arguments and creating navigational tabs

In the manifest.json file, you can update the DefaultTabs property with arguments that corespond to nagivational tab names. In the Application class, when tabs are clicked, the arguments property is updated. In this example, we are simply showing and hiding a <div /> element each time the arguments are updated.

The manifest.json snippet

{
    ...
    "DefaultTabs": [
        {
            "arguments": "index",
            "title": {
                "en": "Home"
            }
        },
        {
            "arguments": "tabs",
            "title": {
                "en": "How to use tabs"
            }
        }
    ],
    ...
}

The Javascript

sp = getSpotifyApi(1);   
var models = sp.require('sp://import/scripts/api/models');

tabs(); // See function definition below

/* When a user clicks a tab, the "arguments" property on the 
 * Application object changes, and the tabs() function fires */               
models.application.observe(models.EVENT.ARGUMENTSCHANGED, tabs);  

function tabs() {
    var args = models.application.arguments;
    $('.section').hide(); // Hide all sections
    $('#'+args[0]).show(); // Show the current section
}

The HTML

<div id="index">

</div>

<div id="tabs">

</div>