src/widgets/listdivider/js/jquery.mobile.tizen.listdivider.js

   1 /* ***************************************************************************
   2 * style : normal, check
   3 * option :
   4 *    - folded : decide to show divider press effect or not
   5 *    - line : decide to draw divider line or not
   6 */
   7 /**
   8         @class ListDivider
   9         The list divider widget is used as a list separator for grouping lists. List dividers can be used in Tizen as described in the jQueryMobile documentation for list dividers.<br/>
  10         To add a list divider widget to the application, use the following code:
  11
  12                 <li data-role="list-divider" data-style="check">
  13                 <form><input type="checkbox" name="c2line-check1" /></form></li>
  14
  15         The list divider can define callbacks for events as described in the jQueryMobile documentation for list events. <br/> You can use methods with the list divider as described in the jQueryMobile documentation for list methods.
  16
  17         @since tizen2.0
  18 */
  19 /**
  20         @property {String} data-style
  21         Sets the style of the list divider. The style options are dialogue, check, expandable, and checkexpandable.
  22 */
  23
  24 (function ( $, undefined ) {
  25         $.widget( "tizen.listdivider", $.mobile.widget, {
  26                 options: {
  27                         initSelector: ":jqmData(role='list-divider')",
  28                         folded : false,
  29                         listDividerLine : true,
  30                 },
  31
  32                 _create: function () {
  33
  34                         var $listdivider = this.element,
  35                                 openStatus = true,
  36                                 expandSrc,
  37                                 listDividerLine = true,
  38                                 style = $listdivider.attr( "data-style" );
  39
  40                         if ( $listdivider.data("line") === false ) {
  41                                 this.options.listDividerLine = false;
  42                         }
  43
  44                         if ( $listdivider.data("folded") === true ) {
  45                                 this.options.folded = true;
  46                         }
  47
  48                         if ( style == undefined || style === "normal" || style === "check" ) {
  49                                 if ( this.options.folded ) {
  50                                         $listdivider.buttonMarkup();
  51                                 } else {
  52                                         $listdivider.wrapInner("<span class='ui-btn-text'></span>");
  53                                 }
  54
  55                                 if ( this.options.listDividerLine ) {
  56                                         expandSrc = "<span class='ui-divider-normal-line'></span>";
  57                                         if ( this.options.folded ) {
  58                                                 $( expandSrc ).appendTo( $listdivider.children( ".ui-btn-inner" ) );
  59                                         } else {
  60                                                 $( expandSrc ).appendTo( $listdivider);
  61                                         }
  62                                 }
  63                         }
  64
  65                         $listdivider.bind( "vclick", function ( event, ui ) {
  66                         /* need to implement expand/collapse divider */
  67                         });
  68                 },
  69         });
  70
  71         //auto self-init widgets
  72         $( document ).bind( "pagecreate create", function ( e ) {
  73                 $( $.tizen.listdivider.prototype.options.initSelector, e.target ).listdivider();
  74         });
  75 }( jQuery ) );