Example:
In scene:
<div x-mojo-element="Button" id="previousStory"></div> <div x-mojo-element="Button" id="nextStory"></div>
In scene assistant:
StoryViewAssistant.prototype.setup = function() {
// Hide Previous Button if first story, and Next Button if last one
if (this.storyIndex > 0) {
this.controller.setupWidget("previousStory",
this.attributes = {
disabledProperty: 'disabled'
},
this.model = {
buttonLabel : "Previous",
buttonClass: '',
disabled: false
});
this.controller.listen('previousStory', Mojo.Event.tap,
this.previousStory.bindAsEventListener(this));
} else {
$('previousStory').hide();
}
if (this.storyIndex < this.storyFeed.stories.length-1) {
this.controller.setupWidget("nextStory",
this.attributes = {
disabledProperty: 'disabled'
},
this.model = {
buttonLabel : "Next",
buttonClass: '',
disabled: false
});
this.controller.listen('nextStory', Mojo.Event.tap,
this.nextStory.bindAsEventListener(this));
} else {
$('nextStory').hide();
}
};
Screenshot (not representative of example above):
Note that the default visual styles can be overridden using CSS.