jQuery FormNavigateによって拡張された、または「ユーザーにデータを失わせない」

開いた後、HabraはFormNavigateプラグインに出会い(フォームのデータが入力されたらタブを閉じるかリンクをたどることを確認するようユーザーに要求します)、そしてそれを適用する必要さえありました。



しかし、プラグインが私には適さず、私はそれを少し書き換えることを許可しました。



そのため、たとえば、確認するリンクを選択するのは不便でしたが、逆に、プラグインが適用されないリンクを指定する必要がありました。 ここで、高度な開発者は、jQueryでのセレクターの正しい操作がわからないトマトを投げ始めます。 しかし、これはそうではありません。たとえば、次のように、プラグインの以前のバージョンがどのように機能するかを自分で確認できます。 $('a:not([class~="ajax"])')



(最後のトピックの著者によって提案された$('a:[class!="ajax"]')



驚異的でした)。



非表示にするのはなんて恥ずかしいのか、プラグインを少し書き換えることを許可しました。





  1. jQuery.fn.extend({
  2. FormNavigate: 関数 (o){
  3. var formdata_original = true ;
  4. jQuery(ウィンドウ).bind( 'beforeunload'function (){
  5. if (!formdata_original) return settings.message;
  6. });
  7. var def = {
  8. メッセージ: ''
  9. aOutConfirm: 'a:not([target!= _ blank])'
  10. };
  11. var settings = jQuery.extend( false 、def、o);
  12. if (o.aOutConfirm && o.aOutConfirm!= def.aOutConfirm){
  13. jQuery( 'a' ).addClass( 'aOutConfirmPlugin' );
  14. jQuery(settings.aOutConfirm).removeClass( "aOutConfirmPlugin" );
  15. jQuery(settings.aOutConfirm).click( function (){
  16. formdata_original = true ;
  17. trueを 返し ます
  18. });
  19. }
  20. jQuery( "a.aOutConfirmPlugin" ).click( function (){
  21. if (formdata_original == false
  22. if (confirm(settings.message))
  23. formdata_original = true ;
  24. return formdata_original;
  25. });
  26. jQuery( this ).find( "input [type = text]、textarea、input [type = 'password']、input [type = 'radio']、input [type = 'checkbox']、input [type = 'file '] " ).live( 'キープレスの変更 '関数イベント ){
  27. formdata_original = false ;
  28. });
  29. jQuery( this ).find( ":submit、input [type = 'image']" ).click( function (){
  30. formdata_original = true ;
  31. });
  32. }
  33. });
*このソースコードは、 ソースコードハイライターで強調表示されました。




使用例:





  1. $( document ).ready( function (){
  2. $( "#changeme" ).FormNavigate({
  3. メッセージ: 「コンテンツが変更されました!\ n保存せずにページを終了してもよろしいですか?」
  4. aOutConfirm: "a.ignore"
  5. });
  6. });
*このソースコードは、 ソースコードハイライターで強調表示されました。


どこで

message



-確認ウィンドウのテキスト情報、

aOutConfirm



確認のために無視されるタグ。



いくつかの問題が修正されました。たとえば、 onbeforeunloadイベントのオーバーライド、テキストフィールド(textarea)の誤った作業などです。



修正バージョンをダウンロードします。

例を参照してください



これがあなたのお役に立てば幸いです!



All Articles