Posts tagged JavaScript

CakePHP JQuery ヘルパー

6198日

by matsuura in CakePHP

JQuery helper for CakePHP ( PQuery port ) at NGCoders
CakePHP から JQuery を簡単に使うことができます。

正確には PQuery ヘルパーかもしれません。PQuery は JQuery を PHP から簡単に使用するライブラリで PQuery ヘルパーと同じ開発者が開発しています。
参考：PQuery – PHP and JQuery at NGCoders

インストール

JQuery helper for CakePHP ( PQuery port ) at NGCoders から JQuery ヘルパーをダウンロードし、解凍した pquery.php を /app/views/helpers にコピーします。
そのほかに jquery.js ファイルも必要になります。こちらもダウンロードして /app/webroot/js にコピーします。

コントローラ

Pquery ヘルパーと Javascritp ヘルパーを使用します
var $helpers = array('Pquery', 'Javascript');

ビュー

jquery.js の読み込み
<?php echo $javascript->link('jquery.js'); ?>

使用例

トグルボタン

<div id='msg'>Message...</div>
<?php echo $pquery->link_to_function('toggle', $pquery->toggle('#msg'));?>

フォームで送信された内容により HTML を更新
入力したテキストを /controller/action/ に GET で送信し、id=idtoupdate に受け取った HTML を表示する

<?php echo $pquery->form_remote_tag(array('url'=>'/controller/action/','update'=>'#idtoupdate'));?>
<input type='text' name='field' />
<input type='submit' />

<div id='idtoupdate'></div>

pquery.php を見ると色々なメソッドがあります。使い方はソースを見ればすぐに分かると思います。

scriptaculous.js を使ってマトリックス状に配置した要素を並び替える

6200日

by matsuura in Ajax, JavaScript

scriptaculous.js を使って並び替えを行うを応用して格子状に並んだ要素を並び替える例です。基本的な部分はリスト形式の並び替えと同じですので省略します。
最初にデモ、その後にコードを紹介します。

デモ

#sortarea { width: 350px; } #sortarea div { float: left; width: 100px; height: 70px; border: 1px solid #000; margin: 5px; text-align: center; padding-top: 30px; cursor: default; }

ソートする要素

前回は li タグで要素を定義しましたが、今回は div タグで定義しました。
CSS で格子状に並ぶようにしています。

<style>
#sortarea {
width: 350px;
}

#sortarea div {
float: left;
width: 100px;
height: 70px;
border: 1px solid #000;
margin: 5px;
text-align: center;
padding-top: 30px;
cursor: default;
}
</style>

<div id="sortarea">
<div id="drag_1">A1</div>
<div id="drag_2">A2</div>
<div id="drag_3">A3</div>
<div id="drag_4">A4</div>
<div id="drag_5">A5</div>
<div id="drag_6">A6</div>
<div id="drag_7">A7</div>
<div id="drag_8">A8</div>
<div id="drag_9">A9</div>
</div>

ソートする JavaScript コード

Sortable.create の option に overlap:’horizontal’ を指定しなくても並び替えはできますが、少しぎこちない感じになりますので、指定しておいたほうがいいでしょう。

<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("sortarea",{
    tag:'div',overlap:'horizontal',constraint: false,
});
// ]]>
</script>

age Ajax class css drag http JavaScript LAN log option scriptaculous sort Tab tag 本

scriptaculous.js を使って並び替えを行う

6200日

by matsuura in Ajax, JavaScript

JavaScript の読み込み

まず prototype.js と scriptaculous.js を読み込む

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>

ソートするリストを作成する

ここでのポイントはドラッグさせたい要素に drag_1 のように「共通の名前+アンダバー+数字」を付けることです。

<ul id="sortarea">
<li id="drag_1">A1</li>
<li id="drag_2">A2</li>
<li id="drag_3">A3</li>
<li id="drag_4">A4</li>
<li id="drag_5">A5</li>
<li id="drag_6">A6</li>
<li id="drag_7">A7</li>
<li id="drag_8">A8</li>
<li id="drag_9">A9</li>
</ul>

ソートする JavaScript コード

