Home > jQuery Archive
jQuery Archive
【TIPS】ブラウザを閉じる時（ページが移動する時）のイベント
- 2010-01-31 (日)
- jQuery
gmailのようにメールを作成しているとき、ブラウザを閉じようとすると
「作成中ですが、ブラウザを閉じてよいですか」みたいな旨の確認ダイアログを表示されますね。
今回その処理を紹介します。
//
// ブラウザー閉じる時確認
//
var BrowserClose = {
// ブラウザーを閉じるかどうかの確認フラグ
execUnload : true,
// メイン処理
execute: function() {
var ref = this;
// サブミットが実行されたとき、ブラウザーを閉じるかどうか確認をしない
$("form").submit(function() {
ref.execUnload = false;
});
// 確認ダイアログ出力処理
window.onbeforeunload = function() {
if(ref.execUnload) {
// IE用に空文字を指定
return '';
} else {
ref.execUnload = true;
}
}
}
}
$(function() {
BrowserClose.execute();
});
ポイントはonbeforeunloadですね。画面遷移時（またリロード時）に発火するようです。
問題はサブミット時もこのイベントが発火すること。なので、サブミットの時は発火しないようにフラグを立てました。
使い方は上のJSとjQueryを読み込むだけ。
ではでは。
- Comments: 0
- Trackbacks: 0
Yahoo地図
yahoo!Maps APIをちょっと使ってみました。
受託開発のアプリケーションを構築の際に、地図情報を組み込む頻度は高いように思います。
そんなときのために工数をかけないですんなり開発したいですよね。
自分で書いてみたソースを書き記しておきます。
使用するためには専用のyahoo idが必要です。
<?php
//初期表示の経度、緯度
$map_latitude = "35.66618083";
$map_longitude = "139.768845";
//初期表示の位置アイコンの経度、緯度
$latitude = "35.66618083";
$longitude = "139.768845";
//フォームから入力された値を表示する用
$row_address = $_POST['map_address'];
//yahooの地図検索apiを使用する用
$map_address = urlencode($_POST['map_address']);
//
$response = file_get_contents("http://map.yahooapis.jp/LocalSearchService/V1/LocalSearch?appid=YourAPI&p=". $map_address ."&category=address");
$response_array = simplexml_load_string($response);
if ($positions = $response_array->Item[0]->DatumTky97) {
$map_latitude = $latitude = $positions->Lat;
$map_longitude = $longitude = $positions->Lon;
}
?>
<html>
<head>
<script type="text/javascript" src="../jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://map.yahooapis.jp/MapsService/js/V2/?appid=yourAPI"></script>
<script type="text/javascript">
var _map;
function set_map(){
_map = new YahooMapsCtrl("map", $('#map_latitude').val() + "," + $('#map_longitude').val() , $('#map_scale').val(), YMapMode.MAP );
// 初期表示の位置アイコン
var pp = new YLLPoint($('#latitude').val(), $('#longitude').val());
var pppopup = pp;
_map.setVisibleCentermark( false );
_map.addIcon('click-icon', pp, '', 'L1', '位置');
_map.addEvent( YEventType.MAP_CLICK, clickMap );
_map.addEvent(YEventType.ICON_DBLCLICK, dblclickMap );
_map.addEvent(YEventType.LAYER_CHANGED, layerChanged );
_map.addEvent( YEventType.MAP_MOVED, moveMap );
}
//地図を移動させる
function moveMap( id ){
var p = _map.getCenter();
// 中心位置
$('#map_latitude').val(p.lat);
$('#map_longitude').val(p.lon);
}
//拡大・縮小
function layerChanged( id ){
$('#map_scale').val(_map.getCurrentLayer());
}
//アイコン削除
function dblclickMap( id ){
_map.removeIcon(id);
// 緯度経度削除
$('#latitude').val('');
$('#longitude').val('');
}
//アイコン表示
function clickMap( point ){
var p = new YLLPoint( point );
_map.addIcon('click-icon', p, '', 'L1', '位置');
// 緯度経度insert
$('#latitude').val(p.lat);
$('#longitude').val(p.lon);
}
$(function(){
$('#map_latitude').val(<?php echo $map_latitude; ?>);
$('#map_longitude').val(<?php echo $map_longitude; ?>);
$('#map_scale').val(<?php echo $map_scale; ?>);
set_map();
$('#map').show();
});
</script>
</head>
<body>
<form name="" action="" method="POST">
<input type="text" name="map_address" id="map_address" value="<?php echo $row_address; ?>" class="textfield medium" />
<input type="submit" value="地図検索" />
<input type="hidden" name="map_longitude" id="map_longitude" value="<?php echo $map_longitude; ?>" />
<input type="hidden" name="map_latitude" id="map_latitude" value="<?php echo $map_latitude; ?>" />
<input type="hidden" name="longitude" id="longitude" value="<?php echo $longitude; ?>" />
<input type="hidden" name="latitude" id="latitude" value="<?php echo $latitude; ?>" />
</form>
<br />
<br />
<div id="map" style="height: 339px; width: 522px;"></div>
</body>
</html>
初期表示です。アイコンを表示してみました。ちなみにですが、銀座を表示しています。
検索に千代田区神田を入力したその結果です。
また、このサイトも参考になると思います。（ちょっとだけ見てちょっとだけ参考になりました。）
http://journal.mycom.co.jp/special/2007/yahoomap/index.html
以上になります。
thank you for your time
- Comments: 0
- Trackbacks: 0
jQueryその3 入力項目を任意で増減させる toggle つづき
- 2009-02-03 (火)
- jQuery
前回からの続きです。
以下やっとサンプルソースです。
<p><span class="inputname">画像1ファイル</span>
<input type="file" name="photo1" /><br />
説明<input type="text" name="photo1_description" value="" />
</p>
<p><a href="#form_end" onclick="$('#photo2').toggle(300)">画像2の追加</a></p>
<?php
for ($i = 2; $i <= 10; $i++) {
echo '<div id="photo' . $i . '" style="display:none">' .
'<p>画像' . $i . 'ファイル' .
'<input type="file" name="photo' . $i . '" /><br />' .
'説明 <input type="text" name="photo' . $i . '_description" value="" /></p>';
if ($i < 10) {
echo '<p><a href="#form_end" onclick="$(\'#photo' . ($i + 1) . '\').toggle(300)">画像' . ($i + 1) . 'の追加</a></p>';
}
echo '</div>';
}
?>
<a name="form_end" />
ポイントはid=”photoX” style=”display:none”のものをonclick=”$(’#photoX’).toggle(300)”してることと、次のidのリンクを生成すること。
難しそうで簡単。簡単そうでこつがいるような。
以上でした。
Thank you for your time.
- Comments: 0
- Trackbacks: 0
jQueryその3 入力項目を任意で増減させる toggle
- 2009-02-03 (火)
- jQuery
入力項目をユーザの気分で増減させます。
今回は画像のファイルをアップロードするときのことを考えてみましょう。
ものや日によって1個アップしたいとき10個アップしたいときがあった場合、
1個しかアップしたくないのにフォーム内には10個の入力項目があったら、見た目的に猥雑と感じたりするでしょう。
そんなとき下記のような処理があったらいいかと思います。
画像1ファイル
説明
以下にサンプルコードを載せたかったのですが、こちらの事情で別の記事で書かせて頂きます。というのも、この記事のみPHPを実行させることをしているのですが、サンプルコードも実行され、本来のコードが出力できないので次の記事にさせていただきます。
- Comments: 0
- Trackbacks: 0
jQuery その2 formの要素をクリア（初期化）
- 2009-02-01 (日)
- jQuery
こんにちは。瞑想界のゴッドファーザーことcypher-worksです。
フォームの内容をすべてクリアするサンプルです。
今回はjavascriptとjQueryを両方作ってよりjQueryを深く知ろうとしましょう。
以下、javascriptで実装
//クリアボタン制御（初期値に戻らせる）
function clear1(){
form=document.forms[0];
formClear(document.forms[0]);
}
//------------------------------------------------------------------------------
//
// formクリア
//
//------------------------------------------------------------------------------
function formClear(form_obj){
for (i = 0; i < form_obj.elements.length;i++ ) {
obj =form_obj.elements[i];
if (obj.type == "checkbox" || obj.type == "radio") {
obj.checked=false;
}else if (obj.type == "text" || obj.type == "textarea") {
obj.value="";
}else if (obj.type == "select") {
obj.selectedIndex=-1;
}
}
}
以下、jQueryコード
$.fn.clearForm = function() {
return this.each(function() {
var type = this.type, tag = this.tagName.toLowerCase();
if (tag == 'form')
return $(':input',this).clearForm();
if (type == 'text' || type == 'password' || tag == 'textarea')
this.value = '';
else if (type == 'checkbox' || type == 'radio')
this.checked = false;
else if (tag == 'select')
this.selectedIndex = -1;
});
};
出所：http://www.learningjquery.com/2007/08/clearing-form-data
サンプル
javascriptで実装したほうはプルダウンが初期化されませんね。う～ん。
しかし、jQueryで実装したほうはきれいに全部初期化されますね
（jQueryの初期化はこの投稿のみ表示したとき正常に動作します。なにかが邪魔をしていそうです？）
以下、HTMLでの呼び出しコード（フォームのID属性がform_sampleの場合）
<input type="button" value="jsでクリア" onClick="clear1();" />
<input type="button" value="jQueryでクリア" onClick="$('#form_sample').clearForm()" />
ではjQueryを解析していきましょう。
$.fn.clearForm = function() {
“$.fn.”これでfunctionを表現できるのでしょうか。
下記リファレンスに”$.fn.”が当てはまりそうな記述がありますね。
http://semooh.jp/jquery/api/core/jQuery.fn.extend/object/
拡張機能の文法として使われてますね。”return each”の記述も見ることができます。拡張機能もそうでしょうが、適用したいエレメントに機能を施したいという時に使うのでしょう。
return this.each(function() {
“this.each(function() “の意味を検証しましょう。
http://semooh.jp/jquery/api/core/each/callback/
これは、合致するエレメントが見つかる度に1度ずつ、毎回関数が実行されることを意味する。その際に、関数内でthisポインタは各エレメントを指す。分かった！では次。
var type = this.type, tag = this.tagName.toLowerCase();
まず、変数の宣言は”,”で繋げられるのですね。さて”this.tagName.toLowerCase()”はどのような意味なのか。
google先生に聞くと、
tagNameはタグの種類を返してきそうですね。
https://developer.mozilla.org/Ja/DOM/Element.tagName
toLowerCase()は文字列を全部小文字にするそうです。
以上、説明は割愛かつ終わりにします。
thank you for your time.
- Comments: 0
- Trackbacks: 0
jQuery その1 ラジオボックスでテキストボックスを入力させなくする
- 2009-01-30 (金)
- jQuery
Webサービスを開発しているプログラマにjQueryの技術は必須だと感じてきました。
マスターになるため一歩一歩触れた技術をおさらいしていきます。
jQueryその1はラジオボックスを選択した時に、テキストボックスを入力できなくする方法です。
以下が、JS部分。
<script type="text/javascript">
$(document).ready(function(){
$('#capacity_no_limit').click(function() {/* ←1*/
$("#capacity").attr("disabled","disabled").css("backgroundColor","#cccccc");/* ←2*/
});
$('#capacity_number').click(function() {/* ←3 */
$("#capacity").removeAttr("disabled").css("backgroundColor","#ffffff");/* ←4 */
});
});
</script>
以下スクリプトが、HTML部分。
<p> <input type="radio" id="capacity_number" name="capacity_flag" value="" class="radio" /> <input type="text" id="capacity" name="capacity" value="" class="textfield small" /> 名 <input type="radio" id="capacity_no_limit" name="capacity_flag" value="" class="radio" />無制限 </p>
サンプル
名無制限
解説
1 : id=capacity_no_limitをクリックしたらfunction内部を実行します。
2 : id=capacityにdisalbed属性にdiabledを与えます。さらにCSSのバックグランドの色を#ccccccに変えます。
3 : id= capacity_numberをクリックしたらfunction内部を実行します。
4 : id= capacityのdisabled属性を除去します。さらにCSSのバックグランドの色を#ffffffに変えます。
以上です。
Hava a nice day.
- Comments: 1
- Trackbacks: 0
Home > jQuery Archive
- Search
- Feeds
- Meta