ラベル jQuery の投稿を表示しています。 すべての投稿を表示
ラベル jQuery の投稿を表示しています。 すべての投稿を表示

2012年10月21日日曜日

Google Map を扱うjQueryプラグイン

Google Map を扱うjQueryプラグインを調べて居たののでなんとなくメモ。
使い方の詳細は後々調べる予定。


a)jquery-ui-map
http://code.google.com/p/jquery-ui-map/

MITライセンスで公開されている。
他のプラグインがGoogleMapAPIをラップしているしているのに対して、jquery-ui-mapとう名前だけあって、角丸で表示したりと手を加えている。

jQuery Mobileと併用するサンプルが多く掲載されるし、見た目も統一感がとれている用にみえる。

サンプルはこちら
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html

b)jQuery Google Maps プラグイン  
http://labs.d-s-b.jp/plugins/jQuery/jQueryGoogleMaps/
https://github.com/dreamseeker/jQueryGoogleMaps

日本の方が開発していて、MITライセンスで公開されている。

地図表示時に、マーカーなどをJSONやXMLを外部から読み込んで表示することができるようになっている。
単に地図を表示するには便利そう。
ただ、mapにアクセスする手段がないので、後からマーカーを追加したらりイベントを追加するようなことはできなさそう。
＃誰か知ってたら教えてください。

c) gmaps.js
http://hpneo.github.com/gmaps/
MITライセンスで公開されている。

すごく使いやすそうなプラグイン。

gmaps.jsで作ったインスタンスを別の変数に保持しておく必要がある。

APIやサンプルがうまくまとまっている。
http://hpneo.github.com/gmaps/examples.html


d)gmap3
http://gmap3.net/
 
GPL v3 ライセンスで公開されている
mapはプラグイン内で管理していて、getアクションで取得できる。

マニュアルがちょっとわかりずらい印象。
$("#map").gmap3()に渡す連想配列で、動作を指定する。
addressで住所を指定すると、位置情報を変換する機能が内包されているなど、 高機能だけど指定の仕方はくせがある。


そのままGoogle Map APIを叩くか、プラグインを使って見るか悩みどころ。
特定ポイントの地図を表示するだけならプラグインを使った方がシンプルに記述ができそうだけど、いろいろと自分で処理を書き始めると、使っても使わなくても変わらなくなってきそう。
別にライブラリを読み込むこと考えるとなくてもいいかなぁと。
投稿者 時刻: 0 件のコメント:
ラベル: ,

2011年1月4日火曜日

jQuery Mobile その２（リンクのさせ方）

jQuery MobileでのリンクのデフォルトはAjaxで処理をするようになっている。

1)ページ内リンク
リンク先にID指定すると、ページ内にdata-role="page"で定義されているコンテンツに切り替えて表示をしてくれる。

指定例）
　<a href="#hoge">リンク</a>

2)ページ外リンク(Ajax)

リンク先に外部コンテンツを指定すると、表示をアニメーション付で切り替えて表示をしてくれる。
ただし、Ajaxで読みこむため、ＵＲＬが
　　　http://ドメイン/呼びもと.html#hoge.html
となり、少し使いづらい。ベースとなるＵＲＬが呼びもとのＨＴＭＬとなるため、画像のリンク切れとか。

指定例）
<a href="hoge.html">リンク</a>

3)ページ外リンク(Non Ajax)
Ajax抜きで通常のリンク処理のように画面全体をリフレッシュしたい場合は、
「rel="external"」 をタグの属性として指定する。
指定例）
<a  rel="external"  href="hoge.html">リンク</a>
投稿者 時刻: 0 件のコメント:
ラベル: ,

jQuery Mobile その１

jQuery Mobileを仕事で利用することになりそうなので、とりあえずメモ。

jQuery MobileはjQueryに追加するモバイル向けのＵＩ集。このため、jQueryは必須。

iOS,Android,Symbian,BlackBerryOSなど多くのプラットフォームをサポートしている。

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

基本的なページ構成は以下の通り。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf8">
<!-- jQuery Mobile用ＣＳＳ読み込み -->
<link rel="stylesheet" href="js/jquery.mobile-1.0a2.min.css" />
<!-- jQuery 本体読み込み -->
<script src="js/jquery-1.4.4.min.js"></script>
<!-- jQuery Mobile読み込み -->
<script src="js/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<!-- ページヘッダー部 -->
<div data-role="page" id="home">
<div data-role="header">
 <h1>Page Title</h1>
