2011年05月15日

jQuery UI Tabs のCSSを変更してタブの背景を変える

ライブラリ:jQuery UI Tabs

jQuery UI Tabsを使うと、簡単にタブを表現することができます。なのですが、初期のCSSのままじゃ物足りないな〜と思いヘッダーの画像の背景を変えて、タブの印象を変えてみました。
ちなみに、ヘッダーの背景というのは、タブを選択する部分の背景のことを言っています(一般的に何て呼ぶのかはわかりません)。
初期のヘッダーの背景は以下のようになっています(クリックすると実際の大きさで見れます)。
default_bg_image

このオレンジ色のグラデーションの画像を他の画像に変更してみます。

jQuery UI Tabsを使う場合、jquery-ui.custom.cssというCSSファイルを読み込むと思います。このファイルの中にヘッダーの画像を指している箇所があるので、その部分を書き換えます。
タブのヘッダーや中身に使用する画像・文字のフォントなどを指定している箇所は、以下の部分です(Component containersというコメントから始まる部分です)。
/* Component containers
----------------------------------*/
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

この中に
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }

という行があります。この行のbackgroundのurlに画像ファイルを指定します。
今回は、以下のような100×100の黄色のグラデーション画像を用意しました(画像のサイズは500×100でなくても大丈夫みたいです)。
ui-bg_gloss_org1_100_100

この画像をui-bg_gloss_org1_100_100.pngという名前で保存して、以下のようにCSSを変更しました(赤字が変更した箇所です)。
.ui-widget-header { border: 1px solid #ffff00; background: #f6a828 url(images/ui-bg_gloss_org1_100_100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }

背景画像に合わせて、ボーダーの色を黄色に変えました。
ブラウザで見ると、次のようになります(クリックすると実際の大きさで見れます)。
yellow_bg_image

ちゃんと変更されています。
用意するのが面倒だけど、いろいろな背景画像を用意して試してみたいです。

2010年10月09日

jQuery.uploadでファイルアップロード

言語(クライアント側):JavaScript
言語(サーバ側):PHP
ライブラリ:jQuery

jQueryにはuploadというファイルアップロードのためのプラグインがあります。これを使うと、ボタンでsubmitさせなくてもサーバにファイルをアップロードすることができます。

今回は、使い方と使用例を紹介します。

ダウンロードはこちらから。

1. jQuery.uploadメソッド


jQuery.uploadの形式は次のようになっています。
upload(url, data, callback, type)

使い方は、type属性にfileを指定した<input>タグにidを設定して、それをjQueryで呼び出します。

例えば
<input id="upload" type="file" name="upload" enctype="multipart/form-data">

というタグに対して、
$("#upload").upload(...);

というようにメッソドを呼び出します。

気になった点としては、<input>タグの下に別のタグを配置すると、アップロードした瞬間、表示がずれるという現象が起きることです。

2. jQuery.uploadの引数


url
  対応するサーバ側スクリプトのURL。

data
  サーバに送信するデータ。
  josn形式:{'key':'value'}
  GET形式:key1=value1&key2=value2...
  などの形式で指定する。

callback
  アップロード完了後に呼ばれる関数。

type
  サーバからのレスポンスデータの形式。
  'json', 'text', 'xml', 'html', 'script'のどれか。





3. 使用例


ファイルを指定して「アップロード」ボタンを押すと、引数dataで指定した日時が付加されたメッセージがブラウザに表示されるというシンプルなものを実装しました。

3.1 クライアント側
クライアント側のソースは以下のようになります。赤い部分がjQuery.uploadの呼び出しです。
<html>
    <head>
        <title>jQuery.upload+PHP</title>
        <script type="text/javascript" src="../common/js/jquery.js"></script>
        <script type="text/javascript" src="../common/js/jquery.upload.js"></script>
        <script type="text/javascript">
        <!--
        function uploadFile() {
            $('#upload').upload(
                'upload.php',
                {now:'2010/10/08'},
                function (res) {
                    $("#result").html(res);
                },
                'text'
            );

        }
        -->
        </script>
    </head>
    <body>
        <input id="upload" type="file" name="upload" enctype="multipart/form-data"><br>
        <button onclick="uploadFile()">アップロード</button><br>
        <div id="result"></div>
    </body>
</html>

3.2 サーバ側
サーバ側のPHPスクリプト(ファイル名はupload.php)は以下のようになります。
is_uploaded_file関数は指定されたファイルがHTTPのPOSTでアップロードされたのもであればtrueを返し、そうでなければfalseを返します。
<?php
    if ( is_uploaded_file( $_FILES['upload']['tmp_name'] ) ) {
        echo $_POST['now'] . 'にアップロードされたファイルです';
    } else {
        echo $_POST['now'] . 'にアップロードされたファイルではありません';
    }
?>


2010年09月25日

jQuery+PHPでPOSTのHTTP通信

言語:JavaScript, PHP
ライブラリ:jQuery

jQueryを使うと、submitしなくてもサーバとやりとりができます。
クライアント側でJavaScript+jQuery、サーバ側でPHPを使用してPOSTしてみました。

1. jQuery.post(url, data, callback, type)でPOSTリクエスト送信
jQueryのpostというメソッドを使うとサーバにPOSTリクエストを送信することができます。

2. postメソッドの引数
url
  リクエスト送信先のURL。
data
  送信するデータ。連想配列で指定。
callback
  通信成功時に実行する関数(コールバック関数)。
type
  送信データの形式(未指定でもOKみたい)。

また、戻り値はXMLHttpRequestオブジェクトです。

3. 使用例
「POSTする」ボタンを押すと、HTTP通信して得た文字列(Hello world!!)をページに表示するコードです。

クライアント側のコードは以下のようになります。
<html>
    <head>
        <title>jQuery+PHPでPOST</title>
        <script type="text/javascript" src="/src/common/js/jquery.js"></script>
        <script type="text/javascript">
        <!--
        function clickButton() {
            $.post("./post.php", {}, function(data) {
                $("#ret").html(data);
            });

        }
        -->
        </script>
    </head>
    <body>
        <button onclick="clickButton()">POSTする</button>
        <div id="ret"></div>
    </body>
</html>

サーバ側のPHPスクリプト(post.php)は以下のようになります。
<?php

echo('Hello world!!');

?>

echoで出力した文字列がレスポンスされます。

$.postの他にも、GETで通信する$.getというメソッドもあります。また、失敗時の処理を指定したり、パラメータを細かく指定したい場合は、$.ajaxを使います。これらのメソッドはまた別の記事で書きたいと思います。

2010年09月24日

jQueryでCSSの変更

言語:JavaScript
ライブラリ:jQuery

4月から某IT企業で働いているのですが、Webシステムの開発をやるようになって、JavaScript+jQueryで動的にいろいろな処理をしています。

はっきり言って、jQueryは良い感じです。
ということで、jQueryでCSSを扱う方法を記事にしてみました。

CSSの変更
構文的には
$("#エレメントのID").css(属性, )
です。

以下に例を示します(赤い部分)。
<html>
    <head>
        <title>jQyeryでcssを変更</title>
        <script type="text/javascript" src="/src/common/js/jquery.js"></script>
        <script type="text/javascript">
        <!--
        window.onload = function() {
            $("#change_css").css("border-style", "solid");
            $("#change_css").css("border-color", "#FF0000");
        }
        -->
        </script>
    </head>
    <body>
        <div id="change_css">Hello World!!</div>
    </body>
</html>

この例はボックスの枠を赤くするだけです。


jQueryはかなり使えるので、まだまだ勉強中です。記事も増えそうです。