タグ別アーカイブ: jQuery

jQueryでページから離脱する際に確認メッセージを表示する

投稿日: 2012年8月11日 作成者: 鮎

　Wordpressなんかそうだけど、投稿画面で入力中にページ移動しようとすると確認メッセージが出る。
　愛用しているThinkPadも、カーソルキーの上キーの左右がページ前後移動キーになっているので誤って押したり、マウスのスイッチで入力中にページ移動してしまって入力したフォームが消えてしまうアクシデントがあるので、この角にメッセージが出るのはなかなか便利。

　これを自分のページに実装するのは簡単で、

$(window).bind("beforeunload", function(e) {
    return "入力内容はまだ保存されていません、ページ移動しますか？";
});

のようにして、メッセージをreturnすると、その内容を表示したポップアップが出てくれる。　AlertとかConfirmとか書いてもChromeには無視された。

　このままだと常時出てしまうので、登録ボタンを押した場合にはメッセージを表示しないようにするために、

<input type=’submit’ onclick=’javascript:$("body").append("<input type=\"hidden\" name=\"no_unload_confirm\" value=\"1\">");’>

みたいにsubmitボタンのonclickで正常動作フラグを立てて

$(window).bind(‘beforeunload’, function(evnt){
    if(!$(‘input[name=no_unload_confirm]’).val()) return ‘入力内容はまだ保存されていません、ページ移動しますか？’;
});

みたいにフラグが立っているかチェックするようにすれば良い。

(602)

このエントリーをはてなブックマークに追加
はてなブックマーク - jQueryでページから離脱する際に確認メッセージを表示する

カテゴリー: ｊQuery | タグ: , | コメントをどうぞ

jQuery uploadがFirefoxで構文エラーをはいて転ける

投稿日: 2012年7月30日 作成者: 鮎

　jQuery.upload(http://lagoscript.org/jquery/upload) 1.0.2のminified版を入れたら転けた。　Firefoxだけこけた(V.14.0.1)

h=”jquery_upload”+ ++p;

っていう記述があって、IEとChromeは正常に処理するんだけど、Firefoxは

h=”jquery_upload”+++p;

って解析していた。　＋みっつ。

そんなわけで、

h=”jquery_upload”+(++p);

に書き換え。

ほんとにちょいメモだけどこれ大事。
ChromeやIEで普通にロードして普通に動いていたけど、ふとした機会にFirefoxで表示したら見事に構文エラーになって転けてページ全体死んでいた。

(281)

このエントリーをはてなブックマークに追加
はてなブックマーク - jQuery uploadがFirefoxで構文エラーをはいて転ける

カテゴリー: ｊQuery | タグ: , | コメントをどうぞ

jQueryパーツ、ページを内部で自動リロードさせる

投稿日: 2012年7月18日 作成者: 鮎

　jQueryでページの一部をリロードさせる。
　一発表示するだけのページを定期監視する為のスクリプト。

<html>
    <head>
        <meta http-equiv=’Content-Type’ content=’text/html; charset=UTF-8′>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" charset="utf-8"></script>
        <script type="text/javascript">
        <!–
        $(document).ready(function(){
            var loading = setInterval(reload, <?php echo("$_GET[‘interval’]"); ?>*1000);
            function reload(){
                $("#loading").html("now loading…");
                $.get("<?php echo("$_GET[‘url’]"); ?>", {}, function(page){
                    $(‘#page’).html(page);
                    $("#loading").html("&nbsp;");
                });
            }
            
            reload();
        });
        // –>
        </script>
    </head>
    <body>
        <span id="loading">&nbsp;</span>
        <hr>
        <div id="page"></div>
    </body>
</html>

PHPファイルとして保存して、http://hoge.tld/file.php?url=/log.txt&interval=30 みたいにリクエストすれば、/log.txtを30秒ごとに更新表示できる。

(1391)

このエントリーをはてなブックマークに追加
はてなブックマーク - jQueryパーツ、ページを内部で自動リロードさせる

カテゴリー: ｊQuery | タグ: , | コメントをどうぞ

jQueryでテーブル組を変換する［2カラムのテーブルをばらして、スマホ向けにしてみる］

投稿日: 2012年7月5日 作成者: 鮎

　PC版のサイトでよく使う基本的なテーブルスタイルとして

<table>
<tr><th>件名</th><td>お知らせ</td></tr>
<tr><th>送信者名</th><td>hoge@piyo.tld</td></tr>
<tr><th>メッセージ本文</th><td>こんにちわ、これはテスト用のメッセージです。<br>ワイド画面の多いPCなら良いけど、幅が狭いスマホでは左見出しが長いと見にくくなりますね。</td></tr>
…
</table>

件名 お知らせ
送信者名 hoge@piyo.tld
メッセージ本文 こんにちわ、これはテスト用のメッセージです。
ワイド画面の多いPCなら良いけど、幅が狭いスマホでは左見出しが長いと見にくくなりますね。

　みたいなテーブルがあると思うけど、スマホとかで表示すると（Width600px）

　みたいな感じになって、TDが狭くなっちゃって見にくくなるんで、THをHタグにして、その下にTDを入れるようにJavaScriptで変換してみる（テーブルをはき出すスクリプトを変えれば良いんだけど、PCとスマホでテンプレを変えないと言う変わったケースに対応）

jQueryを使って

$(document).ready(function(){
    if($(window).width()<=720){
        $(‘table’).each(function(){
            var breaked = "";
            $(‘tr’, this).each(function(){
                breaked += "<h3>"+$("th", this).html()+"</h3><p>"+$("td", this).html()+"</p>";
            });
            $(this).before(breaked);
            $(this).remove();
        });
    }
});
</script>

みたいなJSを書いてみた。　UserAgentで識別せずに、開いたときのウィンドウのサイズが720ピクセル以下の場合にH3/Pタグに書き換えるようにしてみた。
　すると・・・

　こんな感じに仕上がって、縦長、横短のスマホ画面向けな感じにイフェクトできた。　セレクタにtableタグを使っているけど、thとtdが1個ずつの2カラムテーブル専用に書いてあるから、2カラムテーブルを明示するクラスなどをつけた方がいいかな。

テストページ　（ウィンドウサイズを変えてリロードしてみると、720ピクセル以下とそれより大きい場合で見え方が変わる。　$(window).resizeを使えば、ウィンドウをリサイズしたときにうにょうにょ変わるということもできるだろう）

(334)

このエントリーをはてなブックマークに追加
はてなブックマーク - jQueryでテーブル組を変換する［2カラムのテーブルをばらして、スマホ向けにしてみる］

カテゴリー: ｊQuery | タグ: , | コメントをどうぞ