두개의 이벤트 하나로 다루기, jQuery Mobile built in Components

Replace two events by a single

요 전 글에서 두개의 이벤트를 생성했죠? 글자 색(changecolor) 바꾸는 거랑 배경색(changebackgroundcolor) 바꾸는 거요.

이 두개의 이벤트를 changecolors event라는 하나의 이벤트를 call 해서 사용하도록 할 수 있습니다. 각 이벤트 마다 하나씩의 색을 전달하는 대신 두개의 파라미터에 두개의 색이 한번에 전달 되야겠죠.

New setColor () method managing changecolors event

setColors : function (color, backgroundcolor)

{

  var $elem = this.element;

      

  if (color != this.options.color || 

      backgroundcolor != this.options.backgroundColor) 

    $elem.trigger ("changecolors", [color, backgroundcolor]);

      

  this.options.color = color;

  this.options.backgroundColor = backgroundcolor;

  $elem.css ( { "background-color" : this.options.backgroundColor, 

                color : this.options.color } );

},

Taking account of the changecolors event

$("#plug1").bind ("changecolors", function (event, color, backgroundcolor)

{

  alert ("changecolors : \n" + "color = " + color + 

         "\n backgroundcolor = " + backgroundcolor);

});

이것을 처리하는 메소드는 이벤트 파라미터로부터  color 와 backgroundcolor 이렇게 두개의 파라미터를 받습니다.

다른식으로 작성할 수도 있습니다. color and backgroundcolor properties 들을 포함한 객체를 만들어서 single parameter로 전달할 수도 있죠.

color and backgroundcolor transmitted in an object

setColors : function (color, backgroundcolor)

{

  var $elem = this.element;

      

  if (color != this.options.color || 

      backgroundcolor != this.options.backgroundColor) 

    $elem.trigger ("changecolors", 

         [ { color : color, backgroundcolor : backgroundcolor } ]);

      

  this.options.color = color;

  this.options.backgroundColor = backgroundcolor;

  $elem.css ( { "background-color" : this.options.backgroundColor, 

                color : this.options.color } );

},

여기서 전달된 객체에는 color and backgroundcolor properties 두 개가 있습니다.

Taking account of the event changecolors

$("#plug1").bind ("changecolors", function (event, colors)

{

  alert ("changecolors : \n" + "color = " + colors.color + 

         "\n backgroundcolor = " + colors.backgroundcolor);

});

Components already defined in jQuery Mobile

지금까지 여러분의 컴포넌트를 생성하는 방법을 보았습니다. jQuery Mobile에서도 이런 식으로 이미 만들어져 있는 컴포넌트들이 있는데요. 이 컴포넌트들은 여러분들이 쉽게 사용하실 수 있습니다.

아래 몇개의 샘플이 있는데 이 외에도 많이 있습니다.

Standard components of jQuery Mobile

Name	Signification
page	Windows management in the page
checkboxradio	Checkboxes and radio buttons management
textinput	Input texts management
selectmenu	Select menus management
button	Buttons management
slider	Sliders management
collapsible	Accordion menus management
listview	Listviews management
dialog	Overlapped windows management
navbar	Navigation bars management

나중에 다룰 컴퍼넌트들이 있는데요. 이러한 컴퍼넌트들은 각각 생성할 때 create event가 만들어 집니다. : pagecreate, checkboxradiocreate, etc..

이 각각의 컴포넌트들은 자신의 _create () method를 정의합니다. 이것들은 DOM tree  안에 새로운 HTML element들을 만들게 되죠. 일반적으로 _create () method 정의 바로 전에 요 전에 우리가 만든 attributes 들 처럼 options object가 정의 됩니다.

selectmenu component 를 만들기 위해 정의 된 options object를 보세요.

Definition of options in selectmenu component of jQuery Mobile

$.widget( "mobile.selectmenu", $.mobile.widget, {
    options: {
        theme: null,
        disabled: false,
        icon: 'arrow-d',
        iconpos: 'right',
        inline: null,
        corners: true,
        shadow: true,
        iconshadow: true,
        menuPageTheme: 'b',
        overlayTheme: 'a',
        hidePlaceholderMenuItems: true,
        closeText: 'Close',
        nativeMenu: true,
        initSelector: "select:not(:jqmData(role='slider'))"
    },

HTML 안에 컴포넌트와 연결된 element 의 attribute 들과 이 option들이 연결돼 있다는 걸 보셨었죠? 그 의미는 뭐냐 하면 HTML 의 <select> element와 관련해서 data-theme, data-disabled, data-icon, 등을 사용할 수 있다는 걸 말합니다. 디폴트 값들은 jQuery Mobile 코드 안에 object 정의 부분에 정해져 있습니다.