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 정의 부분에 정해져 있습니다.