このページの記事目次 (カテゴリー: JavaScript/CSS)
- 【JavaScript】ページを移動する前にメッセージを出す [2017/01/16]
- 【jQuery】jQueryからノーマルな書き方を知る方法 [2017/01/04]
- 【jQuery】要素が存在することを確認する [2016/12/21]
- 【JavaScript】エンターサブミットを禁止する-3 [2013/06/09]
- 【HTML+JavaScript】HTML5でグラフを描こう [2013/06/08]
total 9 pages 次のページ →
↑
2017/01/16 (月) カテゴリー: JavaScript/CSS
ページを移動する前にメッセージを出すには、
ウインドウがアンロードされる前に発生するイベントonbeforeunloadを利用して
以下のようにかきます。
■ノーマルJavaScript
window.onbeforeunload = function(e) {
e.returnValue = '任意のメッセージ';
}
■jQuery
$(window).on('beforeunload',function(e){
return "任意のメッセージ";
});
しかし、
このままだとフォームから実行する際にもメッセージがでてしまいます。
回避するにはreturnValueまたはreturn を通らないようにイベント処理を書くか、
onbeforeunloadイベントを上書きします。
↓上書きする場合の例
input の場合
<input type='submit' value='送信' onclick='window.onbeforeunload=null'/>
a の場合
<a href='' onclick='window.onbeforeunload = null'></a>
jQueryだとこんな感じにもかけます。
$('a,:input').bind('click', function(){ window.onbeforeunload = function(e) {};);
ウインドウがアンロードされる前に発生するイベントonbeforeunloadを利用して
以下のようにかきます。
■ノーマルJavaScript
window.onbeforeunload = function(e) {
e.returnValue = '任意のメッセージ';
}
■jQuery
$(window).on('beforeunload',function(e){
return "任意のメッセージ";
});
しかし、
このままだとフォームから実行する際にもメッセージがでてしまいます。
回避するにはreturnValueまたはreturn を通らないようにイベント処理を書くか、
onbeforeunloadイベントを上書きします。
↓上書きする場合の例
input の場合
<input type='submit' value='送信' onclick='window.onbeforeunload=null'/>
a の場合
<a href='' onclick='window.onbeforeunload = null'></a>
jQueryだとこんな感じにもかけます。
$('a,:input').bind('click', function(){ window.onbeforeunload = function(e) {};);
スポンサーサイト
(記事編集) http://mesosune.blog123.fc2.com/blog-entry-440.html
2017/01/16 | Comment (0) | Trackback (0) | HOME | ↑ ページ先頭へ | ↑
2017/01/04 (水) カテゴリー: JavaScript/CSS
Notesの場合結構な頻度であるあるですが、
jQuery を使用できない環境の場合どうやってかけばいいよと教えてくれるサイト
YOU MIGHT NOT NEED JQUERY
http://youmightnotneedjquery.com/
You Don't Need jQuery
http://qiita.com/tatesuke/items/b9548dd484b01b139b74
jQuery を使用できない環境の場合どうやってかけばいいよと教えてくれるサイト
YOU MIGHT NOT NEED JQUERY
http://youmightnotneedjquery.com/
You Don't Need jQuery
http://qiita.com/tatesuke/items/b9548dd484b01b139b74
(記事編集) http://mesosune.blog123.fc2.com/blog-entry-439.html
2017/01/04 | Comment (0) | Trackback (0) | HOME | ↑ ページ先頭へ | ↑
2016/12/21 (水) カテゴリー: JavaScript/CSS
久しぶりにJavaScript触って躓いたのでメモ代わりに。
要素を取得して存在しているかを確認したいとします。
まずは、アイテムの取得をします。
var itm = document.getElementById('ID') // ノーマルJavaScript
または
var itm = $('#ID') //jQuery
などなど。
次に本題の存在する場合に処理に入りたいときの処理の書き方です。
昔は下の書き方でいけたのですが、
if (itm){ ・・・処理・・・}
これでは今は何故か処理が通らない。
if ( ! itm ){ ・・・処理・・・}
で「存在しない」というのは昔も今もかわらないが、
イチイチ else で拾うのもなんか格好悪い。
そこでひらめきました。
if( !! itm ) { ・・・処理・・・}
と、! を2つづづけることで否定の否定としてやることで、
変数の中身(要素)が存在している場合に~としてやることができました。
IE6.xでも動いたので、おそらくすべてのブラウザで対応しています。
原因は、昔と比較すると、
ブラウザが厳密に判定するようになっているため、のようです。
要素を取得して存在しているかを確認したいとします。
まずは、アイテムの取得をします。
var itm = document.getElementById('ID') // ノーマルJavaScript
または
var itm = $('#ID') //jQuery
などなど。
次に本題の存在する場合に処理に入りたいときの処理の書き方です。
昔は下の書き方でいけたのですが、
if (itm){ ・・・処理・・・}
これでは今は何故か処理が通らない。
if ( ! itm ){ ・・・処理・・・}
で「存在しない」というのは昔も今もかわらないが、
イチイチ else で拾うのもなんか格好悪い。
そこでひらめきました。
if( !! itm ) { ・・・処理・・・}
と、! を2つづづけることで否定の否定としてやることで、
変数の中身(要素)が存在している場合に~としてやることができました。
IE6.xでも動いたので、おそらくすべてのブラウザで対応しています。
原因は、昔と比較すると、
ブラウザが厳密に判定するようになっているため、のようです。
(記事編集) http://mesosune.blog123.fc2.com/blog-entry-438.html
2016/12/21 | Comment (0) | Trackback (0) | HOME | ↑ ページ先頭へ | ↑
2013/06/09 (日) カテゴリー: JavaScript/CSS
(記事編集) http://mesosune.blog123.fc2.com/blog-entry-397.html
2013/06/09 | Comment (0) | Trackback (0) | HOME | ↑ ページ先頭へ | ↑
2013/06/08 (土) カテゴリー: JavaScript/CSS
HTML5のcanvasという要素をつかいます。
↓解説サイト
Canvas(hTML5.jp)
http://www.html5.jp/canvas/index.html
canvas でグラフをつくるには、以下の手順になります。
1)まず、canvas要素をつくります。
<canvas id="a1" width="640" hight="480">
このコンテンツはお使いのブラウザでは表示できません
</canvas>
範囲(描画領域)= 幅(width属性)と高さ(height属性)を指定します。
非対応ブラウザ対応としてタグの中にメッセージを記載しておいてください。
2)つぎに、JavaScriptで要素に命令を与えます。
idを使用して要素を取得します。
getConrectは'2d'以外指定できません。
基礎は以上、
実際はcanvasの要素(エレメント)生成からライブラリを使ったほうが楽で早いです^^;
今回はFlotr2の紹介。
↓本家
Flotr2
http://www.humblesoftware.com/flotr2
↓説明サイト
HTML5のcanvas機能で綺麗なグラフが作れる!「Flotr2」を試してみた(LIG)
http://liginc.co.jp/designer/archives/6023
↓developerWorks(アドレスが長いのでそのままリンク)
・XPagesでFlotr2を使ってグラフを書く(前編)
・XPagesでFlotr2を使ってグラフを書く(後編)
同じようなJavaScriptライブラリであるdojoを使用した方法は
次回以降で少し解説してみます。
↓解説サイト
Canvas(hTML5.jp)
http://www.html5.jp/canvas/index.html
canvas でグラフをつくるには、以下の手順になります。
1)まず、canvas要素をつくります。
<canvas id="a1" width="640" hight="480">
このコンテンツはお使いのブラウザでは表示できません
</canvas>
範囲(描画領域)= 幅(width属性)と高さ(height属性)を指定します。
非対応ブラウザ対応としてタグの中にメッセージを記載しておいてください。
2)つぎに、JavaScriptで要素に命令を与えます。
function drow(){
//要素を取得します
var canvas = document.getElementById('a1');
if( ! canvas || ! canvas.getContent) { return false };
var ctx = canvas.getConrext('2d');
//ctxに対して命令を指定します
・
・
・
}
idを使用して要素を取得します。
getConrectは'2d'以外指定できません。
基礎は以上、
実際はcanvasの要素(エレメント)生成からライブラリを使ったほうが楽で早いです^^;
今回はFlotr2の紹介。
↓本家
Flotr2
http://www.humblesoftware.com/flotr2
↓説明サイト
HTML5のcanvas機能で綺麗なグラフが作れる!「Flotr2」を試してみた(LIG)
http://liginc.co.jp/designer/archives/6023
↓developerWorks(アドレスが長いのでそのままリンク)
・XPagesでFlotr2を使ってグラフを書く(前編)
・XPagesでFlotr2を使ってグラフを書く(後編)
同じようなJavaScriptライブラリであるdojoを使用した方法は
次回以降で少し解説してみます。
(記事編集) http://mesosune.blog123.fc2.com/blog-entry-394.html
2013/06/08 | Comment (0) | Trackback (0) | HOME | ↑ ページ先頭へ |