</div>
<!-- ページコンテンツ部-->
<div data-role="content">
 <p>Hello, world !</p>
</div>
<!-- ページフッター部 -->
<div data-role="footer">
 <p>フッター</p>
 </div>
</div>
</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル: ,

2009年2月12日木曜日

jQuery適当メモ 


[ｊＱｕｅｒｙ日本語リファレンス]
http://semooh.jp/jquery/cont/doc/release_1.3/

(1)ダウンロード
ダウンロードは以下から
[jQuery]
http://jquery.com/

開発用の非圧縮用と、公開用（？）圧縮されたライブラリが用意されいる。
試したときのバージョンは1.3.1

2)コアライブラリの読み込みと読み込み完了の関数実行

HTMLに以下を記載(srcの部分は環境に合わせて）
<pre>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script>
 jQuery.noConflict();
 jQuery(document).ready(function(){
  //実行したい内容を記載<br />}
</script>
</pre>
jQuery.noConflict()は他のライブラリを意識する場合に記述する。
記述すると、$のショートカット(?)は無効になるので、jQuery()の記述だけが利用できることになる。
prototype.jsと同時に使わなければ意識する必要なないようです。
以下のように戻り値を受け取ると、宣言した変数が$の代わりに使える。

　　　var j = jQuery.noConflict();

$は短くていいけど、個人的な趣味で以下はjQuery.xxxで書いておきます。

jQuery(document).ready(function(){})
はブラウザがＤＯＭを構成し終わった後に起動する関数オブジェクトを指定する。
いくつも重ねて書いてもいいようです。

(3)要素の指定方法

$(".クラス名");
$("タグ名");
$("#ID名");

(4)個人的に良く使いそうなメソッド

要素.addClass();//クラス追加
要素.removeClass();//クラス除外
要素.toggleClass(class)//要素に対し、指定CSSクラスがあれば削除し、無ければ追加する。

要素.html();//HTMLの取得/設定
要素.val();//value属性の取得/設定


(5)個人的に良くお世話になりそうなイベント

//クリックイベント
要素.click();

//要素にマウスが乗った時の動作イベント。
//overがマウスが乗った時、outが外れた時に呼び出す関数オブジェクトを指定する。
要素.hover(over, out);

(6)DOMの構成が終わった後のイベントに処理を追加

　$(document).ready(関数オブジェクト);

　or

$(関数オブジェクト);


例)読み込み直後にアラートを表示する例
$(document).ready(
function() {
  alert("jQuery START!!");
}
);

(7)選択済みラジオボタンのバリューを取得
未調査

(8)選択済みリストのバリューを取得
        //IDで指定
        var fid=jQuery('#ターゲット').val();
        //イベント処理を記述しているときなど
        var fid=jQuery(this).val();

        // 複数の要素が選択済みの可能性がある場合は、配列が帰ってくる
        var sel=jQuery("select option:selected");
        var fid=sel.val();


(9)リスト変更イベントに関数を登録
  jQuery("#ターゲット").change(関数オブジェクト);

(10)特定CSSクラスのエリアにマウスオーバーイベントに関数を登録

(11)データの書換え：直接
$(ターゲット).text();//テキストとして、（タグはそのまま表示される)
$(ターゲット).html();//HTMLとして(タグはきちんと解釈される）


(12)データの書換え：dom操作で
$(タゲット).before(要素);//同列で次に追加
$(ターゲット).after(要素);//同列で前に追加
$(ターゲット).prepend(要素);//子要素の最後に追加
$(ターゲット).append(要素);//子要素の最後に追加
$(ターゲット).empty(要素);//子要素をすべて削除
$(ターゲット).remove(要素);//ターゲット自体を削除

  要素：jQuery("<div>") とするとタグ名で指定できる
  　　　単純にテキストで記述してもOK

  //テキスト記述
  $("#hoge").append('<a href="http://www.google.com/">google</a>');
  //エレメント表記
  $("#hoge").append(
                $('<a>').attr("href", "http://www.google.com").html("google")
             );

(13)属性の操作
jQuery(":submit").attr("disabled", "disabled");//無効化
jQuery(":submit").removeAttr("disabled");//無効化解除

投稿者 時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)