Tag Archives: jQuery

[CSS, jQuery]クリックされたボタンの色を変更したり文字を書き換えたりする

Facebook にシェア
Delicious にシェア
LINEで送る
Pocket

ボタンをクリックした際にクリック済みを表すクラスを付ける場合は jQuery の addClass() や toggleClass() を使用すれば簡単です。
toggleClass() はクリックするごとにつけたり外したり出来ます。

<script>
$(function(){
    $('.btn').on('click', function(){
        $(this).toggleClass('active');
    });
});
</script>

これでクラス名「btn」を持つ要素をクリックした際、その要素に「active」というクラスが追加されます。
クリック済みの要素の色を変えるだけなら「.btn.active」に対して CSS を書くだけで終わりです。
しかし、クリックしたらボタンの文字を書き換えたい場合、更に一工夫必要です。

click-done

javascript を使って書き換えてしまうなら jQuery の html() で変更できます。
data属性を使ってデフォルトの文字「data-text-default」、クリック後の文字「data-text-clicked」を持たせて、ボタンの状態に応じてテキストを書き換えます。
hasClass() を使うとクラス active を持っているかどうかを簡単に確認できます。

<a class="btn" data-text-default="Click" data-text-clicked="Done" href="#">Click</a>
$(function(){
    $('.btn').on('click', function(){
        $(this).toggleClass('active');

        if($(this).hasClass('active')){
            var text = $(this).data('text-clicked');
        } else {
            var text = $(this).data('text-default');
        }
    });
});

変更後の文字が単純な場合や、javascript を自由に書き換えられる状態ならこれでも良いのですが、そうでない場合は CSS で切り替えを表現します。

Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
            crossorigin="anonymous"></script>

        <style>
        .btn
        {
            display: block;
            width: 96px;
            height: 32px;
            line-height: 32px;
            background-color: #3692ff;
            color: #fff;
            text-align: center;
        }

        .btn.active {
            background-color: #ccc;
        }

        .btn > span:last-of-type,
        .btn.active > span:first-of-type
        {
            display: none;
        }

        .btn.active > span:last-of-type {
            display: inline;
        }
        </style>

        <script>
        $(function(){
            $('.btn').on('click', function(){
                $(this).toggleClass('active');
            });
        });
        </script>
    </head>
    <body>
        <a class="btn" href="javascript:void(0)">
            <span>Click</span>
            <span>Done</span>
        </a>
    </body>
</html>

ボタン要素 <a> 内にある2つの span のうち、最初のものがデフォルトに表示され、2番めがクリック後に表示されます。
必要に応じて <span> 内で <img> などを使っても構いません。
クラス active がつけられると、最初の span が非表示にされ、2番めの span が表示されます。
CSS はやや複雑ですが、Javascript 部分はクラスをつける処理だけあればいいので簡潔に出来ます。

Posted in JavaScript, HTML, CSS | Tagged , , | Leave a comment

[JS][jQuery]フォームから複数のファイルをアップロード(入力欄の動的追加)

Facebook にシェア
Delicious にシェア
LINEで送る
Pocket

フォームを使ってアップロードする際、ファイル数を制限することなくアップロードをする場合、たいていは jQuery UploadFilePlupload などの高性能なプログラムを利用するケースがほとんどだと思いますが、単純に必要な数だけファイル入力欄が表示されていれば良いという程度であれば次のようなものでも十分実現できます。

<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
	$(".fileinput").change(fileInputChange);
});

function fileInputChange(){
	if($(".fileinput").last().val() != ""){
		$("#filelist").append('<li><input type="file" name="uploadfile[]" class="fileinput" /></li>')
		.bind('change', fileInputChange);
	}
}
</script>
</head>
<body>

<form action="upload.php" method="post" enctype="multipart/form-data">
<ul id="filelist">
  <li><input type="file" name="uploadfile[]" class="fileinput" /></li>
</ul>
<p><input type="submit" value="Upload" /></p>
</form>

</body>
</html>

form

初期状態ではファイル入力フィールドは1つだけ表示されていますが、ファイルを指定すると新しいフィールドが動的に追加されます。原理的には最後の項目が空欄でなければ新しい input フィールドを自動追加するというものです。

万一ブラウザで JavaScript が無効化されていたとしても最低1つはアップロードできます。

もちろん <input> に「multiple」を指定するという方法でも一度に複数のファイルを選択できますが、フォルダをまたいだ選択や、順序が重要なケースでは使いにくいこともあるのでこういったシンプルな方法を取るのもひとつの手だと思います。

Posted in JavaScript | Tagged , | Leave a comment

[PHP, JS]jQuery UI autocompleteを使った自動補完(候補予測)

Facebook にシェア
Delicious にシェア
LINEで送る
Pocket

キーワード検索を行う際、入力欄に文字の一部を入力すると当てはまる単語をリストアップしてくれるオートコンプリート(自動補完)機能は便利です。
jQuery UI には Autocomplete というウィジェットが用意されており、それを使えば簡単に実現できます。
あらかじめ単語が決まっていて、数が少ないのであればそのまま Javascript 内に単語一覧を書いてしまえばいいのですが、MySQL などのデータベースに登録されている情報を元に候補一覧を表示したい場合、Ajax を利用して PHP などから動的に取得する必要があります。

form.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Auto Complete</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script>
$(function() {
	$("#sample").autocomplete({
		source: "./autocomplete.php"
	});
});
</script>
</head>
<body>

<form>
<input type="text" id="sample" />
</form>

</body>
</html>

autocomplete.php

<?php
// 単語のリスト
$list = array(
	'Apple',
	'Orange',
	'Grape',
	'Banana',
	'Pear',
	'Melon',
	'Peach',
	'Lemon'
);

$words = array();

// 現在入力中の文字を取得
$term = (isset($_GET['term']) && is_string($_GET['term'])) ? $_GET['term'] : '';

// 部分一致で検索
foreach($list as $word){
	if(mb_stripos( $word, $term) !== FALSE){
		$words[] = $word;
	}	
}

header("Content-Type: application/json; charset=utf-8");
echo json_encode($words);

必要となるのはフォームの記述されたファイルと Ajax 処理を行う PHP ファイルです。
データの受け渡しは JSON で行われ、テキストボックスに現在入力中の文字は通常 term に格納されて渡されます。
サンプルでは単純に固定の単語一覧を JSON に変換して表示していますが、データベースから取得する場合は WHERE ~ LIKE で絞り込んだ単語一覧を JSON に変換します。データベースへの負荷を減らすためにセッション等にキャッシュするのも良いと思います。
デフォルトでは一文字入力していれば候補を表示しますが、オプションで minLength を指定すれば最小文字数を変更できます。

$( "#sample" ).autocomplete({
    source: "./autocomplete.php",
    minLength: 3
});

参考: Autocomplete Widget
http://api.jqueryui.com/autocomplete/

Posted in PHP, JavaScript | Tagged , , , | Leave a comment