���Ȃ���Web����͂��₷������jQuery�v���O�C��10�I�FCSS�̏�������������jQuery�v���O�C�����H���p�@�i�I�j�i2/5 �y�[�W�j
�y3�z�e�L�X�g�{�b�N�X�Ƀw���v���ꊇ�\���uForm Tips�v
�@�e�L�X�g�{�b�N�X�Ƀf�[�^����͂���Ƃ��A�e�L�X�g�{�b�N�X���Ƀw���v����\������ƁA�g������̗ǂ�Web�t�H�[���ɂȂ�܂��B
�@�����ł́AjQuery�́uForm Tips�v�v���O�C�����g�p���ăe�L�X�g�{�b�N�X�Ƀw���v����\�����܂��B
�}3�@�e�L�X�g�{�b�N�X�^�G���A�Ƀw���v��\�����ꂽ�i�摜���N���b�N����ƁA�ʃE�B���h�E�Ŏ��s�T���v����\�����܂��j�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 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>�c�c�y2�z <script src="jquery.formtips.1.1.js" type="text/javascript"></script>�c�c�y3�z </head>
- Web�y�[�W�̊�{�X�^�C�����錾����Ă���
- jQuery�̃��C�u������Google CDN�o�R�Ŏ�荞��
- Form Tips�v���O�C���̃��C�u��������荞��
�@Form Tips�v���O�C���̍ŐV�ł́A���L�T�C�g����_�E�����[�h�ł��܂��B
�X�e�b�v2�FXHTML�ō��i���`����
�@<body>�v�f��<form>�v�f��lj�������A<label>�v�f��<input>�itext�j�v�f��z�u���܂��B<input>�itext�j�v�f��title�����ɂ́A�e�L�X�g�{�b�N�X�ɕ\������w���v����ݒ肵�܂��B�����āAclass�����ɂ́utipped�v��ݒ肵�܂��B
<form action="">
<fieldset id="data" class="d">
<legend>[���̓t�H�[��]</legend>
<label for="i1">�t�B�[���h1</label><br />
<input type="text" name="i1" id="i1" size="40" class="tipped" value=""
title="�����Ƀw���v�������..." />
</fieldset>
</form>
�X�e�b�v3�F�v���O�C����g�ݍ���
�@<head>�v�f��<script>�v�f��lj�������A���̂悤�ȃR�[�h��lj�����Form Tips�v���O�C����g�ݍ��ނƊ����ł��B
<script type="text/javascript">
$(function() {
$('form').formtips({
class_name: 'tipped'
});
});
</script>
�@�����ł́AjQuery�̃Z���N�^��<form>�v�f����������formtips()���\�b�h�����s���Ă��܂��B���̃��\�b�h�̈���class_name�ɂ́utipped�v��ݒ肵�܂��BForm Tips�v���O�C���́A<form>�v�f���̂��ׂĂ�<input>�v�f����������CSS�̃N���X�utipped�v����������Atitle�����ɐݒ肳��Ă���u�w���v���v���e�L�X�g�{�b�N�X�ɕ\�����܂��B
�y4�z�w���v�����ʕ\���uWatermark Input�v
�@Form Tips�v���O�C���Ńw���v�����ꊇ���ĕ\���������Ɍʂɕ\������ɂ́A�uWatermark Input�v�v���O�C�����g�p���܂��BWatermark Input�v���O�C���̍ŐV�ł́A���L�T�C�g����_�E�����[�h�ł��܂��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 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>�c�c�y2�z <script src="jquery.watermarkinput.js" type="text/javascript"></script>�c�c�y3�z </head>
- Web�y�[�W�̊�{�X�^�C�����錾����Ă���
- jQuery�̃��C�u������Google CDN�o�R�Ŏ�荞��
- Watermark Input�v���O�C���̃��C�u�������_�E�����[�h���Ď�荞��
�X�e�b�v2�FXHTML�ō��i���`����
�@<body>�v�f��<form>�v�f��lj�������A<input>�itext�j�v�f��z�u���܂��B<input>�itext�j�v�f��id�����ɂ́A�e�L�X�g�{�b�N�X�ɕ\������w���v����ݒ肵�܂��B
<input id="last" type="text" /> <input id="first" type="text" />
�X�e�b�v3�F�v���O�C����g�ݍ���
�@<head>�v�f��<script>�v�f��lj�������A���̂悤�ȃR�[�h��lj�����Watermark Input�v���O�C����g�ݍ��ނƊ����ł��i���s�T���v����\���j�B
$('#last').Watermark('�R�c');
$('#first').Watermark('���Y');
$('#last').Watermark('�R�c','red');
$('#first').Watermark('���Y','#ffdddd');
�@Watermark()���\�b�h�̈���1�ɂ́u�w���v���v�A����2�ɂ́u�O�i�F�v���w�肵�܂��B����2�͏ȗ��ł��܂��B
�@���y�[�W�ł́A�p�X���[�h���͂����₷������v���O�C���Ƃ���PassRoids�AdPassword�̎g������������܂��B
Copyright © ITmedia, Inc. All Rights Reserved.
�A�C�e�B���f�B�A����̂��m�点
��IT eBook
���ڂ̃e�[�}
ITmedia�̓A�C�e�B���f�B�A������Ђ̓o�^���W�ł��B