Webサイト制作者必見!jQueryTipsのTips5選 | 千葉で集客ホームページ制作はティーエスフォート
コラム

Webサイト制作者必見!jQueryのTips5選

Webサイト制作者必見!jQueryのTips5選

今回は、Web制作で見た目部分を見やすくしたり、ユーザー操作を改善する上で活用することのできる、軽量の JavaScript ライブラリ、jQueryを使ったTipsを5つご紹介します。

1.マウスオーバーで画像の変更

多くのサイトで使われているのが画像のマウスオーバー時の効果です。マウスを乗せることで画像が変わるとユーザーへの印象付けもよくなる効果があります。画像名の最後に、通常時の画像には 「_off」を、マウスオーバー時の画像には「_on」を付けて保存するだけです。

2.外部リンクを別タブで開く

リンクをクリックした時、同じタブでページを開くのではなく、新しいタブを開いて、そちらで開きたい時があります。ユーザーに対して、ページを離れてほしくはなく、また戻ってきてもらいたい場合などが該当するでしょう。
そのような場合は、http:// で始まるリンク先に、自動的に target="_blank" を追加することで、別タブで開くことができます。

3.チェックボックス複数選択の上限制御

Webサイトの中にはチェックボックスが複数あり、選択できる数を制限したい時があります。そのような時は以下のコードによって、選択できる数を2つまでに制限することができます。

$(function(){
$('input').click(function(){
varchecked_length=$('input:checked').length;

// 選択上限は2つまで
if(checked_length>=2){
$('input:not(:checked)').prop('disabled',true);
}else{
$('input:not(:checked)').prop('disabled',false);
}
});
});

4.Drupal8にjQueryのライブラリを読み込む

DrupalはWordPress以上にセキュリティ的に堅牢なCMSとして知られています。Drupal全体でライブラリを読み込むこともできますし、一部のページへのみライブラリ読み込むこともできます。

Drupal テーマ内でJavaScriptを読み込むためには theme名.libraries.yml というファイルの作成が必要になります。
テーマ名が「hoge」の場合は、ファイル名は 「hoge.libraries.yml」となります。
theme名.info.ymlファイルへの記載内容としては下記のようになります。

base:
version:VERSION1.x
css:
theme:
css/themify-icons.css:{}
css/bootstrap.css:{}
js:
js/jquery-1.10.2.min.js:{}



一部のブロックなどに限定する場合、.themeファイルに「THEME_preprocess_HOOK()」関数を実装して設定します。「THEME」をテーマ名に、「HOOK」をテーマフック名に置き換えます。

例えば、JavaScriptをメンテナンスページで使用する場合、「HOOK」部分は 「maintenance_page」となります。関数は次の通りです。

function fluffiness_preprocess_maintenance_page(&$variables){
$variables['#attached']['library'][]='fluffiness/cuddly-slider';
}

5.ページ途中からトップへするするっと戻る

ネットサーフィンをしていて一度は見かけたことがあるでしょう。特に長いページだとマウス操作によって一番下からトップまで戻るのが面倒な時があり、便利です。

瞬間的に移動するのではなく、移動していることがわかることでユーザーが移動していることを認知しやすい効果があります。

実現するためには、ページの一番上にスムーズに移動させるリンクを作ります。

<script>
$(function(){
$('.to-top').click(function(){
$('html,body').animate({
scrollTop:0
},500);
return false;
});
});
</script>


$(‘html,body’)は、scrollTopがクロスブラウザで効くように2つを指定しています。

return false;は、a要素がクリックされた時にjQueryだけが実行され、href属性は無視されます。
‘.to-top’の部分を、 ’a[href^=#]’に変更すれば、 「aのhrefの#で始まるリンクが」というセレクタの指定になります。

まとめ

今回のコラムでは、JavaScriptの便利なライブラリである、jQueryを使った小技をご紹介しました。

ちょっとした見た目、ユーザーインターフェースの改善には活用しやすい特徴がありますので、ぜひWebサイト制作に活用するとよいでしょう。

関連記事

ページ先頭へ