OVirt / jQuery components

1 Sample Code
2 screenshots

Sample Code

facebox

     # bind links w/ rel=facebox property to js facebox launcher
     $('a[rel*=facebox]').livequery(function() {$(this).facebox();},function(){});

     # brings up google in a popup facebox when link is clicked
     <a href="http://google.com" ref="facebox[.bolder]">google</a>

[edit]

flexigrid

     # define a container div for the grid
     <table id="widgets_table" style="display:none"></table>

     # javascript code that will populate the grid
     <script type="text/javascript">

      # bind grid to table
      $("#widgets_table").flexigrid
      ({
        # set url to get data and the data type returned
        url: 'http://widgets.domain.com/get_json_widgets'
        dataType: 'json',
        width: 700,

        # specify columns that make up the grid
        colModel : [
            {display: 'Name', name : 'widget_name', width : 60, align: 'left'},
            {display: 'UUID', name : 'uuid', width : 180, align: 'left'}
            {display: 'Status', name : 'wstatus', width : 110, align: 'right'},

            # populate this column dynamically through js
            {display: 'Load', name : 'load_average', width: 180, sortable : false, align: 'left', process: widget_table_load_col }
        ],

        # default sort name / order
        sortname: "widget_name",
        sortorder: "asc",
        usepager: true,

        # callbacks method to be invoked on row selection
        #onDeselect, onHover, onUnhover, etc callbacks also available
        onSelect: on_select;
      });
      
      function on_select(selected_rows)
      {
        # do something w/ selected rows
      }

      function widget_table_load_col(celDiv)
      {
         $(celDiv).html('<div>Some dynamically generated content</div>'); 
      };
    </script>

[edit]

jquery.flash

      # div to populate w/ flash content
      <div id="flex_history_chart"></div>

      # grab 
      <script type="text/javascript">
      $(document).ready(function(){
         $('#flex_history_chart').flash(
                 {
                   src: '<%=flash_path("flexchart")%>',
                   width: 720,
                   height: 380,
                   wmode: 'transparent',
                   menu: false,
                   flashvars: { flexchart_data: "http://mysite.com/ovirt/graph/flexchart_data/cpu/average" }
                 },
                 { version: 9 }
             );
         });
      </script>

[edit]

jquery.jgrowl

      $.jGrowl("message to be displayed to user")

[edit]

jquery.ui.tabs

     # setup list of elements to appear on tabls
     <ul id="hardware_nav_tabs">
       <li><a href="http://mysite.com/ovirt/hardware/1" title="content area">Summary</a></li>
       <li><a href="http://mysite.com/ovirt/hardware/1/hosts" title="content area>Hosts</a></li>
       <li><a href="http://mysite.com/ovirt/hardware/1/storage" title="content area">Storage</a></li>
       <li><a href="http://mysite.com/ovirt/hardware/1/vms" title="content area">Virtual Machine Pools</a></li>
       <li><a href="http://mysite.com/ovirt/hardware/1/users" title="content area">User Access</a></li>
       <li><a href="http://mysite.com/ovirt/hardware/1/tasks" title="content area">Tasks/a></li>
     </ul>

     # area in which tab content will be displayed
     <div id="content_area"></div>

     # bind list to jquery ui tabls
     <script type="text/javascript">
       $(document).ready(function(){
         $("#hardware_nav_tabs").tabs();
       });
     </script>

[edit]

ovirt.tree

     <script type="text/javascript">
         $(document).ready(function(){
           recursiveTreeTempl = TrimPath.parseDOMTemplate("nav_tree_template");
           treeItemTempl = TrimPath.parseDOMTemplate("nav_tree_updater_template");
           urlObj = {
             "HardwarePool" :   "http://mysite.com/ovirt/hardware/show",
             "VmResourcePool" : "http://mysite.com/ovirt/resources/show",
             "SmartPool" :      "http://mysite.com/ovirt/smart_pools/show",
             "DirectoryPool" : null
           }
           tree_url = "http://mysite.com/ovirt/tree/return_filtered_list",
     
           # update the tree
           processTree();
     
           # set periodic tree updates
           treeTimer = setInterval(processTree,15000)
        }
     </script>
     <form id="nav_tree_form">
       <div class="nav-tree">
         <ul id="nav_tree" class="ovirt-tree"></ul>
       </div>
     </form>

[edit]