Stock Widgets

Stock Widgets

Stock widgets are built into every flex app, and can be used without loading any additional scripts or resources on your website. You can add them to your page with any of the widget display methods, and theme them with your own css. They are provided as an easy way to get basic interface elements into your webpages with minimal effort.

Are you handy with HTML? Read our themers guide for information on how to create your own new interfaces on the fly!

Sandbox

Open SandboxWant to get hands on with the flex framework? Use any of the html examples from this guide in our sandbox!


Playbar: playbar

The playbar is a widget that contains standard music player controls (play, pause, previous, and next). It also has a play head scrubber, a volume control slider, and an optional button that can be used to open the fullscreen mode of the app.

Settings:

width:Integer Optional Controls the width of the widget as it's rendered.
fullscreen:Boolean Optional If set to 'false', the fullscreen button will not appear.
theme:String Optional Specify a custom theming prefix for the widget.

Embed Example:
<div data-bbflex="widget:playbar,width:500"></div>
Theme & Structure
This widget can be used "out of the box". If no custom theme prefix is specified in the settings, it will inherit default theming from the framework. The following html elements are created inside the widget container.
<div class="fw-interface-controls-wrap fw-jplayer-interface">
  <div class="fw-controls">
    <a class="fw-previous jp-button" ><i class="flexicon-fast-bw"></i></a>
    <a class="fw-play jp-button"><i class="flexicon-play"></i></a>
    <a class="fw-pause jp-button"><i class="flexicon-pause"></i></a>
    <a class="fw-next jp-button"><i class="flexicon-fast-fw"></i></a>
    <span class="divider"></span>
  </div>
  <div class="fw-progress-container">
    <div class="fw-progress">
      <div class="fw-seek-bar">
        <div class="fw-play-bar">
          <div class="bullet">
            <div class="fw-current-time"></div>
          </div>
        </div>
      </div>
    </div>
    <span class="divider"></span>
  </div>
  <div class="fw-volume-bar-container">
    <a class="fw-mute"><i class="flexicon-volume-up"></i></a>
    <a class="fw-unmute"><i class="flexicon-volume-down"></i></a>
    <div class="fw-volume-bar">
      <div class="fw-volume-bar-value">
        <div class="bullet"></div>
      </div>
    </div>
  </div>
  <div class="fw-full-screen-container">
    <a class="fw-fullscreen jp-button"><i class="fwicon-resize-full"></i></a>
  </div>
</div>

Progressbar: progressbar

The progress bar is a widget that includes the total time of the currently playing song, the current play head position, and a progress indicator.

Settings:

width:Integer Optional Controls the width of the widget as it's rendered.
height:Integer Optional Controls the height of the widget as it's rendered.
theme:String Optional Specify a custom theming prefix for the widget.

Embed Example:
<div data-bbflex="widget:progressbar,width:500"></div>
Theme & Structure
This widget does not include any default theming. It is meant to be included as part of a larger interface and themed according to the manner in which it is used. The primary benefit to using this widget is that it's already composed and linked to the music play head in the application. All you need to do is provide the css styles.
<div class="fw-interface-controls-wrap fw-jplayer-interface">
  <div class="fw-progress-container">
    <div class="fw-current-time"></div>
    <div class="fw-progress">
      <div class="fw-seek-bar">
        <!-- The width of the "fw-play-bar" is sync'd with the play head -->
        <div class="fw-play-bar">
          <div class="bullet"></div>
        </div>
      </div>
    </div>
    <div class="fw-duration"></div>
  </div>
</div>

Cart: cart

The cart widget displays the name, quantity, price, and license type of all the beats currently in the users shopping cart. Clicking on an item will show that items details in a modal dialog.

Settings:

width:Integer Optional Controls the width of the widget as it's rendered.
height:Integer Optional Controls the height of the widget as it's rendered.
scroll:Boolean Optional Default: false. If set to true, the widget will be a fixed height with scrollbars.
theme:String Optional Specify a custom theming prefix for the widget.

Embed Example:
<div data-bbflex="widget:cart,width:500,height:300,scroll:true"></div>
Theme & Structure
<div class="fw-cart-item-list">
  <div class="fw-cart-item">
    <div class="fw-cart-item-wrapper">
      <div class="fw-cart-item-qty"></div>
      <div class="fw-cart-item-price"></div>
      <div class="fw-cart-item-title"></div>
      <div class="fw-cart-item-model"></div>
    </div>
  </div>
</div>

Playlist: playlist

The playlist widget displays the name of all the beats in the selected playlist. It also supports dynamic loading of additional beats in the playlist if it's scrolled to the bottom. Clicking the name of a beat will begin playing that beat.

Settings:

width:Integer Optional Controls the width of the widget as it's rendered.
height:Integer Optional Controls the height of the widget as it's rendered.
scroll:Boolean Optional Default: false. If set to true, the widget will be a fixed height with scrollbars.
playlist:String Optional Default: current playlist. You can provide the id to a specific playlist to show.
theme:String Optional Specify a custom theming prefix for the widget.

Embed Example:
<div data-bbflex="widget:playlist,width:500,height:100,scroll:true"></div>
Theme & Structure
<ul class="fw-playlist-items">
  <!-- The "fw-playlist-current" class will only apply to the active beat -->
  <li class="fw-playlist-current"><a>Beat Title</a></li>
</ul>
<div class="fw-playlist-loading"><i class="fwicon-down-dir"></i> Load More...</div>

Playlists: playlists

The playlists widget displays the name of all the playlists available in your app, grouped together by category. Clicking the name of a playlist will make it the active playlist.

Settings:

width:Integer Optional Controls the width of the widget as it's rendered.
height:Integer Optional Controls the height of the widget as it's rendered.
scroll:Boolean Optional Default: false. If set to true, the widget will be a fixed height with scrollbars.
theme:String Optional Specify a custom theming prefix for the widget.

Embed Example:
<div data-bbflex="widget:playlists,width:500,height:200,scroll:true"></div>
Theme & Structure
<div class="fw-playlists">
  <span class="group-title"></span>
  <!-- The "active-playlist" class only applies to the active playlist! -->
  <div class="fw-list-title active-playlist">
    <span class="fw-list-count"></span>
    <i class="fwicon-music"></i>
    <span data-bind="text: title"></span>
  </div>
</div>

Licensing Options: licensing

The licensing widget displays a list of all the currently available licensing options (name, price, details link) for the currently playing beat. Clicking the item will allow the user to add the item to cart.

Settings:

width:Integer Optional Controls the width of the widget as it's rendered.
height:Integer Optional Controls the height of the widget as it's rendered.
scroll:Boolean Optional Default: false. If set to true, the widget will be a fixed height with scrollbars.
theme:String Optional Specify a custom theming prefix for the widget.

Embed Example:
<div data-bbflex="widget:licensing,width:500,height:200,scroll:true"></div>
Theme & Structure
<div class="fw-buynow-licenses nowplaying-licenses">
  <div class="fw-buynow-license">
    <i class="fw-buynow-license-icon icon-tag"></i>
    <div class="fw-buynow-addtocart"><i class="icon-forward"></i> View Details</div>
    <div class="fw-buynow-license-name"></div>
    <div class="fw-buynow-license-price"></div>
  </div>
</div>