スポンサーサイト

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

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をいじってみようと思います。
関連記事

コメントの投稿

非公開コメント

プロフィール

エロぺんぎん

管理人:エロぺんぎん
不純な動機でプログラマーになった男、エロぺんぎんです。ブラザー達を猛烈に応援したい気持ちと、自分もプログラマーとして成長したい思いで、当ブログを立ち上げました。
エロぺん動画を運営しております。

検索フォーム
Twitter
最新記事
最新コメント
カテゴリ
リンク
RSSリンク
エロぺん動画で人気の動画
人気の記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。