ソートするエリアとソートする要素を定義した後で実際にソートするための JavaScript コードを書く。このコードがソートさせたい要素よりも前に書くとエラーになるので注意。

<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("sortarea",{
    onUpdate:function(){
        new Ajax.Updater(
        'sortarea',
        '/path/to/phpcode',
            {
                asynchronous:true,
                evalScripts:true,
                parameters:Sortable.serialize("sortarea")
            }
        );
    }
});
// ]]>
</script>

onUpdate でソート結果をPHP に送りデータベースなりに反映させる。
データベースに反映などが必要なければ、onUpdate は不要です。

デモ

これを実際に使用した例が下記になります。

#sortarea { width: 350px; border: 1px solid #000; } #sortarea li { cursor: default; }

LIST1
LIST2
LIST3
LIST4
LIST5
LIST6
LIST7
LIST8
LIST9

age Ajax class date drag function http JavaScript LAN PHP scriptaculous sort Tab

GoogleMap 特定のキーワードで表示させる

6229日

by matsuura in Ajax, Google

Google AJAX Search API を使用してキーワードや住所から自分のサイトに Google Map を表示させるメモ

Google AJAX Search API KEY と Google Map API KEY を指定して JavaScript を読み込む

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=Google AJAX Search API KEY" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Google Map API KEY" type="text/javascript"></script>

実際の表示部分。 q=キーワードで表示させる地図のキーワード（または住所）を指定する。

<script type="text/javascript">
<!--
var gls;
var gMap;

function OnLocalSearch() {
    if (!gls.results) return;
    var first = gls.results[0];
    var point = new GLatLng(parseFloat(first.lat), parseFloat(first.lng));
    var zoom = 15;
    gMap.addControl(new GSmallMapControl());
    gMap.addControl(new GMapTypeControl());
    gMap.setMapType(G_MAP_TYPE);
    gMap.setCenter(point, zoom);
    var marker = new GMarker(point);
    gMap.addOverlay(marker);
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });
}

function load() {
    gMap = new GMap2(document.getElementById("map"));
    gMap.addControl(new GSmallMapControl());
    gMap.addControl(new GMapTypeControl());
    gMap.setCenter(new GLatLng(0, 0));
    gls = new GlocalSearch();
    gls.setCenterPoint(gMap);
    gls.setSearchCompleteCallback(null, OnLocalSearch);
    var q = "横浜ランドマークタワー";
    gls.execute(q);
}
//-->
</script>

<body onLoad="load()">
<div id="map" style="width: 410px; height: 320px"></div>
</body>

各 API KEY の取得は下記ページから
Sign-up for an AJAX Search API Key – Google AJAX Search API – Google Code
Sign Up for the Google Maps API – Google Maps API – Google Code

Ajax API callback class cli click ec element event file function Google GoogleMap goolgemap HTML http JavaScript null zoo

CakePHP select タグの選択していないときの状態を指定する

6256日

by matsuura in CakePHP

Cute CakePHP Trick of the Day – GenerateList Empty Slot In List | Web Development 2.0: Web Design, CakePHP, Javascript
で select タグの選択していないときの状態の値を指定する方法が書かれていますが、この方法は間違っています。

元のエントリのコメントでも指摘されていますが、ヘルパーのメソッドの使い方が違います。コードを実際に書いて検証してみれば、動かないのがすぐに分かります。

元の紹介されている方法はそもそも PHP の文法的におかしいのでそこは適当に修正して紹介します。（変数名に $ がなかったり、generateList() を出力をどこにも保存していないかったりします。）

コントローラで下記のように generateList でリストを取得して
$state_id = $this->State->generateList();
ビューで
echo $form->input($state_id, array('empty' => '--'));
と紹介されています。

CakePHP1.1 の Formヘルパーには input メソッドがないので CakePHP 1.2 でのやり方だと思いますが、実際に Form ヘルパーの input メソッドは
function input($fieldName, $options = array())
と定義されています。上記のように書くと

で、実際にはどう書けばいいかというと
echo $form->input('Model/Field', array('empty'=>'---', 'type'=>'select', 'options'=>$state_list));
または、
echo $form->select('Model/Field', $state_list, null, null, array('empty'=>'---'));
と書けば select タグの先頭に
<option value=''>---</option>
と入ります。

