jQuery UI�Ŏ����I Ajax�ŕ����I���h���b�O���h���b�v�F�p�^�[���ƃ��C�u�����ō��Ajax�����������V�s�i5�j�i1/4 �y�[�W�j

» 2008�N03��03�� 00��00�� ���J
[�u�c�T���C�A�[�N�E�F�u�������]
ACR

jQuery�A�v���O�C���AjQuery UI�AWeb�o�R��CDN�Ƃ�
CSS�̏�������������jQuery�v���O�C�����H���p�@�i1�j

��{�^�����炢�Ƃ��ăv���O�C����jQuery UI�ɂ‚��ĊȒP�ɐG��AWeb�o�R��jQuery���g��CDN�ɂ‚��ĉ��
�f�U�C���n�b�N �� ���b�`�N���C�A���g 2009/12/8

�{�L����2008�N�Ɏ��M���ꂽ���̂ł��BjQuery��Ajax�S�ʂ̍ŐV���́u���b�`�N���C�A���g & ���[�t�H�[�����v�����ڎ��̃J�e�S���u���HAjax�v��uAjax�Z�p����v�����Q�Ƃ��������B


����́ujQuery UI�v�̂��i�񂾊��p��

�� jQuery�̃v���O�C���ujQuery UI�v�Ƃ́H

�@����Љ��jQuery UI�́AJavaScript�iAjax�j�t���[�����[�NjQuery�̃v���W�F�N�g��jQuery�p�ɊJ�����Ă���A�ȉ��̋@�\��񋟂���v���O�C���ł��B

  • �h���b�O���h���b�v�Ȃǂ̃}�E�X����̋@�\�g��
  • ���[�U�[�C���^�[�t�F�C�X�����P����E�B�W�F�b�g�i�A�R�[�f�B�I���A���t���́A�_�C�A���O�A�X���C�_�[�A�^�u�Ȃǁj

�@����́AjQuery UI���h���b�O���h���b�v�@�\�Ƀt�H�[�J�X���A���̎g��������A���i�񂾊��p����T���v����ʂ��Đ������Ă��������Ǝv���܂��B

}@jQuery UĨy[W �}�@jQuery UI�̃y�[�W

�@jQuery�̊�{�I�ȗ��p�̎d���ɂ‚��ẮA�A�ڑ�1��ujQuery���g����Twitter�����������}�b�V���A�b�v�v�ł��������Ă��܂��̂ŁA����������Q�Ƃ��������B

�� ����̃T���v��

�@�܂��́A����̃T���v�������Ă݂܂��傤�B

����̃T���v���E�v���O�����i�g��\�����������A��Firebug��L���ɂ��Ă���Ɠ��삪�݂��Ȃ邱�Ƃ�����܂��B�܂��A�T���v���̃��C�Z���X��GPL 2�ƂȂ�܂��j�j

�ҏW�����FFirebug�ɂ‚��ďڂ����m�肽���ǎ҂́A�uFirebug�Ƃ́H Web�T�C�g�쐬�ɂǂ��𗧂‚̂��H�v�����Q�Ƃ��������B

�@���̃T���v���ɂ͎��̂悤�ȋ@�\������܂��B

  • �t�@�C�����h���b�O�ŕ����I���ł���
  • �I�������t�@�C���̓h���b�O���h���b�v�Ńf�B���N�g�������ړ�������
  • �ʂ̃f�B���N�g���Ɉړ����邱�Ƃ��ł���

�@�h���b�O���h���b�v�𗘗p���A��蒼���I�Ōy���ȃ��[�U�[�C���^�[�t�F�C�X��񋟂��邱�Ƃ��ł��܂��B

�� jQuery UI���񋟂���h���b�O���h���b�v�@�\

�@jQuery UI�̓h���b�O���h���b�v�Ɋ֘A���Ď��̋@�\��񋟂��Ă��܂��B

  • Draggables�FDOM�v�f���h���b�O�ł���悤�ɂ���
  • Droppables�Fdraggable�ƂȂ����v�f��ʂ�DOM�v�f�Ƀh���b�v�ł���悤�ɂ���
  • Selectables�F�w�肵��DOM�v�f�̎q�v�f���h���b�O�ŕ����I���ł���悤�ɂ���
  • Sortables�F�w�肵��DOM�v�f�̎q�v�f�̏��Ԃ��h���b�O���h���b�v�œ���ւ�����悤�ɂ���
  • Resizeables�F�w�肵��DOM�v�f�̃T�C�Y���h���b�O���h���b�v�ŕύX�ł���悤�ɂ���

�@����̃T���v���́A��L�̂���Draggables�ADroppables�ASelectables��g�ݍ��킹�č쐬���Ă��܂��B�ȉ��ł́A����3�‚ɂ‚��Ă��ꂼ��̎g������������A���̌㉞�p�҂Ƃ��ăT���v���̓��e��������Ă����܂��B

�@����͎��ʂ̊֌W��Sortables�AResizeables�̉���͂ł��܂��񂪁A���������{�I�ȗ��p���@��Draggables�ȂǂƓ����ł��̂ŁA�{�L������ǂ����ΊȒP�ɗ��p���@�������ł���Ǝv���܂��B�ƂĂ��L�p�ȃ��C�u�����ł��̂ŁA���Ў����Ă݂Ă��������B

�� jQuery UI���_�E�����[�h�����

�@jQuery UI���g�����߂̏��������Ă����܂��傤�BjQuery UI�̃T�C�g����AjQuery�̃v���O�C�����_�E�����[�h���܂��B2008�N2��26���̌��e���M�����݂ł́A�ujquery.ui-1.5b.zip�v�Ƃ����t�@�C�����_�E�����[�h�ł��܂��B���̃t�@�C����W�J���AWeb�T�[�o�ɃA�b�v���[�h���Ă����܂��傤�B

�h���b�O���”\�ɂ���uDraggables�v

�@�܂��ADraggables�̍ł��V���v���Ȏg�p������Ă݂܂��傤�BDraggalbes�́ADOM�v�f���h���b�O�ł���悤�ɂ���@�\��񋟂��܂��BDraggables���g�����߂ɂ́Ajquery.ui-1.5b.zip���𓀂��Č����t�@�C���̂����ȉ��̃t�@�C����<head>�^�O���ŁA<script>�^�O���g���ēǂݍ��ޕK�v������܂��i�Q�l�F�uUI/Draggables - jQuery JavaScript Library�v�́uDependancies�v�̕����j�B

<script type="text/javascript"
    src="javascripts/lib/jquery-1.2.3.min.js"></script>
<script type="text/javascript"
    src="javascripts/lib/jquery.dimensions.js"></script>
<script type="text/javascript"
    src="javascripts/lib/ui.mouse.js"></script>
<script type="text/javascript"
    src="javascripts/lib/ui.draggable.js"></script>
<script type="text/javascript"
    src="javascripts/lib/ui.draggable.ext.js"></script>

�@���̂����ŁA���L��HTML�̂悤�Ƀh���b�O���”\�ɂ�����DOM�v�f�ɁAdraggable()���\�b�h���Ăяo�������ŁA<div id='target'>�̗v�f���h���b�O�”\�ɂȂ�܂��B

<div id='target'>�h���b�O�”\</div>
<script type="text/javascript">
    $('#target').draggable();
</script>

Draggables�̃V���v���ȗ�i�u�h���b�O�”\�v�Ƃ������x�����h���b�O���Ă��������B�g��\�����������j

�@draggable()�����s���ꂽDOM�v�f�́A���L�̂悤�Ɂuui-draggable�v�Ƃ����N���X�������I�ɕt�^����܂��B

<div id="target" class="ui-draggable">�h���b�O�”\</div>

�� Draggables�Ɏw��”\�ȃI�v�V����

�@draggable()�̑�1�����Ɏ��̗�̂悤�ɁA�n�b�V���`���̃I�v�V�������w�肷�邱�ƂŃh���b�O���̋��������܂��܂ɃJ�X�^�}�C�Y�ł��܂��B

<div id='target'>�h���b�O�”\</div>
<script type="text/javascript">
    $('#target').draggable({
        snap: true,
        containment: '#container'
    }
);
</script>

�@�w��”\�ȃI�v�V�����͔��ɑ������߁A�����ł͈ꕔ�����Љ�܂��B�ڂ����́uUI/Draggables/draggable - jQuery JavaScript Library�v�́uoptions�v�^�u���Q�Ƃ��Ă��������B�܂��A�e�I�v�V�����w�育�Ƃ̃T���v���́A�uDraggable Demo�v���Q�Ƃ��Ă��������B

�\1 Draggables�̎�ȃI�v�V����
�I�v�V������ �w�肷��l ����
snap Boolean�܂���Selector �h���b�O�����̃I�v�V�����Ɏw�肵��DOM�v�f�ɐڋ߂���ƁA���̗v�f�ɋz���t���悤�ɐڂ���悤�ɂȂ�B�utrue�v�Ǝw�肷��ƁA'.ui-draggable'�Ƃ����Z���N�^�Ɉ�v����v�f�Ɂu�z���t���v����������悤�ɂȂ�i�u�z���t���v�̃T���v���Ƃ��āuDraggable Demo�v�́u2. Clone as helper�v������Ƃǂ��������삩������₷���j
containment Element�܂���Selector �w�肵���v�f�̓����͈̔͂ł̂݃h���b�O�”\�ɂ���
grid [Integer x, Integer y] �w�肵���T�C�Y�̊i�q��Łu�z���t���v������
helper "original"�܂���"clone"�܂���Function �uoriginal�v���w�肷��ƁAdraggable()�Ɏw�肳�ꂽ�v�f�����̂܂��w���p�i�h���b�O���Ƀ}�E�X�ɍ��킹�ē����v�f�j�ɂȂ�i�f�t�H���g�j�B�uclone�v��draggable()�Ɏw�肳�ꂽ�v�f�𕡐����A�w���p�Ƃ��Ďg�p�BFunction���w�肷��ƁA���̊֐����Ԃ�DOM�v�f���w���p�Ƃ��Ďg�p�����
start Function(e, ui) �h���b�O�J�n�����C�x���g�n���h�����w��B��1�����́A�ʏ�̃C�x���g�n���h���Ɠ��l�ŁA��2�����ɂ‚��Ă͌�q
drag Function(e, ui) �h���b�O���̃C�x���g�n���h�����w��
stop Function(e, ui) �h���b�O�I�����̃C�x���g�n���h�����w��

�@�����������y�[�W�ł́ADraggables��Droppables�ASelectables�ɂ‚��ĉ�����܂��B

�@�@�@�@�@�@ 1|2|3|4 ���̃y�[�W��

Copyright © ITmedia, Inc. All Rights Reserved.

'; if( !this.isSubscription ) { this.insertTarget = document.querySelector('#cmsBody .subscription') || document.querySelector('#cmsBody .inner'); } }; BodyAdIMSWithCCE.prototype = Object.create(BodyAdContent.prototype); BodyAdIMSWithCCE.prototype.activate = function () { refreshGam('InArtSpecialLink'); } // global reference window.itm = itm; //entry point BodyAdEventBase.polyfill(); const bodyAdManager = BodyAdManager.getInstance(); bodyAdManager.addEventListener(BodyAdManager.EVENTS.READY, function (ev) { bodyAdManager.loadAdvertise(); }); bodyAdManager.init(); })();
�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

4AI by IT - AIAAA
Microsoft  WindowsőO2025
AI for GWjAO
[R[h^m[R[h Zg by IT - ITGWjArWlX̒SŊ􂷂gD
Cloud Native Central by IT - XP[uȔ\͂gD
�V�X�e���J���m�E�n�E �y�����i�r�zPR
���Ȃ��ɂ������߂̋L��PR

RSS�ɂ‚���

�A�C�e�B���f�B�AID�ɂ‚���

���[���}�K�W���o�^

��IT�̃��[���}�K�W���́A �������A���ׂĖ����ł��B���Ѓ��[���}�K�W�������w�ǂ��������B