2 * Author: Youmin Ha <youmin.ha@samsung.com>
6 * Pagecontrol widget shows number bullets, receives touch event for each bullet,
7 * and runs your callback for each touch event.
11 * Pagecontrol widget uses <div> element as an element itself. It takes following attributes.
13 * data-role: This widget must have 'pagecontrol' as data-role value.
14 * data-max: Maximum nimber of pagecontrol bullets. This property must not exceed 10.
15 * data-initVal: Initially selected value of the pagecontrol widget. Must between 1 and data-max. If this attribute is not given, initial value is set to 1.
20 * : Set current value. Actually triggers 'change' event to the widget with given value.
21 * @param[in] value A value to be changed.
24 * : Get current value.
25 * @return Current value.
29 * change: Raised when a value is changed, by setting it by javascript, or by user's touch event.
33 * <div id="foo" data-role="pagecontrol" data-max="10"></div>
35 * <script language="text/javascript">
37 * // Bind callback to value change
38 * $('foo').bind('change', function(event, value) {
40 * // value: changed value
44 * $('foo').trigger('change', 3);
48 (function ($, undefined) {
50 $.widget("tizen.pagecontrol", $.mobile.widget, {
52 initSelector: ":jqmData(role='pagecontrol')",
55 _create: function () {
61 maxVal = e.data("max"),
62 currentVal = e.attr("data-initVal"),
66 page_margin_class = 'page_n_margin_44';
72 } else if(maxVal > 10) {
75 e.data("max", maxVal);
80 e.data("current", currentVal);
82 // Set pagecontrol class
83 e.addClass('pagecontrol');
85 // Set empty callback variable
86 self.changeCallback = null;
88 // Calculate left/right margin
90 page_margin_class = 'page_n_margin_44';
91 } else if(maxVal == 8) {
92 page_margin_class = 'page_n_margin_35';
93 } else if(maxVal == 9) {
94 page_margin_class = 'page_n_margin_26';
96 page_margin_class = 'page_n_margin_19';
99 // subroutine: find a child by value
100 function getBtn(value) {
101 return e.children(":jqmData(value='" + value + "')");
104 // subroutine: change active button by value
105 function changeActiveBtn(newNum) {
107 if(newNum < 1 || newNum > e.max) return false;
109 // get old and new btns
110 var oldNum = e.data('current');
112 getBtn(oldNum).removeClass('page_n_' + oldNum)
113 .addClass('page_n_dot');
114 getBtn(newNum).removeClass('page_n_dot')
115 .addClass('page_n_' + newNum);
119 for(i=1; i<=maxVal; i++) {
120 btn = $('<div class="page_n page_n_dot ' + page_margin_class + '" data-value="' + i + '"></div>');
122 if(i == currentVal) {
123 btn.removeClass('page_n_dot').
124 addClass('page_n_'+i);
126 // bind vclick event to each icon
127 btn.bind('vclick', function(event) {
128 // Trigger change event
129 e.trigger('change', $(this).data('value'));
133 // pagecontrol element's change event
134 e.bind('change', function(event, value) {
135 // 1. Change activated button
136 changeActiveBtn(value);
138 // 2. Store new value (DO NOT change this order!)
139 e.data('current', value);
143 }); // end: $.widget()
146 $(document).bind("pagecreate create", function(e) {
147 $($.tizen.pagecontrol.prototype.options.initSelector, e.target)
148 .not(":jqmData(role='none'), :jqmData(role='nojs')")