�A�ځFjQuery Mobile����i�ŏI��j

��6��@jQuery Mobile API�ł�����JavaScript�v���O���~���O

�R�c �ˊ�
2012/06/14
Page1 Page2

�@�{�A�ڂ̏����ł́AjQuery Mobile�́ijQuery�̃��o�C���łƂ��������jjQuery UI�̃��o�C���łł���A�Əq�ׂ��B���ہAjQuery Mobile�ł͕W���ł��܂��̃E�B�W�F�b�g��񋟂��Ă���A�}�[�N�A�b�v�݂̂Ńl�C�e�B�u�E�A�v���E���C�N�ȃX�}�z�E�A�v�����J���ł��Ă��܂��B�����Ƃ��A���̓������̂ɁA�Ƃ�����ƁAjQuery Mobile�ł͂��炩���ߗp�ӂ��ꂽ�͈͂ł����A�v�����J���ł��Ȃ��Ǝv��ꂪ�����B

�@���̂悤�Ȃ��Ƃ͂Ȃ��BjQuery Mobile�ł́A�L�x�ȓƎ���JavaScript API��񋟂��Ă���A�������Ăяo�����ƂŁA�ŗL�̎d�g�݂��A�v���ɊȒP�ɑg�ݍ��߂�B�����������R�x�̍������AjQuery Mobile�̓����Ȃ̂��B

