Skip to content

ShowHide

Jamie Copeland edited this page May 7, 2013 · 2 revisions

ShowHide

Adds default, but overridable, show and hide funationality to views.

Getting Started

ShowHide is extremely simple to use in its default mode, especially when paired with Backbone. Simply mix it in to your view prototype and any instances created will have show() and hide() methods that affect the view's DOM element's opacity.

Using Backbone

// Create a view
var TestView = Backbone.View.extend(
  {
    el:'#test-view',
    initialize: function(){
      this.$el.html('<h1>ShowHide mixin test</h1>');
    }
  }
);

// Mixin the ShowHide functionality into the TestView prototype
_.defaults(TestView.prototype, ShowHide);

// Create an instance of the view
var myView = new TestView();

// Hide the view immediately
myView.hide(true);

// Show the view with a transition two seconds later
setTimeout(function(){ myView.show(); }, 2000);

Using other frameworks

ShowHide's default mode is to assume that Backbone is being used, and that there is a DOM element it can reference via the $el property of the view instance

If you are using a framework other than Backbone, there are two referencing options:

  1. Set the transitionableDOMElement property of your view to a JQuery wrapped version of the view's DOM element.
// From inside the view
this.transitionablDOMElement = this.jQueryWrappedDOMElement;


// From outside the view
myView.transitionablDOMElement = $('#test-view');

  1. Override the getTransitionableDOMElement() method of your view, returning a JQuery wrapped version of the view's DOM element.
getTransitionableDOMElement: function(){
    return this.jQueryWrappedDOMElement;
}

Default transitions

The default mechanism for showing and hiding is to adjust the opacity of an element. This can be done either immediately, or over time using a transition.

Showing with and without a transition

The two primary methods show() and hide() both accept one optional boolean argument, doImmedately.

// Show the view with a transition
myView.show();

// Show the view immediately
myView.show(true);

Changing default transition durations

As well as turning default transitions on and off, their durations can be adjusted:

Changing the transition duration per instance

myView.showTransitionDuration = 3000;
myView.hideTransitionDuration = 1000;

Changing the transition duration per prototype

var TestView = Backbone.View.extend(
  {
    el:'#test-view',
    showTransitionDuration: 3000, 
    hideTransitionDuration: 1000, 
    initialize: function(){
      this.$el.html('<h1>ShowHide mixin test</h1>');
    }
  }
);
_.defaults(TestView.prototype, ShowHide);

Custom transitions

Custom transition can be implemented by overriding the following methods:

  • showWithTransition()
  • showWithoutTransition()
  • hideWithTransition()
  • hideWithoutTransition()

Special care should be taken to ensure that calls to onPreShowStart(), onPreShowComplete(), onPreHideStart(), onPreHideComplete() are made, as these activate internal hooks for callbacks and event triggering.

The simplest way to ensure this is the copy and paste the default methods from ShowHide into your view class and modify the calls to JQuery's css() and animate() methods.

[More detailed documentation required for custom transitions]

Something went wrong with that request. Please try again.