Ignite UI™ API Documentation

mobile.loaderClass

Mobile Loader is a class component which loads asynchronously loads JavaScript and Cascading Styles Sheets files on a page. The loader API provides configuration for resource, JavaScript path, Cascading Styles Sheets path and preferred theme. The control can auto detect locale or you can manually set preferred locale and regional settings. After all the required scripts are loaded and ready to use, a callback function is called which allows your scripts to reliably know when the resources are available on the page.

The following code snippet demonstrates how to initialize the Mobile Loader control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts for the Mobile Loader control read Using Infragistics Loader.

Code Sample

<!doctype html>
<html>
<head>
        <!-- jQuery Core -->
        <script src="js/jquery.js" type="text/javascript"></script>
        <!-- jQuery Mobile -->
        <script src="js/jquery.mobile.js" type="text/javascript"></script>
        <!-- Moderznizr -->
        <script src="js/modernizr.js" type="text/javascript"></script>
        <!-- Infragistics Loader Script -->
        <script src="js/infragistics.loader.js" type="text/javascript"></script>    
        <!-- Infragistics Loader Initialization -->
        <script type="text/javascript">
            $.ig.loader({
                scriptPath: "js/",
                cssPath: "css/",
                resources: "igmRating"
            });
        </script>
    </head>
    <body>
        <div id="igRating1"
            data-role="igrating"
            data-value="2">
        </div>
    </body>
</html>

Related Samples

Related Topics

Dependencies

Show Details

settings

Type:

object

Default:

{}
Infragistics resources loader implemented as a class. Loads necessary resources for each widget based on the name of the widget.
Loads Java Script and CSS files.

Code Sample

$.ig.loader({
    scriptPath: "js/",
    cssPath: "css/",
    resources: "igmList",
    ready: function () { onReady(); }
});
- autoDetectLocale
  
  Type:
  
  bool
  
  Default:
  
  false
  
  Indicates whether the loader should automatically detect browser"s locale. Defaults to false.
  
  Code Sample
  
  // Initialize
  $.ig.loader({
  autoDetectLocale: true
  });
- cssPath
  
  Type:
  
  string
  
  Default:
  
  "css"
  
  CSS path relative to the page that instantiates the loader.
  
  Code Sample
  
  // Initialize
  $.ig.loader({
  cssPath: "css/"
  });
- locale
  
  Type:
  
  string
  
  Default:
  
  null
  
  Two letter code for current locale. Defaults to "en".
  
  Code Sample
  
  // Initialize
  $.ig.loader({
  locale: "ru"
  });
- localePath
  
  Type:
  
  string
  
  Default:
  
  "$path$/modules/i18n"
  
  Folder name that contains localization resources.
  
  Code Sample
  
  // Initialize
  $.ig.loader({
  localePath: "scripts/modules/i18n"
  });
- preinit
  
  Type:
  
  function
  
  Default:
  
  null
  
  A function to call when all resources are loaded but before the "ready" notification is sent.
  
  Code Sample
  
  // Initialize
  $.ig.loader({
  preinit: function () { onPreInit(); }
  });
- ready
  
  Type:
  
  function
  
  Default:
  
  null
  
  A function to call when all resources are loaded and ready to use.
  
  Code Sample
  
  // Initialize
  $.ig.loader({
  ready: function () { onReady(); }
  });
- regional
  
  Type:
  
  string
  
  Default:
  
  null
  
  Regional code. Can be two or five characters long ("en", "en-GB"). Defaults to "en".
  
  Code Sample
  
  // Initialize
  $.ig.loader({
  regional: "bg"
  });
- resources
  
  Type:
  
  string
  
  Default:
  
  null
  
  Comma separated list of resources to load. Ex: "igTree,igVideoPlayer,igGrid.Paging".
  Modular widgets, such as igGrid, allow linking features with a "." (dot). To load all modules of a widget use "*". Ex: "igGrid.*".
  
  Code Sample
  
  // Initialize
  $.ig.loader({
  resources: "igmList"
  });
- scriptPath
  
  Type:
  
  string
  
  Default:
  
  "js"
  
  Script path relative to the page that instantiates the loader.
  
  Code Sample
  
  // Initialize
  $.ig.loader({
  scriptPath: "js/"
  });
- theme
  
  Type:
  
  string
  
  Default:
  
  ""
  
  Name of the theme. Must correspond to the CSS theme folder under cssPath.
  
  Code Sample
  
  // Initialize
  $.ig.loader({
  theme: "metro"
  });