�@�O���́AjQuery Mobile��JavaScript�v���O���~���O���s�����ł��A���Ɋ�{�ƂȂ�u�O���[�o���ݒ�v�Ɓu�C�x���g�v�ɂ‚��ĉ�������B������󂯂āA�ŏI��ƂȂ鍡��́A�•ʂ̃��\�b�h�^�v���p�e�B�ɂ‚��āA��̗�������Ȃ��������Ă����B

��JavaScript����E�B�W�F�b�g�𑀍삷��

�@�܂��O���ł́A�t�H�[���֘A�̘b��𒆐S�ɁAJavaScript�R�[�h����E�B�W�F�b�g�𑀍삷����@�ɂ‚��ĉ������B

���t�H�[���v�f�̃I�v�V�������X�N���v�g����w�肷��

�@��2���ł́A�t�H�[���v�f�̑̍ق�data-xxxxx�����Ŏw�肷����@�ɂ‚��ďЉ���B�]�v�ȃX�N���v�g���L�q���Ȃ��Ă悢�Ƃ����Ӗ��ŁA����͕֗��ł��邪�A�y�[�W�i�T�C�g�j�ɓ����v�f�����x���o�ꂷ��ƁA�R�[�h���璷�ɂȂ邵�A���Ƃ����Ă��ύX���̏C�����ʓ|���B

�@���̂悤�ȏꍇ�ɂ́A

$.mobile.���E�B�W�F�b�g����.prototype.options.���I�v�V�������� = �ݒ�l;

�̌`���ŁA�E�B�W�F�b�g�̃I�v�V�������ꗥ�ɐݒ肷�邱�Ƃ��”\���B

�@�Ⴆ�Έȉ��́A�J�X�^���E���j���[�̕\�����X�N���v�g����w�肵����ł���B

$(document).bind('mobileinit', function() {
  $.mobile.selectmenu.prototype.options.corners = false;
  $.mobile.selectmenu.prototype.options.icon = 'info';
  $.mobile.selectmenu.prototype.options.iconpos = 'left';
});
�J�X�^���E���j���[�̑̍ق��X�N���v�g���瑀�삷��JavaScript�R�[�h�icustom.html�j

�X�N���v�g�ł̎w�肪�J�X�^���E���j���[�ɔ��f���ꂽ

�@�O����q�ׂ��悤�ɁA�A�v���S�̂ɂ������O���[�o���ݒ�́Amobileinit�C�x���g�E���X�i�Œ�`����̂���{���B�ȉ��ɁA�E�B�W�F�b�g���Ƃ̎�ȃI�v�V�������܂Ƃ߂Ă����B

���ށi�E�B�W�F�b�g���j �I�v�V������ �T�v �f�t�H���g�l
���� mini �v�f�������߂Ƀ��C�A�E�g false
theme �K�p����e�[�} �i�e�v�f���p���j
�{�^���ibutton�j corners �p�ی��� true
icon �\������A�C�R�� null
iconpos �A�C�R���̕\���ʒu left
iconshadow �A�C�R�����e�t���ɂ��邩 true
inline �{�^�����C�����C���\�����邩 false
shadow �{�^�����e�t���ɂ��邩 true
�e�L�X�g�{�b�N�X�itextinput�j preventFocusZoom �t�H�[�J�X���ɃY�[���@�\�𖳌��� true�iiOS�̂݁j
�����{�b�N�X�itextinput�j clearSearchButtonText �������͎��́m�~�n�A�C�R���ɕt�^����c�[���E�q���g clear text
���W�I�{�^���^�`�F�b�N�{�b�N�X�icheckboxradio�j �| �| �|
�Z���N�g�E���j���[�^�J�X�^���E���j���[�iselectmenu�j corners �p�ی��ʂ�K�p���邩 true
icon �\������A�C�R�� arrow-down
iconpos �A�C�R���̕\���ʒu right
iconshadow �A�C�R�����e�t���ɂ��邩 true
inline ���j���[���C�����C���\�����邩 false
nativeMenu �l�C�e�B�u�ȑI�����j���[��\�����邩 true
shadow �e�t���ɂ��邩 true
�X���C�_�^�t���b�v�E�X�C�b�`�islider�j trackTheme �g���b�N�����̃e�[�} �i�e�v�f���p���j
trackTheme �g���b�N�����̃e�[�} �i�e�v�f���p���j
�t�H�[���v�f�̎�ȃI�v�V����

�������������̑ΏۂƂȂ�t�H�[���v�f��ύX���� �\ initSelector�v���p�e�B

�@��2���ŐG�ꂽ�悤�ɁAjQuery Mobile�̓l�C�e�B�u�ȃt�H�[���v�f�ɑ΂��āA�����I�ɃE�B�W�F�b�g��K�p����B����͂ƂĂ��֗��Ȃ��Ƃł��邪�AjQuery Mobile�ȊO�̃v���O�C���i���C�u�����j�����p���Ă���悤�ȏꍇ�ɂ́AjQuery Mobile�ɂ�鏉�������ז��ɂȂ�P�[�X�����邾�낤�B

�@���̂悤�ȏꍇ�ɂ́A$.mobile.���E�B�W�F�b�g����.prototype.options.initSelector�v���p�e�B*1���w�肷��΂悢�BjQuery Mobile�ł́AinitSelector�v���p�e�B�Ŏw�肳�ꂽ�Z���N�^�ɍ��v�����v�f�����������������̑ΏۂƂ��ď�������B

�@�Ⴆ�Έȉ��́A�uclass="jqmtext"�v�����̕t�����v�f������textinput�E�B�W�F�b�g�i�e�L�X�g�{�b�N�X�^�e�L�X�g�G���A�j��K�p�����ł���B

*1�@�E�B�W�F�b�g���Ǝ��ۂ̃t�H�[���v�f�̑Ή��֌W�́A�O���̕\���Q�Ƃ��Ăق����B

<script>
$(document).bind('mobileinit', function() {
  // textinput�E�B�W�F�b�g�ɂ�鏉�����Ώۂ����肷��
  $.mobile.textinput.prototype.options.initSelector = '.jqmtext';
});
</script>
�c�c�����c�c
<input id="basic1" name="basic1" type="text" value="" />
<input id="basic2" name="basic2" type="text" class="jqmtext" value="" />
<textarea id="basic3" name="basic3"></textarea>
�uclass="jqmtext"�v�����̕t�����v�f������textinput�E�B�W�F�b�g��K�p����R�[�h�iinit.html�j

�uclass="jqmtext"�v�����̂Ȃ��v�f�͎�������������Ȃ�

�@�ȉ��ɂ́A�E�B�W�F�b�g���Ƃ�initSelector�v���p�e�B�̏����l���܂Ƃ߂Ă����B

�E�B�W�F�b�g�� �����l
button button, [type='button'], [type='submit'], [type='reset'], [type='image']
textinput input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])
slider input[type='range'], :jqmData(type='range'), :jqmData(role='slider')
selectmenu select:not(:jqmData(role='slider'))
initSelector�v���p�e�B�̏����l

������̃t�H�[���v�f�݂̂������������̑ΏۂƂ��� �\ keepNative�v���p�e�B

�@�����������̑Ώۂ����߂�initSelector�v���p�e�B�ɑ΂��āA������������K�p���Ȃ��v�f�����߂�̂�keepNative�v���p�e�B�̖������B����̗v�f�������������̑ΏۊO�Ƃ���Ȃ�΁A�ꂩ�珉�����Ώۂ��w�肷��initSelector�v���p�e�B�����AkeepNative�v���p�e�B�𗘗p���������V���v�����낤�B

�@�Ⴆ�Έȉ��́A�ujqmNone�v�Ƃ����N���X�����—v�f�������������̑ΏۊO�Ƃ����ł���B

<script>
$(document).bind('mobileinit', function() {
  $.mobile.page.prototype.options.keepNative = '.jqmNone';
});
</script>
�c�c�����c�c
<input id="basic_name" name="basic_name" type="text"
  value="" class="jqmNone" />
�uclass="jqmNone"�v�ł���v�f�������������̑ΏۊO�Ƃ���R�[�h�inative.html�j

�e�L�X�g�{�b�N�X���l�C�e�B�u�Ȃ܂܂ŕ\������Ă���

���t�H�[���v�f�ւ̕ύX�̓E�B�W�F�b�g�ɒʒm���� �\ refresh���\�b�h

�@JavaScript�R�[�h����E�B�W�F�b�g�𑀍삵���ꍇ�ɂ́Arefresh���\�b�h�ŕύX��ʒm���Ȃ���΂Ȃ�Ȃ��B

�@�Ⴆ�΁A�ȉ��̓X���C�_�̌��ݒl��JavaScript�R�[�h����ύX������ł���B�܂��́Arefresh���\�b�h���Ăяo���Ȃ������Ⴉ�猩�Ă݂悤�B

<script>
$(document).bind('pageinit', function() {
  $('#sl').val(80);
});
</script>
�c�c�����c�c
<input id="sl" name="sl" type="range" min="0" max="100" value="10" />
JavaScript�R�[�h����X���C�_�̒l�𑀍삷��R�[�h�islider.html�j

�X���C�_�Ɍ��ݒl�����f����Ȃ��i���l���̓{�b�N�X�ɂ̂ݔ��f�j

�@�l�C�e�B�u�ȗv�f�𑀍삵�������ł́A�E�B�W�F�b�g���l�̕ω���m�邱�Ƃ��ł��Ȃ��̂��B��̗�ł��A���l���̓{�b�N�X�ɂ̂ݒl�����f����āA�X���C�_�͏����l�̂܂܂Ƃ������r���[�ȏ�ԂɂȂ��Ă���B

�@�ł́A�E�B�W�F�b�g�𑀍삵����Arefresh���\�b�h���Ăяo���悤�ɂ��Ă݂悤�B

<script>
$(document).bind('pageinit', function() {
  $('#sl').val(80).slider('refresh');
});
</script>
�c�c�����c�c
<input id="sl" name="sl" type="range" min="0" max="100" value="10" />
�����A�E�B�W�F�b�g�ɑ΂��ĕύX��ʒm����R�[�h�islider2.html�j

�X���C�_�^���l���̓{�b�N�X������ɂ��l�����f�����

�@���x�́A�X���C�_�^���l���̓{�b�N�X������ɂ�JavaScript�R�[�h����ݒ肵���l�����f����Ă��邱�Ƃ��m�F�ł���B�E�B�W�F�b�g�𑀍삵�����refresh���\�b�h�Œʒm�\�\��������o���Ă������B

���v�f�𓮓I�ɒlj�����ɂ́H �\ create�C�x���g

�@���łɉ��x���q�ׂĂ���悤�ɁAjQuery Mobile�ł̓y�[�W�E���[�h���ɃE�B�W�F�b�g�Ȃǂ̏����������������I�Ɏ��{����B���̂��߁A�J���҂͂Ƃ肽�Ăāu�E�B�W�F�b�g��K�p����v�Ƃ����s�ׂ��ӎ����Ȃ��Ă��悩�����킯���B

�@�������A�����������̌��JavaScript�R�[�h����v�f��lj������ꍇ�ɂ͗v���ӂ��B

�@�Ⴆ�΁A�ȉ���JavaScript�R�[�h�Ńe�L�X�g�{�b�N�X��lj������Ⴞ�B

$(document).bind('pageinit', function() {
  var tag_str = '<div data-role="fieldcontain"><label for="basic_name">�����F</label><input id="basic_name" name="basic_name" type="text" value="" /></div>';
  $(tag_str).appendTo('#basic_body');
});
JavaScript�R�[�h����e�L�X�g�{�b�N�X��lj�����R�[�h�icreate.html�j

�e�L�X�g�{�b�N�X���l�C�e�B�u�ȏ�Ԃŕ\������Ă��܂�

�@jQuery Mobile���������������I������ɒlj����ꂽ�v�f�ɂ́A���̂܂܂ł̓E�B�W�F�b�g���K�p����Ȃ��̂��i���R�Ƃ����Γ��R���j�B

�@���̂悤�ȃP�[�X�ł́Atrigger���\�b�h��create�C�x���g�𔭐������Ȃ���΂Ȃ�Ȃ��Bcreate�C�x���g�́A�E�B�W�F�b�g�����������ۂɔ�������C�x���g�ŁAjQuery Mobile�ɏ����������𑣂����������B����ɂ���āA���I�ɐ������ꂽ�v�f�ɑ΂��Ă��E�B�W�F�b�g���K�p�����킯���B

�@�ȉ��̓R�[�h���C��������ƁA���s���ʂł���B

$(document).bind('pageinit', function() {
  var tag_str = '<div data-role="fieldcontain"><label for="basic_name">�����F</label><input id="basic_name" name="basic_name" type="text" value="" /></div>';
  $(tag_str).appendTo('#basic_body').trigger('create');
});
�e�L�X�g�{�b�N�X�𓮓I�ɐ���������Acreate�C�x���g�𔭐�������R�[�h�icreate2.html�j

�e�L�X�g�{�b�N�X�ɐ������E�B�W�F�b�g���K�p���ꂽ

���t�H�[���v�f��L���^���������� �\ enable�^disable���\�b�h

�@�v�f��L���^����������ɂ́A�قƂ�ǂ̃t�H�[���n�E�B�W�F�b�g*2�ɔ�����Ă���enable�^disable���\�b�h�𗘗p����΂悢�B�Ⴆ�΁A�ȉ��̓X���C�_�𖳌�������Ⴞ�B

*2�@��̓I�ɂ́Atextinput�Acheckboxradio�Aselectmenu�Aslider�Abutton�B

$(document).bind('pageinit', function() {
  $('#sl').slider('disable');
});
�c�c�����c�c
<input id="sl" name="sl" type="range" min="0" max="100" value="10" />
�X���C�_��JavaScript�R�[�h���疳���������idisable.html�j

�X���C�_�����������ꂽ

�@�������A�A���J�[�E�^�O�i��<a>�^�O�j�Ő������������N�E�{�^��������enable�^disable���\�b�h�����p�ł��Ȃ��̂Œ��ӂ��ꂽ��*3�B���������L���^������؂�ւ���悤�ȃ{�^���ɂ‚��ẮA<input>�^<button>�v�f��D�悵�ė��p����̂��]�܂������A���ꂪ����Ȃ��Ƃ��ɂ́A�ȉ��̂悤�Ɂuclass="ui-disabled"�v������addClass�^removeClass�����Œ��E���Ȃ���΂Ȃ�Ȃ��B

*3�@�����I�ɂ́A�{�^����2��ނɕ��ނ����B<input>�^<button>�v�f�ɂ��{�^����button�E�B�W�F�b�g���K�p����邪�A�A���J�[�E�^�O�ɂ��{�^����buttomMarkup�E�B�W�F�b�g���K�p����Ă���B

$(document).bind('pageinit', function() {
  $('#top').addClass('ui-disabled');
});
�c�c�����c�c
<a id="top" href="http://www.wings.msn.to" data-role="button">�g�b�v</a>
�����N�E�{�^���̗L���^������؂�ւ���R�[�h�idisable2.html�j

�����N�E�{�^�������������ꂽ

�m�Q�l�n�e�[�}�E�N���X

�@jQuery Mobile�Ńe�[�}�i�X�E�H�b�`�j��ύX����ɂ́A�܂�data-theme�����i�܂��́A�h������data-xxxxx-theme�����j���w�肷��̂���{���B�������A����͗B��̕��@�ł͂Ȃ��A���܂��p�ӂ���Ă���e�[�}�E�N���X�i�X�^�C���E�N���X�j�𒼐ڗv�f�Ɏw�肷�邱�Ƃ��”\���B�e�[�}�E�N���X�𗘗p���邱�ƂŁA�Ǝ��̃��C�A�E�g�ɑ΂��Ă�jQuery Mobile�W���̃e�[�}��K�p���邱�Ƃ��”\�ƂȂ�B

���� �N���X �T�v
�W�� ui-bar�^ui-bar-x �c�[���o�[�i�\���ƐF�j
ui-body�^ui-body-x �R���e���c�̈�i�\���ƐF�j
ui-disabled �����i�g�p�s�j���
�{�^�� ui-btn-up-x �{�^���i�W���j
ui-btn-hover-x �{�^���i�}�E�X�E�z�o�[���j
ui-btn-down-x �{�^���i�������j
���� ui-corner-all �e�[�}�S�̂̊p��
ui-corner-xxx ����ӏ��̊p�ہixxx��tl�F����Atop�F��Aleft�F���Ȃǁj
ui-btn-corner-all �{�^���p�̊p��
ui-shadow �e�t������
��ȃe�[�}�E�N���X�i�ux�v�̓X�E�H�b�`��\���ua�v�`�uz�v�̒l�j

�@�{���ŗ��p�����uui-disabled�v���܂��A�e�[�}�E�N���X�̈��ł������킯���B

�����X�g�E�r���[�̌����@�\���J�X�^�}�C�Y����

�@���X�g�E�r���[�̃t�B���^�@�\�́A�啶���E����������ʂ��Ȃ�������v�������f�t�H���g�̋������B�����Ƃ��A�p�r�ɂ���Ắu�啶���E�������������ɋ�ʂ������v�u�O����v�ɐ����������v�Ȃǂ̃j�[�Y�����邾�낤�B

�@���̂悤�ȃP�[�X�ł́A$.mobile.listview.prototype.options.filterCallback�v���p�e�B�ɁA����̌����R�[���o�b�N�֐���ݒ肷��΂悢�B�����R�[���o�b�N�֐��Ƃ́A���X�g�E�r���[�̌����{�b�N�X�Ō����L�[���[�h�����͂��ꂽ�Ƃ��ɌĂяo�����֐��̂��ƁB�f�t�H���g�ł́A�ȉ��̂悤�ȃR�[���o�b�N�֐����ݒ肳��Ă���B

function( text, searchValue ){
  return text.toLowerCase().indexOf( searchValue ) === -1;
};
�f�t�H���g�Őݒ肳��Ă��錟���R�[���o�b�N�֐�

�@�R�[���o�b�N�֐��̃��[���́A�ȉ��̂Ƃ��肾�B

  • �����Ƃ��āA�u���X�g���ڂ̕�����itext�j�v�u���͂��ꂽ�����L�[���[�h�isearchValue�j�v���󂯎��
  • �߂�l�Ƃ��āutrue�v��Ԃ����ꍇ�̓��X�g���ڂ����O�A�ufalse�v��Ԃ����ꍇ�͎c��

�@��̗�ł���΁A���X�g���ځitext�j��indexOf���\�b�h�Ō����L�[���[�h�isearchValue�j�ɂ���r���A�߂�l���u-1�v�ł���i���e�L�X�g���܂܂�Ȃ��j�ꍇ�́utrue�v��Ԃ��Ă���i�����ڂ����O����j�킯���B

�@toLowerCase���\�b�h���Ăяo���Ă���̂́A��r����e�L�X�g���������񏬕����ɂ��邱�Ƃő啶���E����������ʂ��Ȃ��������s���Ă���i�����usearchValue�v�̓��X�g�E�r���[�̑��ŏ������ϊ�����Ă���̂ŁA�R�[���o�b�N�֐��ł̕ϊ��͕s�v�j�B

�@�ȏ��O���ɒu���āA�R�[���o�b�N�֐����J�X�^�}�C�Y���Ă݂悤�B�ȉ��́A���X�g���ڂ�O����v�����Ō�������Ⴞ�B

$(document).bind('mobileinit', function(){
  $.mobile.listview.prototype.options.filterCallback = function(text, searchValue){
    return text.toLowerCase().indexOf(searchValue) !== 0;
  };
});
���X�g���ڂ�O����v�����ōi�荞�ނ��߂̐ݒ�ilist.html�j

�O����v�������X�g���ڂ������\�������

�@�f�t�H���g�̃R�[���o�b�N�֐�����̕ύX�_�́A���ɑ����̉ӏ��������B�u�߂�l��0�łȂ��v�Ƃ́A������utext�v������������usearchValue�v�Ŏn�܂�Ȃ��i�܂��́A���������܂܂�Ȃ��j���Ƃ�\���Ă���B

�@�����Ď��̃y�[�W����́AjQuery Mobile API���g���ĊȒP�ȃX�}�z�E�A�v�����쐬����B


�@INDEX
�@ �m�A�ځnjQuery Mobile����i�ŏI��j
�@ ��6��@jQuery Mobile API�ł�����JavaScript�v���O���~���O
  1�DJavaScript����E�B�W�F�b�g�𑀍삷��
�@   2�DjQuery Mobile API�ŃJ���^���E�A�v���J��

CfbNXEy[Ww �@�u�A�ځFjQuery Mobile����v


Insider.NET �t�H�[���� �V���L��
  • ��2��@�Ȍ��ȃR�[�f�B���O�̂��߂� �i2017/7/26�j
    �@�����_���ŋL�q�ł��郁���o�̑����Athrow���Aout�ϐ��A�^�v���ȂǁAC# 7�ɂ͈ȑO�����R�[�h���Ȍ��ɋL�q�ł���悤�ȋ@�\����������Ă���
  • ��1��@Visual Studio Code�f�o�b�O�̊�b�m�� �i2017/7/21�j
    �@Node.js�v���O�������f�o�b�O���Ȃ���AVisual Studio Code�ɓ�������Ă���f�o�b�O�@�\�̊�{�́u�L�v���}�X�^�[���悤
  • ��1��@���ĂȃR�[�f�B���O�̂��߂� �i2017/7/19�j
    �@C# 7�Œlj����ꂽ�V�@�\�̒�����A�u���l���e�����\���̉��P�v�Ɓu���[�J���֐��v���Љ��B�����͕�����₷���R�[�h���L�q����̂Ɏg����
  • Presentation Translator �i2017/7/18�j
    �@Presentation Translator��PowerPoint�p�̃A�h�C���B�v���[���e�[�V�������̎����̕t����A������ł̎��^�����A�X���C�h�̖|����s����
��IT���[���}�K�W���@�V������X�^�b�t�̃R���������[���œ͂��܂��i�����j
- PR -

���ڂ̃e�[�}

�Ɩ��A�v��Insider �L�������L���O

�{�� ����
�\�����[�V����FLASH
"); adremove.push(adstrtmp[adstart]); } } for(var i = 0; i < adremove.length; i++){ adremove[i].parentNode.removeChild(adremove[i]); } adstr.sort().reverse(); adstr = adstr.join(""); return adstr; }