FuelUX

Spinner

  • To use FuelUX spinner you should include assets/js/fuelux/fuelux.spinner.min.js
  • For more info and options about it please see its page:
    http://exacttarget.github.io/fuelux/#spinner
  • For ease of use, I have made a wrapper for the plugin with some extra options:
     
    
    $('#my-spinner').ace_spinner({
                min: 0,
                max: 100,
               step: 1,
    
            icon_up: 'fa-plus',
          icon_down: 'fa-minus',
       btn_up_class: 'btn-success',
     btn_down_class: 'btn-danger',
    
           on_sides: true
    });
    
  • Extra options are :
    1. icon_up the icon to be used for "up" button
    2. icon_down the icon to be used for "down" button
    3. btn_up_class the button class for "up" button
    4. btn_down_class the button class for "down" button
    5. on_sides up and down buttons will be on different sides of input
    6. touch_spinner bigger buttons will be used
  • You can also use the following functions to modify spinner element:
    $('#my-spinner').ace_spinner('disable');
    $('#my-spinner').ace_spinner('enable');
    $('#my-spinner').ace_spinner('value', 3);
    
  • Please note that if you want more advanced functionality, you can use jQuery UI's spinner

Wizard

  • To use FuelUX wizard you should include assets/js/fuelux/fuelux.wizard.min.js
  • For more info and options about the plugin please see plugin's page:
    http://exacttarget.github.io/fuelux/#wizard
  • For ease of use, I have made a wrapper for the plugin
  • The format of your steps HTML should be something like this:
     
    • 1 Step1
    • 2 Step2
    It's a ul.wizard-steps wrapped inside an element with a data-target which points to our steps container.
  • Steps container is a .step-content which contains several .step-pane elements each with a specific id:
  • A .wizard-actions element containing .btn-prev and .btn-next buttons should be a sibling of steps container:
    .btn-next should have a data-last attribute which is "finish" button's text at final step
  • Use the following code to initiate the wizard:
    $('#my-wizard')
    .ace_wizard({
      //step: 2 //optional argument. wizard will jump to step "2" at first
    })
    .on('change' , function(e, info) {
       //info.step
       //info.direction
    })
    .on('finished', function(e) {
       //do something when finish button is clicked
    }).on('stepclick', function(e) {
       //e.preventDefault();//this will prevent clicking and selecting steps
    });
    
  • There are several functions available for wizard element which you can use like the following example:
     var wizard = $('#my-wizard').data('wizard');
    
     //move to step 3
     wizard.currentStep = 3;
     wizard.setState();
     
     //determine selected step
     wizard.selectedItem().step
    

Treeview

  • To use FuelUX tree you should include assets/js/fuelux/fuelux.treeview.min.js
  • For more info and options about the plugin please see plugin's page:
    http://exacttarget.github.io/fuelux/#tree
  • For ease of use, I have made a wrapper for the plugin and added a few extra options
  • Extra options are:
    1. open-icon The icon for an open tree node
    2. close-icon The icon for a closed tree node
    3. selectable Whether items are selectable or not
    4. selected-icon Icon for a selected tree node
    5. unselected-icon Icon for a non-selected tree node
  • A basic tree is initiated like this:
     
    $('#tree1').ace_tree({
           dataSource : treeDataSource ,
          multiSelect : true,
          loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
      
          'open-icon' : 'ace-icon tree-minus',
         'close-icon' : 'ace-icon tree-plus',
         'selectable' : true,
      'selected-icon' : 'ace-icon fa fa-check',
    'unselected-icon' : 'ace-icon fa fa-times'
    });
    
  • Two additional icon classes are defined for tree: .tree-minus and .tree-plus

Data Source

  • In the demo example, dataSource is inside static Javascript file:
    assets/js/fuelux/data/fuelux.tree-sample-demo-data.js
  • An example of a data source dynamically loading data from server is included in examples/treeview.html
  • You can use additionalParameters parameter to include optional data, for example setting item-selected:true will mark the item as selected upon insertion into tree.
    Other extra info you can save inside additionalParameters is id, title, etc ...
  • Basically you should define a create dataSource object with a data function which is called by the plugin when a subtree is requested:
    function DataSourceTree(options) {
       this.url = options.url;//the options you later want to use, for example remote script's url
       this.data = function(options, callback) {
          //retrieve data according to "options" parameters
          //and when data is loaded, call "callback"
       }
    }
    $('#treeview').ace_tree({
     dataSource: new DataSourceTree({url: 'treeview.php'})
     //other options
    });
    
  • To get the list of user selected items and posting it to server, you can do the following:
    var tree = $('#treeview').data('tree');
    var items = tree.selectedItems();
    //for example convert "items" to a custom string
    for(var i in items) if (items.hasOwnProperty(i)) {
       var item = items[i];
       output += item.additionalParameters['id'] + ":"+ item.name+"\n";
    }
    //send output to server