bootstrapのJavascriptを使ってみる

スポンサーサイト

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-------- スポンサー広告

前回のview.phpを、bootstrapで少しかっこよくしましょう。

といっても、「お気に入りに追加」ボタンの見た目を変える程度です。通信中は押せないようにして、さらにボタンのテキストも変更します。

では、ソースから。

view.php


<?php
$body = "<iframe src='http://flashservice.xvideos.com/embedframe/" . $_GET['video'] . "'";
$body .= " frameborder=0 width='600' height='480' scrolling=no></iframe>";
?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <title>動画内容</title>
    </head>
    <body>
        <?php
            echo $body;
        ?>
        <br/>
        <input type="button" id="addDB" value="お気に入りに追加" class="btn btn-primary" data-loading-text="登録中..." data-comp-text="登録完了"/>
        <div id="res">結果がここに表示されます。</div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script>
        $(document).ready(function() {
            $("#addDB").click(function () {
                $(this).button('loading');
                $.ajax({
                    url: 'db_add.php',
                    type: 'GET',
                    data: {
                        vurl:"<?= $_GET['video'] ?>",
                        thum:"<?= $_GET['thum'] ?>"
                    },
                    dataType: 'html'
                })
                .done(function(data) {
                    $("#res").html(data);
                    $("#addDB").button('comp');
                })
                .fail(function(data) {
                    $("#res").html(data.responseText);
                    $("#addDB").button('reset');
                });
                return false;
            });
        });
        </script>
     </body>
</html>

ちょこちょこと変わってますね。

上からいくと、まずはheadタグにbootstrap.min.cssを入れました。

次にボタン部分のHTMLに、

class="btn btn-primary" data-loading-text="登録中..." data-comp-text="登録完了"

が追加されてます。
classの指定はbootstrapの見た目にしています。btn-primaryは青い感じになりますね。

data-loading-text
ここには、読込中の際に表示されるボタンのテキストを指定してます。

data-comp-text
これは、data-XXX-textの形で好きに決めていいのですが、Javascriptで指定したタイミングでボタンのテキスト内容を変更できます。今回は通信完了時に表示させるテキストを指定してます。

次は、jquery読み込みの後にbootstrap.min.jsを読み込んでます。

そして最後にJavascript部分。

$(this).button('loading');
これは、ボタンがクリックした最初に指定してます。これで、ボタンのテキスト内容がdata-loading-textに置き換わり、ボタンのCSSも押せないボタンに変えてくれます。

thisというのは、現在のDOMを指定する時に使います。結構頻繁に使いますし、複数ボタンがある場合にも関数が一つで済むので、便利です。

$("#addDB").button('comp');
というのは、先程あったdata-comp-textにテキストが変更されます。compの部分は$().button('XXX');で自由に指定可能です。

そして今回、通信失敗した際にボタンの表示をもとに戻すため、failを追加して

$("#addDB").button('reset');

を指定してます。これで、通信エラーの場合にボタンが「お気に入り追加」の状態に戻ります。

だだーと説明したましたが、詳しく知りたい場合は自分で調べてみてください。今更ですが、時々間違ったことを書くことだってありますので、指摘して頂けると嬉しいです。

これで少しかっこよくなっただけでなく、ユーザビリティも上がります。ボタンを押したらすぐにレスポンスがあるのが良いのです。例え「処理待ちです・・」という表示でも、押したのか押してないのか分からない状態より良いですよね。通信が遅い際にもきっと役に立ちます。

XAMPP内で自分のPC上でやっているので、一瞬過ぎて分からないレベルかもしれませんが・・。

次回は、list.phpをいじってみようと思います。

関連記事

2013-04-12 JavaScript Comment:0 Trackback:0

このページのトップへ

トラックバック

この記事にトラックバックする(FC2ブログユーザー)

このページのトップへ

コメントの投稿

このページのトップへ