CSSセレクタ
共通のHTML
<ul>
<li id="first">テキストテキストテキスト</li>
<li id="second">テキストテキストテキスト</li>
<li id="third">テキストテキストテキスト</li>
<li id="fourth">テキストテキストテキスト</li>
</ul>
<ul>
<li class="first">テキスト<strong>テキスト</strong>テキスト</li>
<li class="second">テキスト<em>テキスト</em>テキスト</li>
<li class="third">テキスト<span>テキスト</span>テキスト</li>
<li class="fourth">テキストテキストテキスト</li>
</ul>
<ul>
<li lang="en">テキストテキストテキスト</li>
<li></li>
<li><span>テキスト</span>テキスト<span>テキスト</span></li>
<li></li>
</ul>
<dl>
<dt>dt. テキストテキストテキスト</dt>
<dd>dd. テキストテキストテキスト</dd>
<dt>dt. テキストテキストテキスト</dt>
<dd>dd. テキストテキストテキスト</dd>
<dt>dt. テキストテキストテキスト</dt>
<dd>dd. テキストテキストテキスト</dd>
</dl>
<dl>
<dt>dt. テキストテキストテキスト</dt>
<dd>dd. テキストテキストテキスト</dd>
<dt>dt. テキストテキストテキスト</dt>
<dd>dd. テキストテキストテキスト</dd>
<dt>dt. テキストテキストテキスト</dt>
<dd>dd. テキストテキストテキスト</dd>
</dl>
要素セレクタ
jQuery
$("li").css("color", "red");
JavaScript
document.querySelectorAll('li').forEach(function(value) {
value.style.color = 'red';
});
IDセレクタ
jQuery
$('li#first').css('color', 'red');
JavaScript
document.querySelector('li#first').style.color = 'red';
クラスセレクタ
jQuery
$('li.first').css('color', 'red');
JavaScript
document.querySelectorAll('li.first').foreach(function(value) {
value.style.color = 'red';
});
子孫セレクタ
jQuery
$('.first strong').css('color', 'red');
JavaScript
document.querySelectorAll('.first strong').forEach(function (value) {
value.style.color = 'red';
});
ユニバーサルセレクタ
jQuery
$('li *').css('color', 'red');
JavaScript
document.querySelectorAll('li *').forEach(function (value) {
value.style.color = 'red';
});
グループセレクタ
jQuery
$('#first, #third').css('color', 'red');
JavaScript
document.querySelectorAll('#first, #third').forEach(function (value) {
value.style.color = 'red';
});
first-child疑似クラス
jQuery
$('li:first-child').css('color', 'red');
JavaScript
document.querySelectorAll('li:first-child').forEach(function(value) {
value.style.color = 'red';
});
CSS3：間接セレクタ
jQuery
$('#second ~ li').css('color', 'red');
JavaScript
document.querySelectorAll('#second ~ li').forEach(function (value) {
value.style.color = 'red';
});
CSS3：否定擬似クラス
jQuery
$('li:not(:first-child)').css('color', 'red');
JavaScript
document.querySelectorAll('li:not(:first-child)').forEach(function(value) {
value.style.color = 'red';
});
CSS3：empty擬似クラス
jQuery
$('li:empty').css('color', 'red');
JavaScript
document.querySelectorAll('li:empty').forEach(function(value) {
value.style.color = 'red';
});
CSS3：nth-child擬似クラス
jQuery
$('li:nth-child(3)').css('color', 'red');
$('li:nth-child(even)').css('color', 'red');
$('li:nth-child(odd)').css('color', 'red');
$('li:nth-child(3n)').css('color', 'red');
JavaScript
document.querySelectorAll('li:nth-child(even)').forEach(function(value) {
value.style.color = 'red';
})
CSS3：last-child擬似クラス
jQuery
$('li:last-child').css('color', 'red');
JavaScript
document.querySelectorAll('li:last-child').forEach(function(value) {
value.style.color = 'red';
});
CSS3：only-child擬似クラス
jQuery
$('li span:only-child').css('color', 'red');
JavaScript
document.querySelectorAll('li span:only-child').forEach(function(value) {
value.style.color = 'red';
});
CSS3：nth-last-child擬似クラス
jQuery
$('li:nth-last-child(3)').css('color', 'red');
JavaScript
document.querySelectorAll('li:nth-last-child(3)').forEach(function(value) {
value.style.color = 'red';
})
CSS3：nth-of-type擬似クラス
jQuery
$('dt:nth-of-type(2)').css('color', 'red');
JavaScript
document.querySelectorAll('dt:nth-of-type(2)').forEach(function(value) {
value.style.color = 'red';
});
CSS3：nth-last-of-type擬似クラス
jQuery
$('dt:nth-last-of-type(1)').css('color', 'red');
JavaScript
document.querySelectorAll('dt:nth-last-of-type(1)').forEach(function(value) {
value.style.color = 'red';
});
CSS3：first-of-type擬似クラス
jQuery
$('dd:first-of-type').css('color', 'red');
JavaScript
document.querySelectorAll('dd:first-of-type').forEach(function(value) {
value.style.color = 'red';
});
CSS3：last-of-type擬似クラス
jQuery
$('dd:last-of-type').css('color', 'red');
JavaScript
document.querySelectorAll('dd:last-of-type').forEach(function(value) {
value.style.color = 'red';
});
CSS3：only-of-type擬似クラス
jQuery
$('strong:only-of-type').css('color', 'red');
JavaScript
document.querySelectorAll('strong:only-of-type').forEach(function(value) {
value.style.color = 'red';
});
CSS3：only-of-type擬似クラス
jQuery
...
JavaScript
document.querySelectorAll('strong:only-of-type').forEach(function(value) {
value.style.color = 'red';
});
CSS3：lang擬似クラス
jQuery
$('li:lang(en)').css('color', 'red');
JavaScript
document.querySelectorAll('li:lang(en)').forEach(function(value) {
value.style.color = 'red';
});
属性セレクタ
jQuery
$('[id], [class="first"]').css('color', 'red');
// [attribute!="..."] -> 特定の属性値を持たない要素を選択
// [attribute^="..."] -> 特定の文字列で始まっている属性値を持つ要素を選択
// [attribute$="..."] -> 特定の文字列で終わっている属性値を持つ要素を選択
// [attribute*="..."] -> 特定の文字列を含む属性値を持つ要素を選択
// [attribute="..."][attribute="..."] -> 複数の属性値を指定できる
JavaScript
document.querySelectorAll('[id], [class="first"]').forEach(function(value) {
value.style.color = 'red';
});
jQueryの独自セレクタ
jQuery
$('li:first, li:last').css('color', 'red');
$('li:even, li:odd').css('color', 'red');
$('li:lt(2)').css('color', 'red');
$('li:eq(2)').css('color', 'red');
$('li:gt(2)').css('color', 'red');
$(':header').css('color', 'red');
$('li:contains("テキスト")').css('color', 'red');
$('li:has(strong)').css('color', 'red');
$('li:parent').css('color', 'red');
HTML/CSS操作
テキストの変更
HTML
<p id="first">変更前</p>
jQuery
$('p#first').text('変更後');
JavaScript
document.getElementById('first').textContent = '変更後'
テキストの取得
HTML
<p id="first">取得する文字列</p>
<p id="second">変更前</p>
jQuery
$('p#second').text($('p#first').text());
JavaScript
var text = document.getElementById('first').textContent;
document.getElementById('second').textContent = text ;
HTMLの変更
HTML
<p id="first">変更前</p>
jQuery
$('p#first').html('<strong>変更後</strong>');
JavaScript
document.getElementById('first').innerHTML = '<strong>変更後</strong>';
HTMLの取得
HTML
<p id="first"><strong>取得するHTML</strong></p>
<p id="second">変更前</p>
jQuery
$('p#second').html($('p#first').html());
JavaScript
var html = document.getElementById('first').innerHTML;
document.getElementById('second').innerHTML = html;
HTML要素内の先頭・最後に挿入
HTML
<p id="first">テキストテキスト</p>
jQuery
$('p#first').prepend('<strong>先頭に挿入</strong>');
$('p#first').append('<strong>最後に挿入</strong>');
JavaScript
var target = document.getElementById('first');
var a = document.createElement('strong');
a.textContent = '先頭に挿入';
var b = document.createElement('strong');
b.textContent = '最後に挿入';
target.insertBefore(a, target.firstChild);
target.appendChild(b);
HTML要素の前・後ろに挿入
HTML
<p id="first">テキストテキスト</p>
jQuery
$('p#first').before('<h1>前に挿入</h1>');
$('p#first').after('<h1>後ろに挿入</h1>');
JavaScript
var before = document.createElement('h1');
var after = document.createElement('h1');
before.textContent = '前に挿入';
after.textContent = '後ろに挿入';
var target = document.getElementById('first');
var parent = target.parentNode;
parent.insertBefore(before, target);
parent.appendChild(after);
HTML要素内の先頭・最後に移動
HTML
<p id="first">テキストテキスト</p>
<strong id="prepend">先頭に移動</strong>
<strong id="append">最後に移動</strong>
jQuery
$('strong#prepend').prependTo('p');
$('strong#append').appendTo('p');
JavaScript
var prepend = document.getElementById('prepend');
var append = document.getElementById('append');
var target = document.getElementById('first');
target.insertBefore(prepend, target.firstChild);
target.appendChild(append);
HTML要素の前・後ろに移動
HTML
<strong id="after">後ろに移動</strong>
<p id="first">テキストテキスト</p>
<strong id="before">前に移動</strong>
jQuery
$('strong#before').insertBefore('p');
$('strong#after').insertAfter('p');
JavaScript
var before = document.getElementById('before');
var after = document.getElementById('after');
var target = document.getElementById('first');
var parent = target.parentNode;
parent.insertBefore(before, target);
parent.appendChild(after);
各要素を指定した要素で包む
HTML
<p id="first">テキストテキスト</p>
<p id="second">テキストテキスト</p>
jQuery
$('p').wrap('<h1></h1>');
JavaScript
var target = document.getElementById('first');
var parent = target.parentNode;
document.querySelectorAll('p').forEach(function(value, index) {
var wrap = document.createElement('h1');
wrap.innerHTML = value.outerHTML;
if (index === 0) { parent.innerHTML = '';}
parent.appendChild(wrap);
});
全要素をまとめてひとつの別の要素で包む
HTML
<div>
<p id="first">テキストテキスト</p>
<p id="second">テキストテキスト</p>
</div>
jQuery
$('p').wrapAll('<h1></h1>');
JavaScript
var target = document.querySelector('div');
var p = target.innerHTML;
var h1 = document.createElement('h1');
h1.innerHTML = p;
target.innerHTML = '';
target.innerHTML = h1.outerHTML;
各要素の子要素を別の要素で包む
HTML
<div>
<p id="first">テキストテキスト</p>
<p id="second">テキストテキスト</p>
</div>
jQuery
$('p').wrapInner('<strong></strong');
JavaScript
var p = document.querySelectorAll('p');
p.forEach(function(value, index) {
var target = value.textContent;
var strong = document.createElement('strong');
strong.textContent = target;
p[index].innerHTML = strong.outerHTML;
});
親要素を取り除く
HTML
<strong><p id="first">テキストテキスト</p></strong>
jQuery
$('p').unwrap();
JavaScript
var target = document.getElementById('first');
var parent = target.parentNode;
var grand = parent.parentNode;
grand.innerHTML = target.outerHTML;
指定した要素を他の要素に置き換え
HTML
<p id="first">テキストテキスト</p>
jQuery
$('p').replaceWith('<h1>置き換え後</h1>');
JavaScript
document.getElementById('first').outerHTML = '<h1>置き換え後</h1>';
要素の削除
HTML
<p id="first"><strong>削除する要素</strong>テキストテキスト</p>
jQuery
$('p strong').remove();
JavaScript
var target = document.getElementById('first');
var nest = document.querySelector('#first strong');
target.removeChild(nest);
属性値の変更・取得
HTML
<a href="http://qiita.com">リンク先</a>
jQuery
$('a').attr('href', "http://developer.mozilla.org ");
$('a').text($('a').attr('href'));
JavaScript
document.querySelector('a').setAttribute('href', "http://developer.mozilla.org ");
var target = document.querySelector('a');
target.textContent = target.getAttribute('href');
属性値の削除
HTML
<a href="http://qiita.com" target="_blank">リンク先</a>
jQuery
$('a').removeAttr('target');
JavaScript
document.querySelector('a').removeAttribute('target');
class属性の追加・削除
HTML
<p>テキストテキストテキスト</p>
jQuery
$('p').addClass('red');
$('p').removeClass('red');
JavaScript
var target = document.querySelector('p');
target.classList.add('red');
target.classList.remove('red');
CSSプロパティの複数値設定
HTML
<p>テキストテキストテキスト</p>
jQuery
$('p').css({
'color': 'red',
'border': '1px solid black'
});
JavaScript
document.querySelector('p').style.color = 'red';
document.querySelector('p').style.border = '1px solid black';
イベント
クリック
HTML
<p>テキストテキストテキスト</p>
jQuery
$('p').click(function() {
$(this).css('color', 'red');
});
JavaScript
document.querySelector('p').addEventListener('click', function() {
this.style.color = 'red';
}, false);
クリックで属性値を動的に切り替える
HTML
<ul>
<li><a href="./image/flower.jpg">花</a></li>
<li><a href="./image/sea.jpg">海</a></li>
<li><a href="./image/jellyfish.jpg">くらげ</a></li>
<li><a href="./image/building.jpg">建物</a></li>
</ul>
<p><img src="./image/flower.jpg" alt="花"></p>
jQuery
$('a').click(function() {
$('img').attr('src', $(this).attr('href'))
.attr('alt', $(this).text());
return false;
});
JavaScript
document.querySelectorAll('a').forEach(function(value) {
value.addEventListener('click', function() {
event.preventDefault();
var img = document.querySelector('img');
img.src = this.getAttribute('href');
img.alt = this.textContent;
}, false);
});
ダブルクリックでaタグ1クリック目のリンク遷移を無効化
HTML
<ul>
<li><a href="./image/flower.jpg">花</a></li>
<li><a href="./image/sea.jpg">海</a></li>
<li><a href="./image/jellyfish.jpg">くらげ</a></li>
<li><a href="./image/building.jpg">建物</a></li>
</ul>
<p><img src="./image/flower.jpg" alt="花"></p>
jQuery
$('a').dblclick(function() {
$('img').attr('src', $(this).attr('href'))
.attr('alt', $(this).text());
}).click(function() {
return false;
});
JavaScript
document.querySelectorAll('a').forEach(function(value) {
value.addEventListener('click', function(event) {
event.preventDefault();
}, false);
value.addEventListener('dblclick', function() {
var img = document.querySelector('img');
img.src = this.getAttribute('href');
img.alt = this.textContent;
}, false);
});
マウスの座標を取得、表示する
HTML
<img src="./image/flower.jpg" alt="花">
<p></p>
jQuery
$('img').mousemove(function(event) {
$('p').html("現在の X 座標：" + event.clientX + "<br>現在の Y 座標：" + event.clientY);
});
JavaScript
document.querySelector('img').addEventListener('mousemove', function(event) {
document.querySelector('p').innerHTML = "現在の X 座標：" + event.clientX + "<br>現在の Y 座標：" + event.clientY;
}, false);
将来追加される要素を含めてイベントを設定する - on()
HTML
<button>li要素を追加</button>
<ul>
<li><a href="./image/flower.jpg">花</a></li>
<li><a href="./image/sea.jpg">海</a></li>
<li><a href="./image/jellyfish.jpg">くらげ</a></li>
</ul>
<p><img src="./image/flower.jpg" alt="花"></p>
jQuery
$('ul').on("click", "a", function() {
$('img').attr('src', $(this).attr('href'))
.attr('alt', $(this).text());
return false;
});
$('button').click(function() {
$('ul').append('<li><a href="./image/building.jpg">建物</a></li>');
});
JavaScript
JavaScript置き換え不可能？（jQuery:onメソッドの代替を検討）
設定されているイベントを取り消す
HTML
<ul>
<li><a href="./image/flower.jpg">花</a></li>
<li><a href="./image/sea.jpg">海</a></li>
<li><a href="./image/jellyfish.jpg">くらげ</a></li>
<li><a href="./image/building.jpg">建物</a></li>
</ul>
<p><img src="./image/flower.jpg" alt="花"></p>
jQuery
$('a').click(function() {
$('img').attr('src', $(this).attr('href'))
.attr('alt', $(this).text());
return false;
});
$('button').click(function() {
$('a').off('click');
});
JavaScript
var funcList = []
document.querySelectorAll('a').forEach(function(el) {
var clickFunc = function(event) {
event.preventDefault();
var img = document.querySelector('img');
img.src = this.getAttribute('href');
img.alt = this.textContent;
};
el.addEventListener('click', clickFunc, false);
funcList.push({
clickFunc:clickFunc,
el:el
})
});
document.querySelector('button').onclick = function () {
funcList.forEach(function(pair){
pair.el.removeEventListener('click',pair.clickFunc,false);
});
}
フォーム関連
value属性の値を取得・変更する
HTML
<p>メールアドレス：<input type="text" name="name"></p>
<button id="reset">リセット</button>
<button>確認</button>
jQuery
$('button#reset').click(function() {
$('input').val('');
});
$('button').click(function() {
$('p').text($('input').val() + "にメールを送信します。");
$('button#reset').remove();
$('button').text('送信');
});
JavaScript
var input = document.querySelector('input[type="text"]');
var reset = document.querySelector('button#reset');
var submit = document.querySelector('button#submit');
reset.addEventListener('click', function() {
input.value = '';
}, false);
submit.addEventListener('click', function() {
document.querySelector('p').innerHTML = input.value + 'にメールを送信します';
var parent = reset.parentNode;
parent.removeChild(reset);
submit.innerHTML = '送信';
}, false);
フォーカスされたこと and 外れたことを感知する
HTML
お名前：<input type="text" value="">
jQuery
$('input').val('入力してください')
.css('color', '#CCC')
.focus(function() {
if($(this).val() === '入力してください') {
$(this).val('').css('color', '#000');
}
})
.blur(function() {
if ($(this).val() === '') {
$(this).val('入力してください').css('color', '#CCC');
}
});
JavaScript
var val = document.querySelector('input');
val.value = '入力してください';
val.style.color = '#CCC';
val.addEventListener('focus', function() {
if (this.value === '入力してください') {
this.value = '';
this.style.color = '#000';
}
}, false);
val.addEventListener('blur', function() {
if (this.value === '') {
this.value = '入力してください';
this.style.color = '#CCC';
}
}, false);
フォームの内容変更を感知する
HTML
申し込み者：
<select>
<option value="お名前">個人</option>
<option value="会社名">法人</option>
</select>
<p><span>お名前</span><input type="text"></p>
jQuery
$('select').change(function() {
$('span').text($(this).val());
});
JavaScript
document.querySelector('select').addEventListener('change', function() {
document.querySelector('span').textContent = this.value;
}, false);
フォームの送信を感知する
HTML
<form action="check.html" method="post">
<dl>
<dt>お名前<em>(必須)</em></dt>
<dd><input type="text" name="name"></dd>
<dt>性別</dt>
<dd>
<input type="radio" name="gender" value="男性" id="gender_man">
<label for="gender_man">男性</label>
<input type="radio" name="gender" value="女性" id="gender_woman">
<label for="gender_woman">女性</label>
</dd>
<dt>年齢</dt>
<dd>
<select name="age">
<option>選択してください</option>
<option value="10代">10代</option>
<option value="20代">20代</option>
<option value="30代">30代</option>
option value="40代以上">40代以上</option>
</select>
</dd>
<dt>スキル</dt>
<dd>
<input type="checkbox" name="html" value="HTML" id="html">
<label for="html">HTML</label>
<input type="checkbox" name="css" value="CSS" id="css">
<label for="css">CSS</label>
<input type="checkbox" name="javascript" value="JavaScript" id="javascript">
<label for="javascript">JavaScript</label>
<input type="checkbox" name="php" value="PHP" id="php">
<label for="php">PHP</label>
</dd>
<dt>コメント</dt>
<dd>
<textarea name="comment"></textarea>
</dd>
</dl>
<input type="submit" value="送信">
</form>
jQuery
$('form').submit(function() {
if ($('input[name="name"]').val() === '') {
if ($('span').css('font-weight') !== 'bold') {
$('input[name="name"]').css('border', '1px solid red')
.after('<span>お名前を入力してください</span>');
$('span').css({
'color': 'red',
'font-weight': 'bold'
});
}
return false;
}
});
JavaScript
document.querySelector('form#sample').addEventListener('submit', function(event) {
var input = document.querySelector('input[name="name"]');
if (input.value === '') {
if (input.style.border !== '1px solid red') {
input.style.border = '1px solid red';
var span = document.createElement('span');
span.textContent = 'お名前を入力してください';
span.style.color ='red';
span.style.fontWeight = 'bold';
input.parentNode.appendChild(span);
}
event.preventDefault();
}
}, false);
チェックの入っているフォーム部品を選択する
HTML
スキル:
<input type="checkbox" name="html" value="HTML" id="html">
<label for="html">HTML</label>
<input type="checkbox" name="css" value="CSS" id="css">
<label for="css">CSS</label>
<input type="checkbox" name="javascript" value="JavaScript" id="javascript">
<label for="javascript">JavaScript</label>
<input type="checkbox" name="php" value="PHP" id="php">
<label for="php">PHP</label>
jQuery
$('label, input[type="checkbox"]').click(function() {
$('label').css('background', '');
$(':checked').each(function() {
$('label[for="' + $(this).attr('id') + '"]').css('background', '#CCC');
});
});
JavaScript
document.querySelectorAll('label, input[type="checkbox"]').forEach(function(value) {
value.addEventListener('click', function() {
document.querySelectorAll('label').forEach(function(val) {
val.style.background = '';
});
if (value.checked === true) { value.nextElementSibling.style.background = '#CCC'; }
}, false);
});
選択されている要素を選択する
HTML
<p> 年齢：
<select name="age">
<option value=" 選択してください"> 選択してください</option>
<option value="10 代">10 代</option>
<option value="20 代">20 代</option>
<option value="30 代">30 代</option>
<option value="40 代以上">40 代以上</option>
</select></p>
<p> 好きなお酒：<input type="text"></p>
jQuery
$('select').change(function() {
if ($(':selected').attr('value') === '10 代') {
$('input').attr('disabled','disabled');
} else {
$('input').removeAttr('disabled');
}
});
JavaScript
document.querySelector('select').addEventListener('change', function() {
if (this.selectedOptions.length === 1) {
if (this.selectedOptions[0].value === '10 代') {
document.querySelector('input').setAttribute('disabled', 'disabled');
} else {
document.querySelector('input').removeAttribute('disabled');
}
}
}, false);
Ajax関連
.txtファイルのテキストを取得、挿入する
HTML
<button>変更</button>
<p>変更前のテキストです</p>
./ajax/sample1.txt
sample1.txt のテキストです
jQuery
$('button').click(function() {
$('p').load('./ajax/sample1.txt');
});
JavaScript
document.querySelector('button').addEventListener('click', function() {
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {
if(ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) {
document.querySelector('p').textContent = ajax.responseText;
}
};
ajax.open('GET', './ajax/sample1.txt', true);
ajax.send(null);
}, false);
外部のHTMLファイルを表示する
HTML
<button>変更</button>
<div>
<p>変更前のテキストです</p>
</div>
./ajax/sample2_load.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>sample2_load.html の p 要素です</p>
</body>
</html>
jQuery
$('button').click(function() {
$('div').load('./ajax/sample2_load.html p');
});
JavaScript
document.querySelector('button').addEventListener('click', function() {
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {
if(ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) {
// ajaxで取得したテキストHTMLソースの一部を抜き出すため一旦HTMLObject化
var div = document.createElement('div');
div.innerHTML = ajax.responseText;
var target = div.querySelector('p');
document.querySelector('div').innerHTML = target.outerHTML;
}
};
ajax.open('GET', './ajax/sample2_load.html', true);
ajax.send(null);
}, false);
XMLデータを取得・加工して表示する
HTML
<dl></dl>
jQuery
$.ajax({
url: './ajax/sample3.xml',
dataType: 'xml',
success: function(data) {
$('item',data).each(function() {
$('dl').append('<dt><a href="' + $('link',this).text() + '">'
+ $('title',this).text() + '</a></dt><dd>'
+ $('description',this).text() + '</dd>');
});
}
});
JavaScript
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {
if(ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) {
ajax.responseXML.querySelectorAll('item').forEach(function(value) {
var dl = document.querySelector('dl');
// dt
var dt = document.createElement('dt');
var a = document.createElement('a');
a.setAttribute('href', value.querySelector('link').textContent);
a.textContent = value.querySelector('title').textContent;
dt.innerHTML = a.outerHTML;
dl.appendChild(dt);
// dd
var dd = document.createElement('dd');
dd.textContent = value.querySelector('description').textContent;
dl.appendChild(dd);
});
}
};
ajax.open('GET', './ajax/sample3.xml', true);
ajax.send(null);
ページング（外部HTML読み込み）
HTML
<div id="container">
<h1><img src="./images3-12/header.jpg" alt="新着書籍"></h1>
<div id="content">
<p class="loading"><img src="./images3-12/loading.gif" alt=""></p>
</div>
<ul class="pager">
<li><a href="./ajax/data1.html">1</a></li>
<li><a href="./ajax/data2.html">2</a></li>
<li><a href="./ajax/data3.html">3</a></li>
</ul>
</div>
CSS
#container{
width:500px;
margin:20px auto;
}
#content{
min-height:700px;
}
div.colmun{
width:500px;
border-bottom:1px solid #CCC;
}
div.colmun:after{
content:".";
display:block;
clear:both;
visibility:hidden;
height:0;
}
div.colmun div.img{
float:left;
width:60px;
border:1px solid #ccc;
padding:5px;
margin:5px;
display:inline;
}
div.colmun div.img img{
border:0;
}
div.colmun div.info{
float:left;
padding:5px;
width:400px;
}
div.colmun div.info h2{
margin:0;
color:#009AFF;
font-size:small;
}
div.colmun div.info ul{
margin:0;
padding:15px 0 0 15px;
}
div.colmun div.info li{
margin:0;
font-size:small;
}
p.loading{
text-align:center;
margin:10px;
}
ul.pager{
text-align:center;
padding:10px;
}
ul.pager li{
display:inline;
}
ul.pager li a{
border:1px solid #009AFF;;
color:#009AFF;;
font-weight:bold;
margin:2px;
padding:5px;
text-decoration:none;
}
ul.pager li a.selected{
background:#73C7FF;
}
jQuery
// 初期表示
$('#content').load($('ul.pager li a:first').attr('href') + ' #content .colmun');
$('ul.pager li a:first').addClass('selected');
// ページング処理
$('ul.pager li a').click(function() {
$('#content').html('<p class="loading"><img src="./images3-12/loading.gif" alt=""></p>');
$('#content').data('file', $(this).attr('href'));
$('html,body').animate({
scrollTop: $('h1').offset().top -20
}, 'slow', 'swing', function() {
$('#content').load($('#content').data('file') + ' #content .colmun');
});
$('ul.pager li a.selected').removeClass('selected');
$(this).addClass('selected');
return false;
});
JavaScript
// 初期表示
var content = document.getElementById('content');
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {
if(ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) {
// ajaxで取得したテキストHTMLソースの一部を抜き出すため一旦HTMLObject化
var div = document.createElement('div');
div.innerHTML = ajax.responseText;
var target = div.querySelectorAll('#content .colmun');
// 先にloading画像削除した上でAjax要素を追加
content.textContent = '';
target.forEach(function(value) { content.appendChild(value); });
}
};
ajax.open('GET', document.querySelector('ul.pager li a').getAttribute('href'), true);
ajax.send(null);
document.querySelector('ul.pager li a').classList.add('selected');
// ページング処理
document.querySelectorAll('ul.pager li a').forEach(function(target) {
target.addEventListener('click', function(event) {
event.preventDefault();
// はじめにloading画像表示
content.innerHTML = '<p class="loading"><img src="./images3-12/loading.gif"></p>'
var link = target.getAttribute('href');
// TODO: スクロール位置調整
// 外部HTMLの要素読み込み・挿入
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {
if(ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) {
// ajaxで取得したテキストHTMLソースの一部を抜き出すため一旦HTMLObject化
var div = document.createElement('div');
div.innerHTML = ajax.responseText;
var loadedContents = div.querySelectorAll('#content .colmun');
// 先にloading画像を削除した上でAjax要素を追加
content.innerHTML = '';
loadedContents.forEach(function(value) { content.appendChild(value); });
}
};
ajax.open('GET', link, true);
ajax.send(null);
// 選択状態のページャースタイル切り替え
document.querySelectorAll('ul.pager li a').forEach(function(value) {
value.classList.remove('selected');
});
this.classList.add('selected');
}, false);
});
JSONデータを生成、取得する（PHP）
HTML
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button id="exec">button</button>
<script>
...
</script>
</body>
</html>
jQuery
...
JavaScript
document.getElementById('exec').addEventListener('click', function() {
var ajax = null;
try {
ajax = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP"); // IE用
} catch (othermicrosoft) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP"); // IE用
} catch (failed) {
ajax = null;
}
}
}
if (ajax == null) {
window.alert("Error creating request object!");
}
ajax.open('GET', 'ajax.php', true);
ajax.onreadystatechange = update;
ajax.send(null);
function update() {
if(ajax.readyState === XMLHttpRequest.DONE) {
if(ajax.status === 200) {
$jsonData = JSON.parse(ajax.responseText);
var ul = document.createElement('ul');
for (var i = 0; i < $jsonData.totals.length; i++) {
var li = document.createElement('li');
li.textContent = $jsonData.totals[i].location;
ul.appendChild(li);
}
document.body.insertBefore(ul, document.body.firstElementChild);
} else {
var message = request.getResponseHeader("Status");
if ((message.length == null) || (message.length <= 0)) {
alert("Error! Request status is " + request.status);
} else {
alert(message);
}
}
}
}
}, false);
PHP
<?php
$vail = [
'location' => 'Vail',
'boardsSold' => 100,
'bootsSold' => 100,
'bindingsSold' => 100
];
$santaFe = [
'location' => 'Santa Fe',
'boardsSold' => 200,
'bootsSold' => 200,
'bindingsSold' => 200
];
$boulder = [
'location' => 'Boulder',
'boardsSold' => 300,
'bootsSold' => 300,
'bindingsSold' => 300
];
$denver = [
'location' => 'Denver',
'boardsSold' => 400,
'bootsSold' => 400,
'bindingsSold' => 400
];
$totals = [
'totals' => [
$vail, $santaFe, $boulder, $denver
]
];
$output = json_encode($totals);
echo $output;
?>
アニメーション関連
要素を表示・非表示にする
HTML
<button id="show">表示</button>
<button id="hide">非表示</button>
<div></div>
CSS
div {
width: 200px;
height: 200px;
background: red;
display: none;
}
jQuery
$('button').click(function() {
$('div:not(:animated)').show('slow'); // .show('fast') or .show(1000) とミリ秒指定でも可
});
$('button#hide').click(function() {
$('div:not(:animated)').hide('slow');
});
JavaScript
...
show() にコールバック関数を指定する
HTML
<button>表示</button>
<div></div>
CSS
div {
width: 200px;
height: 200px;
background: red;
display: none;
}
jQuery
$('button').click(function() {
$('div').show('slow', function() {
$(this).css('background', 'blue');
}); // .show('fast') or .show(1000) とミリ秒指定でも可
});
JavaScript
...
要素の表示・非表示を交互に切り替える
HTML
<button>表示・非表示</button>
<div></div>
CSS
div {
width: 200px;
height: 200px;
background: red;
display: none;
}
jQuery
$('button').click(function() {
$('div').toggle('slow');
});
JavaScript
...
表示・非表示をスライドで切り替える
HTML
<dl>
<dt>スライドして表示状態を切り替える</dt>
<dd>slideDown() とslideUp()、show() やhide() とは違いスライドアニメーションで表示非表示を切り替える命令です</dd>
</dl>
CSS
dl {
width: 300px;
margin: 50px auto;
}
dl dt {
background: #7CADB6;
cursor: pointer;
}
dl dd {
border: 1px solid #7CADB6;
height: 300px;
margin: 0;
}
jQuery
$('dt').click(function() {
if ($('dd').css('display') === 'block') {
$('dd:not(:animated)').slideUp('fast');
} else {
$('dd').slideDown('fast');
}
// or $('dd:not(:animated)').slideToggle('slow');
});
JavaScript
...
表示状態をフェードイン・フェードアウトで切り替える
HTML
<button id="fadeIn">表示</button>
<button id="fadeOut">非表示</button>
<p><img src="./image/flower.jpg" alt="flower"></p>
jQuery
$('button#fadeIn').click(function() {
$('img:not(:animated)').fadeIn('slow');
});
$('button#fadeOut').click(function() {
$('img:not(:animated)').fadeOut('slow'); // 最終的にdisplay:noneとなる
});
JavaScript
...
透明度を徐々に変更する
HTML
<button id="fade100">表示</button>
<button id="fade50">半透明</button>
<button id="fade0">非表示</button>
<p><img src="./image/flower.jpg" alt="flower"></p>
jQuery
$('button#fade100').click(function() {
$('img:not(:animated)').fadeTo('slow', 1); // fadeToは透明になるだけでスペースは確保されたままの状態となる
});
$('button#fade50').click(function() {
$('img:not(:animated)').fadeTo('slow', 0.5);
});
$('button#fade0').click(function() {
$('img:not(:animated)').fadeTo('slow', 0);
});
JavaScript
...
独自のアニメーションを設定する
HTML
<div>
<p><img id="flower" src="./image/flower.jpg" alt="flower"><img id="building" src="./image/building" alt="building"></p>
</div>
CSS
p {
width: 800px;
height: 267px;
margin: 0;
}
div {
width: 400px;
height: 267px;
overflow: hidden;
}
jQuery
$('#flower').click(function() {
$('p:not(:animated)').animate({
"margin-left": "-400px"
}, 'slow', "swing");
});
$('#building').click(function() {
$('p:not(:animated)').animate({
"margin-left": "0"
}, 'slow', 'swing');
});
JavaScript
...
その他いろいろ
CSS3セレクターでテーブルを見やすくスタイリング＆行・列をハイライト表示
HTML
<table>
<tr>
<th>no</th><th>Name</th><th>Birthday</th><th>Phone</th><th>Mail</th>
</tr>
<tr>
<td>1</td><td>Yamada Tarou</td><td>1979-06-05</td><td>090-1234-5678</td><td>example@to-r.net</td>
</tr>
<tr>
<td>2</td><td>Tanaka Daisuke</td><td>1975-11-05</td><td>090-9999-9999</td><td>example@to-r.net</td>
</tr>
<tr>
<td>3</td><td>Sato Hanako</td><td>1985-11-23</td><td>080-9876-5432</td><td>example@to-r.net</td>
</tr>
<tr>
<td>4</td><td>Yamada Jiro</td><td>1979-06-05</td><td>090-1234-5678</td><td>example@to-r.net</td>
</tr>
<tr>
<td>5</td><td>Tanaka Hanako</td><td>1985-11-23</td><td>090-9999-7777</td><td>example@to-r.net</td>
</tr>
<tr>
<td>6</td><td>Nishihata Kazuma</td><td>1979-06-05</td><td>090-1234-5678</td><td>example@to-r.net</td>
</tr>
<tr>
<td>7</td><td>Shimizu Daisuke</td><td>1985-11-23</td> <td>080-9876-5432</td><td>example@to-r.net</td>
</tr>
<tr>
<td>8</td><td>Tnaka Jiro</td><td>1975-11-05</td><td>090-9999-7777</td><td>example@to-r.net</td>
</tr>
</table>
CSS
table {
margin: 100px auto;
}
.odd {
background: #444444;
}
th {
background: #222222;
color: white;
}
th, td {
padding: 5px;
font-size: small;
}
.even {
background: #F2F2F2;
}
.hover {
background: #B2D8FF;
}
jQuery
// テーブルを見やすくスタイリング
$('th:nth-child(odd)').addClass('odd');
$('tr:nth-child(even)').addClass('even');
// 行のハイライト
$('tr:not(:first-child)').mouseover(function() {
$(this).addClass('hover');
}).mouseout(function() {
$(this).removeClass('hover');
});
// 列のハイライト
$('td').mouseover(function() {
$('td:nth-child(' + ($('td').index(this) % $('th').length + 1) + ')').addClass('hover');
});
$('td').mouseout(function() {
$('td:nth-child(' + ($('td').index(this) % $('th').length + 1) + ')').removeClass('hover');
});
JavaScript
// テーブルを見やすくスタイリング
document.querySelectorAll('th:nth-child(odd)').forEach(function(value) {
value.classList.add('odd');
});
document.querySelectorAll('tr:nth-child(even)').forEach(function(value) {
value.classList.add('even')
});
// 行のハイライト
document.querySelectorAll('tr:not(:first-child').forEach(function(value) {
value.addEventListener('mouseover', function() {
this.classList.add('hover');
}, false);
});
document.querySelectorAll('tr:not(:first-child').forEach(function(value) {
value.addEventListener('mouseout', function() {
this.classList.remove('hover');
}, false);
});
// 列のハイライト
document.querySelectorAll('td').forEach(function(value, index, array) {
value.addEventListener('mouseover',function() {
document.querySelectorAll('td:nth-child(' + (index % document.querySelectorAll('th').length + 1) + ')').forEach(function(value) {
value.classList.add('hover');
});
}, false);
value.addEventListener('mouseout',function() {
document.querySelectorAll('td:nth-child(' + (index % document.querySelectorAll('th').length + 1) + ')').forEach(function(value) {
value.classList.remove('hover');
});
}, false);
イメージギャラリー
HTML
<div id="container">
<div id="navi">
<div class="pageWrap">
<div class="page">
<ul>
<li><a href="./image/photo1.jpg"><img src="./image/photo1_thum.jpg" alt="シャンデリア"></a></li>
<li><a href="./image/photo2.jpg"><img src="./image/photo2_thum.jpg" alt="バラ"></a></li>
<li><a href="./image/photo3.jpg"><img src="./image/photo3_thum.jpg" alt="海"></a></li>
<li><a href="./image/photo4.jpg"><img src="./image/photo4_thum.jpg" alt="門"></a></li>
<li><a href="./image/photo5.jpg"><img src="./image/photo5_thum.jpg" alt="海"></a></li>
<li><a href="./image/photo6.jpg"><img src="./image/photo6_thum.jpg" alt="あじさい"></a></li>
<li><a href="./image/photo7.jpg"><img src="./image/photo7_thum.jpg" alt="空"></a></li>
<li><a href="./image/photo8.jpg"><img src="./image/photo8_thum.jpg" alt="建物"></a></li>
</ul>
<p><img src="./image/btn_next.jpg" alt="次へ" class="next"></p>
</div>
<div class="page">
<ul>
<li><a href="./image/photo9.jpg"><img src=". /image/photo9_thum.jpg" alt="手"></a></li>
<li><a href="./image/photo10.jpg"><img src="./image/photo10_thum.jpg" alt="床"></a></li>
<li><a href="./image/photo11.jpg"><img src="./image/photo11_thum.jpg" alt="木"></a></li>
<li><a href="./image/photo12.jpg"><img src="./image/photo12_thum.jpg" alt="緑"></a></li>
<li><a href="./image/photo13.jpg"><img src="./image/photo13_thum.jpg" alt="花"></a></li>
<li><a href="./image/photo14.jpg"><img src="./image/photo14_thum.jpg" alt="くらげ"></a></li>
<li><a href="./image/photo15.jpg"><img src="./image/photo15_thum.jpg" alt="風船"></a></li>
<li><a href="./image/photo16.jpg"><img src="./image/photo16_thum.jpg" alt="花"></a></li>
</ul>
<p><img src="./image/btn_prev.jpg" alt="前へ" class="prev"> <img src="./image/btn_next.jpg" alt="次へ" class="next"></p>
</div>
<div class="page">
<ul>
<li><a href="./image/photo17.jpg"><img src="./image/photo17_thum.jpg" alt="花"></a></li>
<li><a href="./image/photo18.jpg"><img src="./image/photo18_thum.jpg" alt="花"></a></li>
<li><a href="./image/photo19.jpg"><img src="./image/photo19_thum.jpg" alt="花"></a></li>
</ul>
<p><img src="./image/btn_prev.jpg" alt="前へ" class="prev"></p>
</div>
</div>
</div>
<div id="main">
<img src="./image/photo1.jpg" alt="">
</div>
</div>
CSS
*{
margin:0;
padding:0;
border:0;
}
body{
background:black;
}
#container{
width:1000px;
margin:20px auto;
}
#navi{
width:300px;
float:left;
}
#navi ul{
height:460px;
}
#navi li{
list-style-type:none;
width:150px;
float:left;
}
#navi li img{
border:3px solid white;
}
#navi{
overflow:hidden;
}
#navi .pageWrap{
width:900px;
}
#navi .pageWrap .page{
width:300px;
float:left;
}
#navi p{
clear:both;
width:300px;
padding:10px 0;
text-align:center;
}
#navi p img{
cursor:pointer;
}
#main{
width:650px;
float:right;
}
#main img{
position:absolute;
border:3px solid white;
}
jQuery
// メイン画像切り替え
$('#navi a').click(function() {
$('#main img').attr('src', $(this).attr('href'))
.attr('alt', $(this).children().attr('alt'));
return false;
});
// サムネイル画像切り替え
$('img.next').click(function() {
$('#navi .pageWrap').animate({
'margin-left': parseInt($('#navi .pageWrap').css('margin-left')) -300 + 'px'
}, 'fast');
});
$('img.prev').click(function() {
$('#navi .pageWrap').animate({
'margin-left': parseInt($('#navi .pageWrap').css('margin-left')) +300 + 'px'
}, 'fast');
});
JavaScript
// メイン画像切り替え
document.querySelectorAll('#navi a').forEach(function(value) {
value.addEventListener('click', function(event) {
event.preventDefault();
var mainImg = document.querySelector('#main img');
mainImg.setAttribute('src', value.getAttribute('href'))
mainImg.setAttribute('alt', value.firstElementChild.getAttribute('alt')); // alt値が取れない
}, false);
});
// サムネイル画像切り替え
document.querySelectorAll('img.next').forEach(function(value) {
value.addEventListener('click', function() {
var ml = document.querySelector('#navi .pageWrap');
ml.style.marginLeft = isNaN(parseInt(ml.style.marginLeft)) ? -300 + 'px' : parseInt(ml.style.marginLeft) -300 + 'px';
}, false);
// TODO: スライドアニメーションを追記する...
});
document.querySelectorAll('img.prev').forEach(function(value) {
value.addEventListener('click', function() {
var ml = document.querySelector('#navi .pageWrap');
ml.style.marginLeft = isNaN(parseInt(ml.style.marginLeft)) ? +300 + 'px' : parseInt(ml.style.marginLeft) +300 + 'px';
}, false);
// TODO: スライドアニメーションを追記する...
});
アコーディオンパネル
HTML
<dl>
<dt>Step.1</dt>
<dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque urna, molestie id cursus non, bibendum nec magna. Mauris consequat faucibus ante sollicitudin ullamcorper. Proin et felis orci. Nulla vitae diam sit amet felis semper ultricies. Nulla vitae mauris sit amet augue pulvinar pulvinar. Donec tincidunt viverra turpis eget suscipit. Morbi eu lacus iaculis turpis suscipit pretium. mauris lobortis eros, eu egestas est lectus nec lacus. Donec in lacus quis elit consectetur accumsan sit amet sed tortor. Etiam id vestibulum libero. Nam faucibus tincidunt felis, eu feugiat nibh fringilla vel. Donec adipiscing dictum imperdiet. Nulla ac fringilla neque. Curabitur posuere euismod est vel vehicula. Curabitur quis ligula sit amet quam tempus venenatis.</p></dd>
<dt>Step.2</dt>
<dd><p>Integer rhoncus felis mauris. Donec massa nisi, posuere vel posuere vel, suscipit sed magna. Sed congue scelerisque odio, faucibus tempor nisl posuere condimentum. In eu tellus vitae elit consequat pretium. Maecenas nec ultrices dolor. Curabitur eu pulvinar turpis. Aenean vel tortor justo, id dapibus velit. MaurisIn hac habitasse platea dictumst. Proin eros urna, sagittis vitae tristique et, ullamcorper ac leo. Donec elementum arcu tortor. Praesent tincidunt dui in est adipiscing ac lobortis lorem porttitor. Nullam et dui elit. Vivamus hendrerit vestibulum enim, quis lobortis erat viverra vitae. Donec at pellentesque mi. Mauris lobortis libero ac metus ultricies accumsan. </p></dd>
<dt>Step.3</dt>
<dd><p>Integer pretium porttitor lectus at tempor. Donec nec cursus elit. Maecenas ornare malesuada urna vitae lobortis. Sed vulputate sapien quis purus cursus consectetur. Aenean nulla neque, egestas ut accumsan nec, convallis vel enim. Vestibulum vehicula interdum diam nec condimentum. Etiam in condimentum justo. nec nibh tincidunt suscipit. Nam vulputate sodales egestas. Sed orci lectus, vestibulum ac gravida eget, congue non velit. Morbi rutrum convallis orci, in hendrerit arcu vulputate a. Aliquam aliquam facilisis libero, sit amet facilisis lacus tincidunt ac. Sed viverra nulla sit amet turpis egestas nec molestie justo congue. Vivamus a lacinia sem. Aenean ut metus arcu, non ornare orci. Praesent feugiat est eu tellus dictum ac imperdiet nisi imperdiet. </p></dd>
</dl>
<script src="./jquery-1.12.4.min.js"></script>
<script>
CSS
body{
background:#252422;
}
dl{
width:800px;
margin:50px auto;
}
dt{
line-height:35px;
font-size:large;
text-indent:3em;
font-weight:bold;
color:white;
height:35px;
background:url("./image/background.jpg")
}
dd{
margin:0;
height:300px;
background:#D4D0C8;
}
dd p{
margin:0;
text-indent:1em;
padding:20px;
}
dt.over{
background: url('./image/background-over.jpg');
cursor: pointer;
}
dt.selected{
background: url('./image/background_selected.jpg');
cursor: default;
color: black;
}
jQuery
// アコーディオン開閉
$('dd:not(:first)').css('display', 'none');
$('dt:first').addClass('selected');
$('dl dt').click(function() {
if ($('+dd', this).css('display') === 'none') {
$('dd').slideUp('slow');
$('+dd', this).slideDown('slow');
$('dt.selected').removeClass('selected');
$(this).addClass('selected');
}
}).mouseover(function() {
$(this).addClass('over');
}).mouseout(function() {
$(this).removeClass('over');
});
JavaScript
// 初期表示
document.querySelectorAll('dl dd').forEach(function(value, index) {
if (index !== 0) { value.style.display = 'none'; }
});
document.querySelector('dt:first-child').classList.add('selected');
// アコーディオン開閉
document.querySelectorAll('dl dt').forEach(function(dt) {
// クリック時
dt.addEventListener('click', function() {
var dd = dt.nextElementSibling;
if (dd.style.display === 'none') {
document.querySelectorAll('dd').forEach(function(value) {
value.style.display = 'none';
// TODO: スライドアニメーションを追加...
});
dd.style.display = 'block';
// TODO: スライドアニメーションを追加
document.querySelector('dt.selected').classList.remove('selected');
dt.classList.add('selected');
}
}, false);
// マウスオーバー・アウト時のdt表示
dt.addEventListener('mouseover', function() {
this.classList.add('over');
}, false);
dt.addEventListener('mouseout', function() {
this.classList.remove('over');
}, false);
});
タブパネル
HTML
<div id="container">
<ul class="tab">
<li><a href="#tab1" class="selected">JavaScript</a></li>
<li><a href="#tab2">CSS</a></li>
<li><a href="#tab3">HTML</a></li>
<li><a href="#tab4">jQuery</a></li>
<li><a href="#tab5">XHTML</a></li>
</ul>
<ul class="panel">
<li id="tab1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue elit eu mauris sollicitudin dictum. Phasellus nec felis ut arcu placerat tincidunt. Vestibulum luctus mauris ac ante molestie eleifend. Quisque dapibus nulla ac purus volutpat posuere a quis nisl. Nam condimentum purus vitae nibh feugiat imperdiet. Cras purus mi, egestas vitae imperdiet volutpat, suscipit nec odio. Maecenas elementum aliquam metus nec ultrices. Suspendisse potenti. Praesent lobortis gravida massa in volutpat. Nunc id mauris id orci congue malesuada. Aliquam vel mauris risus, sit amet laoreet sapien. Maecenas varius gravida purus vel pharetra. Sed quis leo id mi laoreet accumsan. Vestibulum ac mauris purus, nec rutrum sem. Sed euismod magna a lacus consectetur in mattis quam suscipit. Phasellus nec enim libero. Donec sit amet justo diam. In hac habitasse platea dictumst. Sed nibh libero, iaculis eget aliquet eu, rhoncus nec ligula.
</li>
<li id="tab2">
Nam cursus molestie erat, a sodales erat sollicitudin ut. Maecenas nec urna mi, eu congue turpis. Duis vitae volutpat lorem. Ut vulputate tempor elit, vitae iaculis elit sollicitudin at. Ut gravida fermentum tempor. Mauris metus ante, volutpat et porta a, malesuada vel purus. In lobortis ullamcorper lorem eu malesuada. Nullam sollicitudin, urna eu euismod suscipit, eros sapien adipiscing arcu, sit amet ultricies lacus elit sed urna. Nam scelerisque, nulla eu mollis elementum, ipsum tortor ullamcorper felis, eget laoreet diam turpis dignissim metus. In eget lectus sit amet mi pretium pellentesque varius vitae augue. Integer mattis, elit nec adipiscing rhoncus, elit tellus congue sapien, et auctor mi nisi in purus. Curabitur commodo, neque sed ornare porta, purus magna rhoncus eros, quis consectetur ipsum erat ac mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce sed turpis tortor, quis euismod enim. Integer faucibus venenatis egestas. Etiam eu metus et sem bibendum fermentum. Sed dui ante, sollicitudin at tincidunt at, pretium sit amet diam. Nunc porttitor tristique est sed pulvinar. Fusce eu ligula vitae orci venenatis sagittis sed quis ipsum.
</li>
<li id="tab3">
Pellentesque in metus leo. Praesent porta, dolor nec mattis ullamcorper, velit purus mollis enim, nec tincidunt magna massa ornare elit. In ipsum enim, pellentesque vitae gravida ultrices, aliquet nec ante. Mauris sed nunc ut ligula dictum convallis vel et nunc. Aenean eget enim vitae nulla lacinia consequat. Quisque blandit, ante vel sodales sollicitudin, neque ante elementum leo, ut consequat dui risus ut purus. Vestibulum viverra lacus at felis dignissim bibendum. Maecenas interdum nisl eu metus porta luctus. Suspendisse nulla neque, ultricies nec facilisis nec, mollis id sapien. Donec nec quam et felis pulvinar fringilla a non orci. Maecenas tincidunt magna a sem faucibus eu interdum magna aliquam. Suspendisse a diam lorem, nec malesuada sapien. Nam a scelerisque velit. Integer commodo malesuada odio, sit amet rutrum ante viverra ut. In egestas, arcu id pretium tempus, ligula nibh interdum enim, non bibendum velit felis sed augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent augue eros, posuere pharetra pharetra eu, feugiat eu velit.
</li>
<li id="tab4">
Vestibulum a quam scelerisque odio ultricies mollis eget a leo. Morbi dictum, velit lobortis hendrerit tincidunt, lacus nisl rhoncus felis, commodo sollicitudin magna augue non est. Nunc in felis quis purus dignissim blandit vel ut erat. In hac habitasse platea dictumst. Nullam euismod auctor rhoncus. Proin et sem ac neque placerat vulputate. Nullam consequat purus eget libero posuere pulvinar. Aenean luctus luctus leo nec vehicula. Praesent eleifend nibh sed neque vestibulum hendrerit. Nulla suscipit vehicula sem, quis congue ligula gravida vel. Aliquam risus urna, pretium eget porttitor hendrerit, gravida at libero. Curabitur nec luctus risus. Etiam ullamcorper fringilla nisl hendrerit convallis. Duis in nibh tellus. Donec porta nibh id purus mollis sodales. Nam eget libero vel metus congue ultricies ut vitae nibh. Sed ac justo ac eros luctus ullamcorper ut tincidunt nibh. Fusce dapibus bibendum urna, id tempor turpis sodales sed. Nam dui purus, posuere vel placerat eu, posuere non magna.
</li>
<li id="tab5">
Vestibulum consequat consequat aliquet. Aenean ut nunc dolor, vel dictum mauris. Proin neque eros, tincidunt at faucibus a, dapibus sit amet tellus. Etiam rutrum pharetra risus porta ullamcorper. Nunc convallis orci at massa suscipit porta. Sed interdum suscipit dui, eu sodales odio fermentum vitae. Nunc vitae dui metus, a laoreet ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eu mauris mi, non blandit tortor. Ut fringilla cursus justo id porta. Sed in nibh nulla. Aenean consectetur arcu vel eros facilisis ac luctus lectus placerat. Fusce risus dui, adipiscing ut tempus non, malesuada quis velit.
</li>
</ul>
</div>
CSS
*{
margin:0;
padding:0;
}
#container{
width:500px;
margin:50px auto;
}
ul.tab{
padding:0;
}
ul.tab li{
list-style-type:none;
width:100px;
height:40px;
float:left;
}
ul.tab li a{
outline:none;
background:url("./image/tab.jpg");
display:block;
color:blue;
line-height:40px;
text-align:center;
}
ul.tab li a.selected{
background:url("./image/tab_selected.jpg");
text-decoration:none;
color:#333;
cursor:default;
}
ul.panel{
clear:both;
border:1px solid #9FB7D4;
border-top:none;
padding:0;
}
ul.panel li{
list-style-type:none;
padding:10px;
text-indent:1em;
color:#333;
}
jQuery
// 初期表示
$('ul.panel li:not(' + $('ul.tab li a.selected').attr('href') + ')').hide();
// パネル切り替え
$('ul.tab li a').click(function() {
$('ul.tab li a.selected').removeClass('selected');
$(this).addClass('selected');
$('ul.panel li').hide();
$($(this).attr('href')).fadeIn('fast');
return false;
});
JavaScript
// 初期表示
document.querySelectorAll('ul.panel li:not(' + document.querySelector('ul.tab li a.selected').getAttribute('href') + ')').forEach(function(value) {
value.style.display = 'none';
});
// パネル切り替え
document.querySelectorAll('ul.tab li a').forEach(function(a) {
a.addEventListener('click', function() {
event.preventDefault();
if (a.className !== 'selected') {
document.querySelector('ul.tab li a.selected').classList.remove('selected');
a.classList.add('selected');
document.querySelectorAll('ul.panel li').forEach(function(li) {
li.style.display = 'none';
document.querySelector(a.getAttribute('href')).style.display = 'block';
// TODO: フェードインアニメーションを追加...
});
}
}, false);
});
ツールチップ
HTML
<h1>tooltip sample</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed quam ac risus auctor pulvinar. Nullam tellus lorem, volutpat sit amet eleifend quis, semper pellentesque nunc. Aliquam eu tortor nec nisl suscipit vehicula et eu sapien. Maecenas at pretium diam. Proin non luctus diam. Pellentesque risus nisi, scelerisque eu ultricies quis, <a href="#">tooltip sample</a> <span class="tooltip">これは<br><strong>Web制作の現場で使うjQueryデザイン入門</strong><br>のサンプルプログラムです</span>luctus rhoncus dui. Proin pharetra aliquet justo, vel scelerisque lorem scelerisque eget. Praesent pharetra magna sit amet diam sagittis ac dictum nunc imperdiet. Pellentesque posuere vulputate fermentum. Vivamus fringilla commodo elit, in ornare libero imperdiet sed.</p>
<p>Proin adipiscing faucibus felis eget auctor. Duis sed ante turpis. Cras sit amet euismod est. Vivamus tempus nibh sed odio pulvinar nec varius leo dignissim. Morbi nunc dui, rutrum vitae porttitor quis, semper in augue. Maecenas feugiat neque sit amet nisl euismod in imperdiet lorem iaculis. Suspendisse a convallis augue. Fusce faucibus sollicitudin dui, lobortis semper lacus elementum et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ullamcorper ipsum sit amet libero aliquet feugiat. Nulla facilisi. Cras tincidunt convallis felis, sed vulputate lorem blandit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque tortor leo, dapibus et vulputate in, laoreet sit amet odio. Nulla facilisi. Maecenas sit amet purus eu magna pellentesque sodales. In in velit sit amet sapien pharetra placerat non quis ante. Curabitur nisl tellus, aliquet quis facilisis non, congue eu lectus. Aenean lacinia, magna ut mattis aliquet, nisl augue posuere massa, ac bibendum nisi quam eu est.</p>
<p>Morbi faucibus condimentum dolor sed tristique. Suspendisse vel diam at purus sagittis pretium. Nulla dapibus arcu metus. Sed vulputate adipiscing dapibus. Nullam interdum turpis vitae massa venenatis pulvinar. Nulla commodo convallis augue ullamcorper facilisis. Nullam viverra sollicitudin mauris eget euismod. Suspendisse nec orci felis, non viverra quam. Nunc blandit neque arcu. Aenean dignissim auctor tortor, non hendrerit nisi semper sit amet. Donec vel quam sed arcu dignissim tempus. Sed lacus erat, cursus dapibus porta non, suscipit in odio. Morbi consequat condimentum lorem, dignissim interdum dui condimentum ac. Integer eros diam, lobortis in molestie vitae, ullamcorper eget enim. Pellentesque vel velit odio, non tincidunt turpis. Ut suscipit convallis odio, rhoncus vehicula dolor dignissim in. Phasellus consequat, turpis ut imperdiet tempus, turpis neque bibendum risus, non tempor nisl eros a risus. Aenean mi libero, placerat sed suscipit ut, tincidunt a mi.</p>
jQuery
$('span.tooltip').css({
opacity: '0.9',
position: 'absolute',
display: 'none'
});
$('a').mouseover(function() {
$('span.tooltip').fadeIn();
}).mouseout(function() {
$('span.tooltip').fadeOut();
}).mousemove(function(e) {
$('span.tooltip').css({
top: e.pageY + 10 + 'px',
left: e.pageX + 10 + 'px'
});
});
JavaScript
var tooltip = document.querySelector('span.tooltip');
tooltip.style.opacity = '0.9';
tooltip.style.position = 'absolute' ;
tooltip.style.display = 'none';
var a = document.querySelector('a');
a.addEventListener('mouseover', function() { tooltip.style.display = 'block'; }, false); // フェードインアニメーションを追加...
a.addEventListener('mouseout', function() { tooltip.style.display = 'none'; }, false); // フェードアウトアニメーションを追加...
a.addEventListener('mousemove', function(event) {
tooltip.style.top = event.pageY + 10 + 'px';
tooltip.style.left = event.pageX + 10 + 'px';
}, false);
ロールオーバー付きナビゲーションメニュー
HTML
<ul>
<li><a href="#"><img src="./image/jquery.jpg" alt="jQuery" class="rollover"></a></li><!--
--><li><a href="#"><img src="./image/javascript.jpg" alt="javascript" class="rollover"></a></li><!--
--><li><a href="#"><img src="./image/css.jpg" alt="CSS" class="rollover"></a></li><!--
--><li><a href="#"><img src="./image/html.jpg" alt="HTML" class="rollover"></a></li>
</ul>
CSS
li{
display:inline;
list-style-type:none;
}
img{
border:none;
}
jQuery
$('img.rollover').mouseover(function(value) {
$(this).attr('src', $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/, '$1_on$2'));
}).mouseout(function() {
$(this).attr('src', $(this).attr('src').replace(/^(.+)_on(\.[a-z]+)$/, '$1$2'));
}).each(function() {
// 画像プリロード（先読み）処理
$('<img>').attr('src', $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/, '$1_on$2'));
});
JavaScript
document.querySelectorAll('img.rollover').forEach(function(value) {
value.addEventListener('mouseover', function() {
this.setAttribute('src', this.getAttribute('src').replace(/^(.+)(\.[a-z]+)$/, '$1_on$2'));
}, false);
value.addEventListener('mouseout', function() {
this.setAttribute('src', this.getAttribute('src').replace(/^(.+)_on(\.[a-z]+)$/, '$1$2'));
}, false);
// 画像のプリロード（先読み）処理
var img = document.createElement('img');
img.setAttribute('src', value.getAttribute('src').replace(/^(.+)(\.[a-z]+)$/, '$1_on$2'));
});
ドロップダウンメニュー
HTML
<div id="container">
<ul class="menu">
<li><a href="#">メニューA</a>
<ul class="sub">
<li><a href="#">サブメニューA</a></li>
<li><a href="#">サブメニューA</a></li>
<li><a href="#">サブメニューA</a></li>
</ul>
</li>
<li><a href="#">メニューB</a>
<ul class="sub">
<li><a href="#">サブメニューB</a></li>
<li><a href="#">サブメニューB</a></li>
<li><a href="#">サブメニューB</a></li>
</ul>
</li>
<li><a href="#">メニューC</a>
<ul class="sub">
<li><a href="#">サブメニューC</a></li>
<li><a href="#">サブメニューC</a></li>
<li><a href="#">サブメニューC</a></li>
</ul>
</li>
</ul>
</div>
CSS
*{
margin:0;
padding:0;
list-style-type:none;
}
#container{
margin:100px auto;
width:537px;
}
ul.menu li{
float:left;
width:179px;
height:48px;
background:url("./image/btn.png");
position:relative;
}
ul.menu li a{
display:block;
width:100%;
height:100%;
line-height:48px;
text-indent:30px;
font-weight:bold;
color:#CFDFB5;
text-decoration:none;
}
ul.menu li a:hover{
background:url("./image/btn_over.png");
}
ul.menu li ul.sub{
position:absolute;
}
ul.menu{
zoom:1;
}
ul.menu:after {
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}
jQuery
$('ul.sub').hide();
$('ul.menu li').hover(function() {
$('ul:not(:animated)',this).fadeIn('fast');
}, function() {
$('ul', this).fadeOut('fast');
});
JavaScript
...
モーダルウィンドウ（画像）
HTML
<h1>jQueryを利用したモーダルウィンドウの作成</h1>
<ul>
<li><a href="./image/photo1.jpg" class="modal"><img src="./image/photo1_thum.jpg" alt="シャンデリア"></a></li>
<li><a href="./image/photo2.jpg" class="modal"><img src="./image/photo2_thum.jpg" alt="バラ"></a></li>
<li><a href="./image/photo3.jpg" class="modal"><img src="./image/photo3_thum.jpg" alt="海"></a></li>
<li><a href="./image/photo4.jpg" class="modal"><img src="./image/photo4_thum.jpg" alt="門"></a></li>
<li><a href="./image/photo5.jpg" class="modal"><img src="./image/photo5_thum.jpg" alt="海"></a></li>
<li><a href="./image/photo6.jpg" class="modal"><img src="./image/photo6_thum.jpg" alt="あじさい"></a></li>
<li><a href="./image/photo7.jpg" class="modal"><img src="./image/photo7_thum.jpg" alt="空"></a></li>
<li><a href="./image/photo8.jpg" class="modal"><img src="./image/photo8_thum.jpg" alt="建物"></a></li>
</ul>
CSS
html,body{
margin:0;
padding:0;
height:100%;
}
h1{
margin:20px 50px;
font-size:large;
border-left:10px solid #7BAEB5;
border-bottom:1px solid #7BAEB5;
padding:10px;
width:600px;
}
ul{
width:700px;
}
ul li{
float:left;
list-style-type:none;
}
ul li img{
border:0;
margin:10px;
}
div#grayLayer{
display: none;
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background:black;
filter:alpha(opacity=60);
opacity: 0.60;
}
#overLayer{
display: none;
position: fixed;
top:50%;
left:50%;
margin-top:-244px;
margin-left:-325px;
}
jQuery
$('body').append('<div id="grayLayer"></div><div id="overLayer"><img src="./image/photo5.jpg"></div>');
$('#grayLayer').click(function() {
$(this).hide();
$('#overLayer').hide();
});
$('a.modal').click(function() {
$('#grayLayer').show();
$('#overLayer').show().html('<img src="' + $(this).attr('href') + '">');
return false;
});
JavaScript
// モーダルウィンドウ要素埋め込み
var grayLayer = document.createElement('div');
grayLayer.setAttribute('id', 'grayLayer');
var overLayer = document.createElement('div');
overLayer.setAttribute('id', 'overLayer');
overLayer.innerHTML = '<img src="./image/photo5.jpg">';
document.body.appendChild(grayLayer);
document.body.appendChild(overLayer);
// モーダルウィンドウ非表示
grayLayer.addEventListener('click', function(event) {
event.preventDefault();
grayLayer.style.display = 'none';
overLayer.style.display = 'none';
}, false);
// モーダルウィンドウ表示
document.querySelectorAll('a.modal').forEach(function(value) {
value.addEventListener('click', function(event) {
event.preventDefault();
grayLayer.style.display = 'block';
overLayer.innerHTML = '<img src="' + value.getAttribute('href') + '">';
overLayer.style.display = 'block';
}, false);
});
###モーダルウィンドウ（テキスト）
HTML
<dl>
<dt>Lorem ipsum dolor sit amet,</dt>
<dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque urna, molestie id cursus non, bibendum nec magna. Mauris consequat faucibus ante sollicitudin ullamcorper. Proin et felis orci. Nulla vitae diam sit amet felis semper ultricies. Nulla vitae mauris sit amet augue pulvinar pulvinar. Donec tincidunt viverra turpis eget suscipit. Morbi eu lacus iaculis turpis suscipit pretium. Aenean ultricies scelerisque dictum. Phasellus tincidunt, nibh lacinia facilisis aliquam, lacus quam condimentum orci, id lacinia justo odio vel purus. Mauris molestie tortor eu purus facilisis at congue sapien commodo. Sed ac eros vitae odio ultrices mollis nec a lorem. Phasellus sit amet dolor nec tellus consequat ornare sit amet ut ipsum. Vestibulum sagittis, mi sed pulvinar semper, lacus mauris lobortis eros, eu egestas est lectus nec lacus. Donec in lacus quis elit consectetur accumsan sit amet sed tortor. Etiam id vestibulum libero. Nam faucibus tincidunt felis, eu feugiat nibh fringilla vel. Donec adipiscing dictum imperdiet. Nulla ac fringilla neque. Curabitur posuere euismod est vel vehicula. Curabitur quis ligula sit amet quam tempus venenatis.</p></dd>
<dt>Integer rhoncus felis mauris.</dt>
<dd><p>Integer rhoncus felis mauris. Donec massa nisi, posuere vel posuere vel, suscipit sed magna. Sed congue scelerisque odio, faucibus tempor nisl posuere condimentum. In eu tellus vitae elit consequat pretium. Maecenas nec ultrices dolor. Curabitur eu pulvinar turpis. Aenean vel tortor justo, id dapibus velit. Mauris pulvinar massa sit amet erat mollis sit amet ornare tellus aliquet. Quisque ullamcorper elementum libero, ut vehicula neque placerat nec. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Morbi et ante turpis, et fringilla tortor. In hac habitasse platea dictumst. Proin eros urna, sagittis vitae tristique et, ullamcorper ac leo. Donec elementum arcu tortor. Praesent tincidunt dui in est adipiscing ac lobortis lorem porttitor. Nullam et dui elit. Vivamus hendrerit vestibulum enim, quis lobortis erat viverra vitae. Donec at pellentesque mi. Mauris lobortis libero ac metus ultricies accumsan. </p></dd>
<dt>Integer pretium porttitor lectus at tempor.</dt>
<dd><p>Integer pretium porttitor lectus at tempor. Donec nec cursus elit. Maecenas ornare malesuada urna vitae lobortis. Sed vulputate sapien quis purus cursus consectetur. Aenean nulla neque, egestas ut accumsan nec, convallis vel enim. Vestibulum vehicula interdum diam nec condimentum. Etiam in condimentum justo. Fusce a tortor metus, id pellentesque orci. Sed facilisis, tellus quis tempus faucibus, justo elit sodales lorem, eget placerat lectus risus bibendum ipsum. Donec varius mattis quam eu consequat. Praesent ut metus nec nibh tincidunt suscipit. Nam vulputate sodales egestas. Sed orci lectus, vestibulum ac gravida eget, congue non velit. Morbi rutrum convallis orci, in hendrerit arcu vulputate a. Aliquam aliquam facilisis libero, sit amet facilisis lacus tincidunt ac. Sed viverra nulla sit amet turpis egestas nec molestie justo congue. Vivamus a lacinia sem. Aenean ut metus arcu, non ornare orci. Praesent feugiat est eu tellus dictum ac imperdiet nisi imperdiet. </p></dd>
</dl>
CSS
html,body{
margin:0;
padding:0;
height:100%;
}
dl dt{
margin:20px 50px;
font-size:large;
border:1px solid #7BAEB5;
border-left:1em solid #7BAEB5;
padding-left:10px;
width:600px;
cursor:pointer;
}
div#grayLayer{
display:none;
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background:#7BAEB5;
filter:alpha(opacity=75);
opacity: 0.75;
}
#overLayer{
display:none;
width:400px;
background:white;
padding:10px;
position: fixed;
top:50%;
left:50%;
}
#overLayer img.close{
position:absolute;
top:-10px;
right:-10px;
cursor:pointer;
}
jQuery
$('dd').hide();
$('body').append('<div id="grayLayer"></div><div id="overLayer"></div>');
$('#grayLayer, #overLay img.close').on('click', function() {
$('#grayLayer').hide();
$('#overLayer').hide();
// TODO: 閉じるボタンが効かない
});
$('dt').click(function() {
$('#grayLayer').show();
$('#overLayer').show()
.html('<img src="./image/close.png" class="close" />' + $('+dd', this).html())
.css({
marginTop: '-' + $('#overLayer').height() / 2 + 'px',
marginLeft: '-' + $('#overLayer').width() / 2 + 'px'
});
});
JavaScript
// テキスト非表示・モーダル仕込み
document.querySelectorAll('dd').forEach(function(value) {
value.style.display = 'none';
});
var grayLayer = document.createElement('div');
grayLayer.setAttribute('id', 'grayLayer');
var overLayer = document.createElement('div');
overLayer.setAttribute('id', 'overLayer');
document.body.appendChild(grayLayer);
document.body.appendChild(overLayer);
// モーダル閉じる
document.querySelectorAll('#grayLayer, #overLay img.close').forEach(function(value) {
value.addEventListener('click', function() {
grayLayer.style.display = 'none';
overLayer.style.display = 'none';
}, false);
});
// モーダル開く
document.querySelectorAll('dt').forEach(function(value) {
value.addEventListener('click', function() {
grayLayer.style.display = 'block';
overLayer.style.display = 'block';
var close = document.createElement('img')
close.setAttribute('src', './image/close')
close.setAttribute('class', 'close');
overLayer.textContent = this.nextElementSibling.firstElementChild.textContent; // dtの弟要素ddの子要素pのテキストを取得
overLayer.insertBefore(close, overLayer.lastElementChild);
overLayer.style.marginTop = '-' + overLayer.clientHeight / 2 + 'px';
overLayer.style.marginLeft = '-' + overLayer.clientWidth / 2 + 'px';
}, false);
});
フローティングウィンドウ
HTML
<a href="#floatWindow" class="open">フローティングウィンドウの表示</a>
<div id="floatWindow">
<a href="sample1.html" class="close"><img src="./image/close2.png" alt="閉じる"></a>
<dl>
<dt>jQueryによるフローティングウィンドウの作成</dt>
<dd>このテキストはダミーテキストです。このテキストはダミーテキストです。このテキストはダミーテキストです。このテキストはダミーテキストです。このテキストはダミーテキストです。このテキストはダミーテキストです。このテキストはダミーテキストです。このテキストはダミーテキストです。このテキストはダミーテキストです。このテキストはダミーテキストです。このテキストはダミーテキストです。このテキストはダミーテキストです。このテキストはダミーテキストです。このテキストはダミーテキストです。</dd>
</dl>
</div>
CSS
#floatWindow{
display:none;
position:absolute;
width:500px;
height:400px;
top:100px;
left:100px;
}
#floatWindow a.close{
position:absolute;
right:20px;
top:1px;
}
#floatWindow a.close img{
border:none;
}
#floatWindow dl{
width:100%;
height:100%;
background:url("./image/floatWindow.png");
margin:0;
}
#floatWindow dl dt{
height:25px;
line-height:25px;
text-indent:1em;
color:white;
font-weight:bold;
cursor:move;
}
#floatWindow dl dd{
margin:0;
padding:2em;
line-height:1.5;
text-indent:1em;
}
jQuery
// フロートウィンドウの表示・非表示
$('a.open').click(function() {
$('#floatWindow').fadeIn('fast');
return false;
});
$('#floatWindow a.close').click(function() {
$('#floatWindow').fadeOut('fast');
return false
});
// フロートウィンドウのマウスドラッグ移動
$('#floatWindow dl dt').mousedown(function(event) {
// フロートウィンドウ上のマウス位置を取得しdata()にて一時格納
$('#floatWindow')
.data('clickPointX', event.pageX - $('#floatWindow').offset().left)
.data('clickPointY', event.pageY - $('#floatWindow').offset().top);
var x = event.pageX - $('#floatWindow').offset().left;
// マウス移動時のウィンドウ位置を設定
$(document).mousemove(function(event) {
$('#floatWindow').css({
'top': event.pageY - $('#floatWindow').data('clickPointY') + 'px',
'left': event.pageX - $('#floatWindow').data('clickPointX') + 'px'
});
});
}).mouseup(function() {
$(document).off('mousemove');
});
JavaScript
// フロートウィンドウの表示・非表示
document.querySelector('a.open').addEventListener('click', function(event) {
event.preventDefault();
document.querySelector('#floatWindow').style.display = 'block';
// TODO: フェードインアニメーションを追加...
}, false);
document.querySelector('#floatWindow a.close').addEventListener('click', function() {
event.preventDefault();
document.querySelector('#floatWindow').style.display = 'none';
// TODO: フェードアウトアニメーションを追加...
}, false);
// フロートウィンドウのマウスドラッグ移動
var floatWindow = document.querySelector('#floatWindow');
var dt = document.querySelector('#floatWindow dl dt');
dt.addEventListener('mousedown', function(event) {
// ウィンドウタイトルをクリック時のウィンドウ内座標を格納
var clickPointY = event.pageY - floatWindow.getBoundingClientRect().top;
var clickPointX = event.pageX - floatWindow.getBoundingClientRect().left;
// マウス移動に合わせてフロートウィンドウの位置を動的に設定
document.addEventListener('mousemove', moveWindow, false);
// クリックを離した時点でmousemoveイベントを解除
dt.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', moveWindow, false);
}, false);
/**
* フロートウィンドウ移動
*
* @param {object} event -イベントオブジェクト
*/
function moveWindow(event) {
floatWindow.style.top = event.pageY - clickPointY + 'px';
floatWindow.style.left = event.pageX - clickPointX + 'px';
}
}, false);
フォームのバリデーション
HTML
<div id="container">
<h1>当サイトへのお問い合わせ</h1>
<form action="complete.html" method="post">
<dl>
<dt>お名前<span>※</span></dt>
<dd><input type="text" name="name" size="80" class="validate required"></dd>
<dt>フリガナ</dt>
<dd><input type="text" name="furi" size="80"></dd>
<dt>郵便番号</dt>
<dd><input type="text" name="zip1" size="4" maxlength="4" class="validate number"> - <input type="text" name="zip2" size="3" maxlength="3" class="validate number"></dd>
<dt>メールアドレス</dt>
<dd><input type="text" value="" size="80" name="mail" class="validate mail"></dd>
<dt>メールアドレス(確認)</dt>
<dd><input type="text" value="" size="80" name="mail_check" class="validate mail mail_check"></dd>
<dt>性別<span>※</span></dt>
<dd>
<input type="radio" value="男性" name="gender" id="man" class="validate required"> <label for="man">男性</label>
<input type="radio" value="女性" name="gender" id="woman"><label for="woman">女性</label>
</dd>
<dt>どこでこのサイトを知りましたか?<span>※</span></dt>
<dd class="checkboxRequired">
<input type="checkbox" name="search" id="search" value="検索エンジン"> <label for="search">検索エンジン</label>
<input type="checkbox" name="friend" id="friend" value="知人の紹介"> <label for="friend">知人の紹介</label>
<input type="checkbox" name="mail_magazine" id="mail_magazine" value="メルマガ"> <label for="mail_magazine">メルマガ</label>
<input type="checkbox" name="etc" value="その他" id="etc" class="validate add_text"> <label for="etc">その他</label>
<input type="text" name="etc_text" value="">
</dd>
<dt>お問い合わせ内容<span>※</span></dt>
<dd>
<textarea id="inquiry" name="inquiry"rows="10" cols="60"class="validate required"></textarea>
</dd>
</dl>
<p><input type="submit" value="送信"></p>
</form>
</div>
CSS
#container{
width:600px;
margin:0 auto;
padding:20px;
background:#F1F0F0;
border: 1px solid gray;
}
h1{
margin-top:20px;
font-size:large;
color:#7CADB6;
}
dl dt {
border-left:5px solid #7CADB6;
border-bottom:1px solid #7CADB6;
font-size:small;
margin:0;
padding:5px;
}
dl dt span{
color:red;
font-weight:bold;
}
dl dd{
font-size:small;
margin:0;
padding:10px;
}
dl dd input{
position:relative;
z-index:2;
}
dl dd label{
position:relative;
padding:5px 5px 5px 25px;
margin : 0 5px 0 -25px;
margin-left:-25px;
position:relative;
z-index:1;
}
dl dd.error input ,
dl dd.error textarea ,
dl dd.error label {
background:#FFCCCC;
}
* html dl dd.error label {
background:none;
}
*+html dl dd.error label{
background:none;
}
dl dd p.error{
margin:0;
color:red;
font-weight:bold;
margin-bottom:1em;
}
jQuery
$('form').submit(function() {
// エラーの初期化
$('p.error').remove();
$('dl dd').removeClass('error');
$('input[type="text"].validate,textarea.validate').each(function() {
// 必須項目のチェック
if ($(this).hasClass('required')) {
if ($(this).val() === '') {
$(this).parent().prepend('<p class="error">必須項目です</p>')
}
}
// 数値のチェック
if ($(this).hasClass('number')) {
if (isNaN($(this).val())) {
$(this).parent().prepend('<p class="error">数値のみ入力可能です</p>');
}
}
// メールアドレスのチェック
if ($(this).hasClass('mail')) {
if ($(this).val() && !$(this).val().match(/.+@.+\..+/g)) {
$(this).parent().prepend('<p class="error">メールアドレスの形式が異なります</p>')
}
}
// メールアドレス確認のチェック
if ($(this).hasClass('mail_check')) {
if ($(this).val() && $(this).val() !== $('input[name="' + $(this).attr('name').replace(/^(.+)_check$/, '$1') + '"]').val()) {
$(this).parent().prepend('<p class="error">メールアドレスと内容が異なります</p>');
}
}
});
// ラジオボタンのチェック
$('input[type="radio"].validate.required').each(function() {
if ($('input[name="' + $(this).attr('name') + '"]:checked').length === 0) {
$(this).parent().prepend('<p class="error">選択してください</p>');
}
});
// チェックボックスのチェック
$('.checkboxRequired').each(function() {
if ($(':checked', this).length === 0) {
$(this).prepend('<p class="error">選択してください</p>')
}
});
// その他の項目チェック
$('.validate.add_text').each(function() {
if ($(this).prop('checked') && $('input[name="' + $(this).attr('name').replace(/^(.+)$/, '$1_text') + '"]').val() === '') {
$(this).parent().prepend('<p class="error">その他の項目を入力してください</p>')
}
});
// エラー時の処理
if ($('p.error').length > 0) {
$('html,body').animate({
scrollTop: $('p.error:first').offset().top -40
}, 'slow');
$('p.error').parent().addClass('error');
return false;
}
});
JavaScript
document.querySelector('form').addEventListener('submit', function(event) {
// エラーの初期化
var errorMsgReq = document.querySelectorAll('p.error');
errorMsgReq.forEach(function(value) {
value.parentNode.removeChild(value);
});
document.querySelectorAll('dl dd').forEach(function(value) {
value.classList.remove('error');
});
document.querySelectorAll('input[type="text"].validate,textarea.validate').forEach(function(target) {
// 必須項目のチェック
if (target.className.search(/required/) !== -1) {
if (target.value === '') {
var pError = document.createElement('p');
pError.classList.add('error');
pError.textContent = '必須項目です'
target.parentNode.insertBefore(pError, target);
}
}
// 数値のチェック
if (target.className.search(/number/) !== -1) {
if (isNaN(target.value)) {
var pError = document.createElement('p');
pError.classList.add('error');
pError.textContent = '数値のみ入力可能です'
target.parentNode.insertBefore(pError, target);
}
}
// メールアドレスのチェック
if (target.className.search(/mail/) !== -1) {
if (target.value && !target.value.match(/.+@.+\..+/g)) {
var pError = document.createElement('p');
pError.classList.add('error');
pError.textContent = 'メールアドレスの形式が異なります'
target.parentNode.insertBefore(pError, target);
}
}
// メールアドレス確認のチェック
if (target.className.search(/mail_check/) !== 1) {
var mail = document.querySelector('input[name="' + target.getAttribute('name').replace(/^(.+)_check$/, '$1') + '"]' );
if (target.value && target.value !== mail.value) {
var pError = document.createElement('p');
pError.classList.add('error');
pError.textContent = 'メールアドレスと内容が異なります'
target.parentNode.insertBefore(pError, target);
}
}
});
// ラジオボタンのチェック
document.querySelectorAll('input[type="radio"].validate.required').forEach(function(target) {
var radio = document.querySelectorAll('input[name="' + target.getAttribute('name') + '"]');
var flag = 0;
radio.forEach(function(target) {
if (target.checked === true) { flag += 1; }
});
if (flag === 0) {
var pError = document.createElement('p');
pError.classList.add('error');
pError.textContent = '選択してください'
target.parentNode.insertBefore(pError, target);
}
});
// チェックボックスのチェック
document.querySelectorAll('.checkboxRequired').forEach(function(target) {
var checkbox = target.querySelectorAll('input[type="checkbox"]');
var checked = 0;
checkbox.forEach(function(target) {
if (target.checked === true) { checked += 1; }
});
if (checked === 0) {
var pError = document.createElement('p');
pError.classList.add('error');
pError.textContent = '選択してください'
checkbox[0].parentNode.insertBefore(pError, checkbox[0]);
}
});
// その他の項目チェック
document.querySelectorAll('.validate.add_text').forEach(function(target) {
var etcText = document.querySelector('input[name="' + target.getAttribute('name').replace(/^(.+)$/, '$1_text') + '"]');
if (target.checked && etcText.value === '') {
var pError = document.createElement('p');
pError.classList.add('error');
pError.textContent = 'その他の項目を入力してください';
target.parentNode.insertBefore(pError, target.parentNode.querySelector('input[type="checkbox"]'));
}
});
// エラー時の処理
var error = document.querySelectorAll('p.error');
if (error.length > 0) {
event.preventDefault();
document.body.scrollTop = error[0].getBoundingClientRect().top -40;
// TODO: スクロールアニメーションを追加...
error.forEach(function(target) {
target.parentNode.classList.add('error');
});
}
}, false);
カルーセルパネル
HTML
<div id="carouselWrap">
<p id="carouselPrev"><img src="./images3-11/btn_prev.gif" alt="前へ"></p>
<p id="carouselNext"><img src="./images3-11/btn_next.gif" alt="次へ"></p>
<div id="carousel">
<div id="carouselInner">
<ul class="column">
<li><a href="#"><img src="./images3-11/photo1_thum.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-11/photo2_thum.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-11/photo3_thum.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-11/photo4_thum.jpg" alt=""></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="./images3-11/photo5_thum.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-11/photo6_thum.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-11/photo7_thum.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-11/photo8_thum.jpg" alt=""></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="./images3-11/photo9_thum.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-11/photo10_thum.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-11/photo11_thum.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-11/photo12_thum.jpg" alt=""></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="./images3-11/photo13_thum.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-11/photo14_thum.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-11/photo15_thum.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-11/photo16_thum.jpg" alt=""></a></li>
</ul>
</div>
</div>
</div>
CSS
*{
margin:0;
padding:0;
}
#carouselWrap{
margin:100px auto;
width:620px;
height:135px;
padding:5px;
background:url("./images3-11/background.gif");
position:relative;
}
#carouselPrev{
position:absolute;
top:65px;
left:-8px;
cursor:pointer;
}
#carouselNext{
position:absolute;
top:65px;
right:-8px;
cursor:pointer;
}
#carousel{
width:100%;
height:100%;
overflow:hidden;
}
#carouselInner ul.column{
width:605px;
height:105px;
padding:15px 0 15px 15px;
list-style-type:none;
float:left;
}
#carouselInner ul.column li{
float:left;
margin-right:10px;
display:inline;
}
#carouselInner ul.column li img{
border:none;
}
jQuery
// 初期設定
$('#carouselInner').css('width', 620 * $('#carouselInner ul.column').length + 'px');
$('carouselInner ul.column:last').prependTo('#carouselInner');
$('#carouselInner').css('margin-left', '-620px');
// 戻るボタン
$('#carouselPrev').click(function() {
$('#carouselNext,#carouselPrev').hide();
$('#carouselInner').animate({
'margin-left': parseInt($('#carouselInner').css('margin-left')) + 620 + 'px'
}, 'slow', 'swing', function() {
$('#carouselInner').css('margin-left', '-620px');
$('#carouselInner ul.column:last').prependTo('#carouselInner');
$('#carouselNext,#carouselPrev').show();
});
});
// 進むボタン
$('#carouselNext').click(function() {
$('#carouselNext,#carouselPrev').hide();
$('#carouselInner').animate({
'margin-left': parseInt($('#carouselInner').css('margin-left')) -620 + 'px'
}, 'slow', 'swing', function() {
$('#carouselInner').css('margin-left', '-620px');
$('#carouselInner ul.column:first').appendTo('#carouselInner');
$('#carouselNext,#carouselPrev').show();
});
});
// 自動スライド
var timerID = setInterval(function() {
$('#carouselNext').click();
}, 5000);
$('#carouselPrev img,#carouselNext img').click(function() {
clearInterval(timerID);
});
JavaScript
// 初期設定
var carouselInner = document.querySelector('#carouselInner');
carouselInner.style.width = 620 * carouselInner.querySelectorAll('#carouselInner ul.column').length + 'px';
carouselInner.insertBefore(carouselInner.lastElementChild, carouselInner.firstElementChild);
carouselInner.style.marginLeft = '-620px';
// 戻るボタン
var prev = document.querySelector('#carouselPrev');
var next = document.querySelector('#carouselNext');
prev.addEventListener('click', function() { slidePrev() }, false);
// 進むボタン
next.addEventListener('click', function() { slideNext() }, false);
// 自動スライド
var timerID = setInterval(function() { slideNext(); }, 5000);
prev.nextElementSibling.addEventListener('click', function() { clearInterval(timerID) }, false);
next.nextElementSibling.addEventListener('click', function() { clearInterval(timerID) }, false);
function slidePrev() {
prev.style.display = 'none';
next.style.display = 'none';
// TODO: スライドアニメーションを追加
carouselInner.style.marginLeft = '-620px';
carouselInner.insertBefore(carouselInner.lastElementChild, carouselInner.firstElementChild);
prev.style.display = 'block';
next.style.display = 'block';
}
function slideNext() {
prev.style.display = 'none';
next.style.display = 'none';
// TODO: スライドアニメーションを追加
carouselInner.style.marginLeft = '-620px';
carouselInner.appendChild(carouselInner.firstElementChild);
prev.style.display = 'block';
next.style.display = 'block';
}
スライドギャラリー
HTML
<div id="container">
<div id="slideGallery">
<ul id="slide">
<li><a href="#"><img src="./images3-13/photo01.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-13/photo02.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-13/photo03.jpg" alt=""></a></li>
<li><a href="#"><img src="./images3-13/photo04.jpg" alt=""></a></li>
</ul>
<div id="nav">
<img src="./images3-13/nav_prev.png" class="prev">
<img src="./images3-13/nav_next.png" class="next">
</div>
<ul id="paging"></ul>
</div>
</div>
CSS
*{
list-style-type:none;
margin:0;
padding:0;
}
#container{
width:650px;
margin:100px auto;
}
#slideGallery{
width:650px;
position: relative;
overflow:hidden;
}
#slide{
width:10000px;
}
#slide li{
float:left;
}
#paging{
text-align: center;
position: absolute;
width:100%;
bottom:10px;
}
#paging li{
display: inline-block;
*display: inline;
*zoom:1;
width:20px;
height:20px;
background: url(./images3-13/page.png);
}
#paging li.active{
background: url(./images3-13/page_active.png);
}
#nav {
display: none;
}
#nav .prev{
position: absolute;
left:10px;
top:50%;
margin-top:-50px;
}
#nav .next{
position: absolute;
right:10px;
top:50%;
margin-top:-50px;
}
jQuery
// ページングの設定
$('#slide li').each(function() {
$('#paging').append($('<li></li>').attr('data-img', $('img', this).attr('src')));
});
$('#paging li:first-child').addClass('active');
// 自動スライドの設定
var timerId = setInterval(function() {
$('#nav .next').click();
}, 5000);
// 自動スライドの制御
$('#slideGallery').hover(function() {
$('#nav').show();
clearInterval(timerId);
}, function() {
$('#nav').hide();
timerId = setInterval(function() {
$('#nav .next').click();
}, 5000);
});
// 右矢印ボタンが押された際の挙動
$('#nav .next').click(function() {
$('#slide:not(:animated)').animate({
marginLeft: -1 * $('#slide li').width()
}, function() {
$('#slide').css('margin-left', '0');
$('#slide').append($('#slide li:first-child'));
$('#paging li.active').removeClass('active');
$('#paging li[data-img="' + $('#slide li:first-child img').attr('src') + '"]').addClass('active');
});
});
// 左矢印ボタンが押された際の挙動
$('#nav .prev').click(function() {
$('#slide:not(:animated)')
.css('margin-left', -1 * $('#slide li').width())
.prepend($('#slide li:last-child'))
.animate({
marginLeft: 0
}, function() {
$('#paging li.active').removeClass('active');
$('#paging li[data-img="' + $('#slide li:first-child img').attr('src') + '"]').addClass('active');
});
});
JavaScript
// ページングの設定
document.querySelectorAll('#slide li').forEach(function(value) {
var li = document.createElement('li');
li.setAttribute('data-img', value.querySelector('img').getAttribute('src'));
document.getElementById('paging').appendChild(li);
});
document.querySelector('#paging').firstElementChild.classList.add('active');
// 自動スライドの設定
var timerId = setInterval(function() { slideNext(); }, 5000);
// 自動スライドの制御
document.getElementById('slideGallery').addEventListener('mouseover', function(event) {
document.getElementById('nav').style.display = 'block';
clearInterval(timerId);
event.stopPropagation();
}, false);
document.getElementById('slideGallery').addEventListener('mouseout', function(event) {
document.getElementById('nav').style.display = 'none';
timerId = setInterval(function() { slideNext(); }, 5000);
event.stopPropagation();
}, false);
// 右矢印ボタンが押された際の挙動
document.querySelector('#nav .next').addEventListener('click', function() {
slideNext();
}, false);
/**
* スライド進む
*/
function slideNext() {
// TODO: スライドアニメーションを追加...
var slide = document.getElementById('slide');
slide.appendChild(slide.firstElementChild);
document.querySelector('#paging li.active').classList.remove('active');
document.querySelector('#paging li[data-img="' + slide.firstElementChild.querySelector('img').getAttribute('src') + '"]').classList.add('active');
}
// 左矢印ボタンが押された際の挙動
document.querySelector('#nav .prev').addEventListener('click', function() {
// TODO: スライドアニメーションを追加...
var slide = document.getElementById('slide');
slide.insertBefore(slide.lastElementChild, slide.firstElementChild);
document.querySelector('#paging li.active').classList.remove('active');
document.querySelector('#paging li[data-img="' + slide.firstElementChild.querySelector('img').getAttribute('src') + '"]').classList.add('active');
}, false);
...
HTML
...
CSS
...
jQuery
...
JavaScript
...
...
HTML
...
CSS
...
jQuery
...
JavaScript
...
...
HTML
...
CSS
...
jQuery
...
JavaScript
...