CakePHP1.1 では「CakePHP HTMLヘルパーで select タグを表示する」のエントリで書いたように結構面倒だったので新しい Form ヘルパーは使いやすいですね。

CakePHP ec form function generateList HTML http IE input JavaScript log model null option PHP select web development

optionタグを選択不可にする disabled 属性を IE6 でも有効にする方法

6340日

by matsuura in HTML

optionタグを選択不可にする disabled 属性で紹介したように option タグに disabled 属性を指定することにより選択不可にすることができるのですが、IE6 では選択できてしまいます。

JavaScript で解決する方法です。

Select, Option, Disabled And The JavaScript Solution

上記の参考サイトに詳しくやり方が書かれていますので、簡単に手順だけ紹介。

参考サイトの「Implementing」にある download リンクより JavaScript コード(select-option-disabled-emulation.js)をダウンロード
select-option-disabled-emulation.js を適当な場所に保存
html 内で select-option-disabled-emulation.js を読み込む
選択不可にしたい option タグに disabled 属性を指定する

DHTML で解決する方法です。

これは上記参考サイトの補足で紹介されていたサイトです。
apptaro’s blog: Emulating Disabled Options in IE with DHTML Behaviors

こちらも上記URL に詳しいやり方が書かかれていますので、簡単にご紹介。

参考サイトの中央よりやや下にある Download よりファイル一式をダウンロード
適当な場所に css, htc ファイルを保存
html で上記 css を読み込む
選択不可にしたい option タグに disabled 属性を指定する

これで IE6 でも option タグの disabled 属性が使えるようになりました。

app behavior css disable download ec HTML http IE IE6 JavaScript log option select URL

WordPress に「はてなスター」を導入してみました

6367日

by matsuura in WordPress

はてなスターを導入してみました。

このブログは WordPress でやっています。
はてなスターはじめてガイド – Hatena Starに対応ブログサービスに入っていたので早速 JavaScritp コードを header.php のの前に入れてみました。
ところが、サイドメニューの「Category」などの横に表示されてしまいました。
どうも h3タグの中のaタグに☆ボタンを入れているようです。

再度、はてなスターはじめてガイドを見ると

技術的な詳細については、HatenaStar.js下部のドキュメント（英語）をご覧ください。

とあります。早速ソースを見てみると最後の方に色々とドキュメントが書かれています。

// This is the optional script for WordPress blogs
<script src=”http://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.js” type=”text/javascript”></script>

とありました。

で、

<script src="http://s.hatena.ne.jp/js/HatenaStar.js" type="text/javascript"></script>
<script src="http://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.js" type="text/javascript"></script>

と書くことにより、うまく行きました^^

さらにコメントをつけられるように、自分のブログを登録します。登録すると新たにコメントを付けられる JavaScript が発行されるので、それを追加すると。。。また、h3タグの後ろに☆ボタンが。。。

よくみるとブログ登録後に発行された JavaScritp の1行目は HatenaStar.js を読み込むもので、一番最初に貼り付けたコードと同じでした orz
で、結局ブログ登録後に発行された JavaScript と WordPress.js を読み込む JavaScript を貼り付けることにより、うまく行きました。

ブログ登録後に表示されるコードはトークンが追加されたということですね。

class hatena http JavaScript log NAS option PHP Word WordPress

« Previous

Posts tagged JavaScript

CakePHP JQuery ヘルパー

インストール

コントローラ

ビュー

使用例

scriptaculous.js を使ってマトリックス状に配置した要素を並び替える

デモ

ソートする要素

ソートする JavaScript コード

scriptaculous.js を使って並び替えを行う

JavaScript の読み込み

ソートするリストを作成する

ソートする JavaScript コード

デモ

GoogleMap 特定のキーワードで表示させる

CakePHP select タグの選択していないときの状態を指定する

optionタグを選択不可にする disabled 属性を IE6 でも有効にする方法

JavaScript で解決する方法です。

DHTML で解決する方法です。

WordPress に「はてなスター」を導入してみました

カテゴリー

アーカイブ