���Ȃ���Web����͂��₷������jQuery�v���O�C��10�I�FCSS�̏�������������jQuery�v���O�C�����H���p�@�i�I�j�i1/5 �y�[�W�j

jQuery�ƁA���̃v���O�C���̎g�������AUI���ʁi�G�t�F�N�g�j�̃e�[�}���ƂɏЉ��A�ځBjQuery/JavaScript/HTML�R�[�h�����ł͂Ȃ��ACSS�̏�������������邱�ƂŁA�����H�I��jQuery�v���O�C�����g�����߂̎Q�l�h�L�������g�ɂȂ邱�Ƃ�ڎw���Ă��܂��B

» 2010�N06��17�� 00��00�� ���J
[�����H�Y�C��IT]

�@�O��́u�摜�⓮����Y��ɉ�]/�g�傷��jQuery�v���O�C���v�ł́A�C���[�W����]��������Y�[���C������ujCarousel�v�uZoombox�v�v���O�C���̎g������������܂����B����́A�t�H�[�����g���₷�����邽�߂̊e��v���O�C�����A�ȉ��̂悤�Ƀ`�F�b�N�{�b�N�X�^���W�I�{�^���A�h���b�v�_�E�����X�g�A�e�L�X�g�{�b�N�X�^�e�L�X�g�G���A�A�t�H�[���̃J�e�S���ʂɕ��ނ��ďЉ�܂��B

  • �`�F�b�N�{�b�N�X�⃉�W�I�{�^�������h���ǂ�
    �@�@�y1�z�uCheckbox�v
  • �h���b�v�_�E���̗̈��ߖ񂵌��h���ǂ�
    �@�@�y2�z�ucombobox�v
  • �e�L�X�g�{�b�N�X���g���₷��
    �@�@�y3�z�e�L�X�g�{�b�N�X�Ƀw���v���ꊇ�\���uForm Tips�v
    �@�@�y4�z�e�L�X�g�{�b�N�X�Ƀw���v�����•ʕ\���uWatermark Input�v
  • �p�X���[�h����͂��₷��
    �@�@�y5�z�p�X���[�h�̓��͂�⏕����uPassRoids�v
    �@�@�y6�ziPhone�̂悤�Ƀp�X���[�h�̓��͕�����1�������c���udPassword�v
  • �e�L�X�g�G���A���g���₷��
    �@�@�y7�z�e�L�X�g�G���A�����T�C�Y����uautoResize�v
    �@�@�y8�z�e�L�X�g�G���A�ɓ��͂���f�[�^�𐧖񂷂�umaxlength�v
  • �t�H�[�����g���₷��
    �@�@�y9�z�t�H�[���Ƀw���v����\������uAdvisor�v
    �@�@�y10�z�t�H�[���ɓ��͂����f�[�^�����؂���uValidation�v

�y1�z�`�F�b�N�⃉�W�I�{�^�������h���ǂ�����uCheckbox�v

�@�`�F�b�N�{�b�N�X��jQuery���uCheckbox�v�v���O�C����K�p����ON/OFF�̃C���[�W�ŕ\�����܂��B

ALT �}1�@�`�F�b�N�{�b�N�X��ON/OFF�ŃC���[�W�������i�摜���N���b�N����ƁA�ʃE�B���h�E�Ŏ��s�T���v����\�����܂��j

�@Web�u���E�U���N�����ăT���v����\������ƁA�`�F�b�N�{�b�N�X��ON/OFF�ŃC���[�W������ĕ\������܂��BON/OFF�̃C���[�W�Ƀ}�E�X���ړ�����ƁA���E�ɓ����܂��B���x���܂��̓C���[�W���N���b�N�����ON/OFF�ɐ؂�ւ��܂��B

�X�e�b�v1�FCSS�ƃ��C�u������CDN�o�R�őg�ݍ���

�@���D�݂̊J���c�[���܂��̓G�f�B�^���N�����āA�V�K�t�@�C�����쐬������A<head>�v�f��<link>�v�f��<script>�v�f��lj����āACSS��jQuery�̃��C�u������g�ݍ��݂܂��B

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />�c�c�y1�z
  <link href="jquery.checkbox.css" rel="stylesheet" type="text/css" />�c�c�y2�z
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>�c�c�y3�z
  <script src="jquery.checkbox.js" type="text/javascript"></script>�c�c�y4�z
</head>
  1. Web�y�[�W�̊�{�X�^�C�����錾����Ă���
  2. Checkbox�v���O�C���̃X�^�C�����錾����Ă���
  3. jQuery�̃��C�u������Google CDN�o�R�Ŏ�荞��
  4. Checkbox�v���O�C���̃��C�u��������荞��

�@Checkbox�v���O�C���̍ŐV�ł́A���L�T�C�g����_�E�����[�h�ł��܂��B

ALT kawika.org - is on maui

�X�e�b�v2�FXHTML�ō��i���`����

�@<body>�v�f��<input>�icheckbox�j�v�f��<label>�v�f��lj����ă`�F�b�N�{�b�N�X��z�u���܂��B<label>�v�f��for�����ɂ́A<input>�icheckbox�j�v�f��id�icheck1�j��ݒ肵�܂��B�����ł́Achecked�����Ɂuchecked�v��ݒ肵�ă`�F�b�N���ꂽ��Ԃɂ��Ă��܂��B���l�̎菇�ŕ����̃`�F�b�N�{�b�N�X��z�u���܂��B<input>�icheckbox�j��name�����ɂ́A���j�[�N�i��Ӂj�Ȗ��O��ݒ肵�܂��B

<input id="check1" name="checkbox.1.1" type="checkbox" checked="checked" />
<label for="check1">�`�F�b�N�ς�</label>

�X�e�b�v3�F�v���O�C����g�ݍ���

�@<head>�v�f��<script>�v�f��lj�������A���̂悤�ȃR�[�h��lj�����Checkbox�v���O�C����g�ݍ��݂܂��B�����ł́AjQuery���Z���N�^�uinput:checkbox�v�Ń`�F�b�N�{�b�N�X�̗v�f���������āAcheckbox()���\�b�h�����s���Ă��܂��B

<script type="text/javascript">
  $(function() {
      $('input:checkbox').checkbox();
  });
</script>

�@����ŁA��قǂ̃T���v�����o���オ��܂����B

���W�I�{�^���ɓK�p����ɂ�

�@<input>�iradio�j�v�f��name�����ɓ������O�iradio.1�j��ݒ肵�܂��B����ŁA�����̃��W�I�{�^�����O���[�v�������1�‚����I���ł���悤�ɂȂ�܂��i���s�T���v����\���j�B

<label><input name="radio.1" value="1" type="radio" />���W�I�{�^�� #1</label>
<label><input name="radio.1" value="2" type="radio" />���W�I�{�^�� #2</label>
<label><input name="radio.1" value="3" type="radio" />���W�I�{�^�� #3</label>
$('input:radio').checkbox();

�y2�z�h���b�v�_�E����̈�ߖ񂵌��h���ǂ��ucombobox�v

�@<select>�v�f�Ńh���b�v�_�E�����X�g��\������ƁA���������I�Ɉ�Ԓ����A�C�e���ɒ�������܂��B���̕s�s�����������ɂ́A<select>�v�f��jQuery���ucombobox�v�v���O�C����K�p���܂��B

ALT �}2�@�R���{�{�b�N�X�́u���v�{�^�����N���b�N���h���b�v�_�E�����X�g�̕����g������ăA�C�e�����\�����ꂽ�i�摜���N���b�N����ƁA�ʃE�B���h�E�Ŏ��s�T���v����\�����܂��j

�@Web�u���E�U���N�����ăT���v����\��������A�R���{�{�b�N�X�́u���v���N���b�N���ăA�C�e����\�����܂��B�A�C�e����\�����镝���g������ăh���b�v�_�E�����X�g�ɕ\������܂��B�h���b�v�_�E�����X�g�ɂ́A�A�C�e�����������ŕ\������܂��B�A�C�e�����N���b�N����ƁA�R���{�{�b�N�X�ɕ\�����ăh���b�v�_�E�����X�g��‚��܂��B

�X�e�b�v1�FCSS�ƃ��C�u������CDN�o�R�őg�ݍ���

�@���D�݂̊J���c�[���܂��̓G�f�B�^���N�����āA�V�K�t�@�C�����쐬������A<head>�v�f��<script>�v�f��lj����āAjQuery�̃��C�u������g�ݍ��݂܂��B

<head>
  <script src="scripts/jquery-1.1.3.1.js" type="text/javascript"></script>�c�c�y1�z
  <script src="scripts/jquery.dimensions.js" type="text/javascript"></script>�c�c�y2�z
  <script src="scripts/jquery.combobox.js" type="text/javascript"></script>�c�c�y3�z
</head>>
  1. jQuery 1.1.3.1�̃��C�u�������uDownloading jQuery - jQuery JavaScript Library�v����_�E�����[�h���Ď�荞�ށi��jQuery�̍ŐV�ł���荞�ނƐ���ɓ��삵�܂���B�K��jQuery 1.1.3.1����荞��ł��������j
  2. dimensions�v���O�C���̃��C�u�������_�E�����[�h���Ď�荞��
  3. combobox�v���O�C���̃��C�u���������L�T�C�g����_�E�����[�h���Ď�荞��

�X�e�b�v2�FXHTML�ō��i���`����

�@<body>�v�f��<select>�v�f��lj�������<option>�v�f��<optgroup>�v�f�����q�ɂ��ăA�C�e�����`���܂��B�����ł́AjQuery API�̃J�e�S�����A�C�e���Ƃ��Ē�`���Ă��܂��B�uCSS�v�̃A�C�e���́A<optgroup>�v�f�ŃO���[�v�����Ă��܂��B

<select id="jqueryAPI">
  <option value="1">jQuery core</option>
  <option value="2">Attributes</option>
  <option value="3">Traversing</option>
  <option value="4">Manipulation</option>
  <optgroup label="CSS">
    <option value="5">CSS</option>
    <option value="6">Positioning</option>
    <option value="7">Height and Width</option>
  </optgroup>
 
�c�y���z�c
 
</select>

�X�e�b�v3�Fcombobox�v���O�C����g�ݍ���

�@<head>�v�f��<script>�v�f��lj�������A���̂悤�ȃR�[�h��lj�����combobox�v���O�C����g�ݍ��݂܂��B�����ł́AjQuery�̃Z���N�^�u#jqueryAPI�v��<select#jqueryAPI>�v�f���������āAcombobox()���\�b�h�����s���܂��B

<script type="text/javascript">
  $(function() {
      $('#jqueryAPI').combobox();
  });
</script>

�X�e�b�v4�F�v���p�e�B�𒲐�

�@�h���b�v�_�E�����X�g�̕��́A<div>�v�f��width�v���p�e�B�ɐݒ肵�܂��B�����ł́Awidth�v���p�e�B�Ɂu300px�v��ݒ肵�Ă��܂��B

<div class="liveexample" style="width:300px;">
  <select id="jqueryAPI">
  </select>
</div>

�@�R���{�{�b�N�X�̕��́Acombobox()���\�b�h�̈���width�I�v�V�����Ɏw�肵�܂��B�����ł́A�R���{�{�b�N�X�̕����u100px�v�ɐݒ肵�Ă��܂��B���̃��\�b�h�̈�����animationType�I�v�V������lj�����ƁA�h���b�v�_�E�����X�g��\������Ƃ��ɃA�j���[�V�������ł��܂��B

$('#jqueryAPI').combobox({
    animationType: "fade", // �A�C�e����W�J����Ƃ��A�j���[�V����������
    width: "100px" // �R���{�{�b�N�X�̕����w��
});

�@����ŁA��قǂ̃T���v�����o���オ��܂����B

�@���y�[�W�ł́A�e�L�X�g�{�b�N�X���g���₷������v���O�C���Ƃ���Form Tips�AWatermark Input�̎g������������܂��B

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

Copyright © ITmedia, Inc. All Rights Reserved.

'; 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�[�}

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