jQueryを利用すれば、動的にページのある部分をコピーして違う場所に表示できたりします。
いくつまで内容を増やしたいか、ユーザーに任せる場合などは、これが便利です。
//Javascript内 事前にjQueryは読み込んでおきます。
function addBold(){
$("b").clone().prependTo("p");
}
//HTML
<input type="button" onclick="addBold();" value="太字部分をコピー" />
<b>Hello</b><p>, how are you?</p>
ボタンをクリックすると、
の前にHelloがコピーされます。
チェックボックスを利用するフォームでは、当てはまる項目が多い場合は、手で全部選択するのは面倒ですよね？
また、選択した後に、「あ、違った！」ということで、全部外すのも面倒ですよね？
jQueryを利用して「全選択」・「選択を外す」ができます。
下記にサンプルを載せておきます。
/**
* Javascript 全てのチェックボックスをチェック・解除する
*/
//全てのチェックボックスをチェック
$(function(){
$("#toggle").click(function(){
$('.chkbox').attr('checked', $(this).attr('checked'));
$('#toggleoff').removeAttr('checked', $(this).attr('checked'));
});
});
//全てのチェックボックスのチェックを解除
$(function(){
$("#toggleoff").click(function(){
$('.chkbox').removeAttr('checked', $(this).attr('checked'));
$('#toggle').removeAttr('checked', $(this).attr('checked'));
});
});
<!--HTML--> <input class="chkbox" type="checkbox" name="fruit" value="みかん"> <input class="chkbox" type="checkbox" name="fruit" value="りんご"> <input id="toggle" type="checkbox"> すべて選択する<br> <input id="toggleoff" type="checkbox"> 選択を解除<br>
jQueryを使って他のページのコンテンツを読み込んで表示させる方法です。
動的なサイトにすることもできるし、SSI的に使えますね。
/inc/menu.htmlを読み込んで、Webページの
内に表示したい場合
jQueryを読み込んでからmenu.jsという外部ファイルを作って次のように記述します。
window.onload = function() {
$("#menu").load("/inc/menu.html");
}
参考：jQuery Ajax/load
http://docs.jquery.com/Ajax/load#urldatacallback
jQuery日本語チュートリアル
http://docs.jquery.com/Tutorials#.E6.97.A5.E6.9C.AC.E8.AA.9E.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB
jQueryを使って、セレクト(
<select id="fruits" name="fruits"> <option value="melon">メロン</option> <option value="apple">りんご</option> <option value="banana">バナナ</option> </select>
<script type="text/javascript">
$("#fruits").change(function(){
var fruit = $("#fruits option:selected").val();
alert(fruit);
});
jQuery Accordionを利用すると、手っ取り早くアコーディオンメニューを作ることができます。
アコーディオンメニューとは、マウスオーバーすると、中身が開いて見えるメニューのことです。
jQuery UI – Accordion Demos & Documentationの解説サイト（英語）
http://jqueryui.com/demos/accordion/#option-animated
しかし、これを利用していると、中のメニューに時々いらないスクロールバーが出現してしまいます。
CSSに次の記述をすると、このスクロールバーが見えなくなります。
.ui-accordion .ui-accordion-content{ overflow:hidden !important; }
参考：How to avoid scrollbars when using jQuery Accordion（英語）
http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion