0

私はIE6 & 7はJavaScriptを解釈する方法に問題が発生したジェームズ・Padolseyによって http://james.padolsey.com/tag/cookies/IE6-7 Javascriptを

を「クッキーと模倣のiGoogleチュートリアル」を使用しています。私は問題を発見したが、私はそれを回避する方法がない。

次のコードは長いですが、私はこの

widgetIndividual : { 

    } 

のように、例えば、このセクションのブランク

widgetIndividual : { 
    static: { 
     movable: false, 
     removable: true, 
     collapsible: true, 
     editable: false, 
    } 
} 

を残す場合は、問題が一つだけの小さな部分

/* 
* Script from NETTUTS.com [by James Padolsey] V.2 (ENHANCED, WITH COOKIES!!!) 
* @requires jQuery($), jQuery UI & sortable/draggable UI modules & jQuery COOKIE plugin 
*/ 

var iNettuts = { 

    jQuery : $, 

    settings : { 
     columns : '.column', 
     widgetSelector: '.widget', 
     handleSelector: '.widget-head', 
     contentSelector: '.widget-content', 

     /* If you don't want preferences to be saved change this value to false, otherwise change it to the name of the cookie: */ 
     saveToCookie: false, 

     widgetDefault : { 
      movable: true, 
      removable: true, 
      collapsible: true, 
      editable: false, 
      colorClasses : ['color-yellow', 'color-red', 'color-blue', 'color-white', 'color-orange', 'color-green'] 
     }, 
     widgetIndividual : { 
      static: { 
       movable: false, 
       removable: true, 
       collapsible: true, 
       editable: false, 
      } 
     }, 
    }, 

    init : function() { 
     this.attachStylesheet('css/sortable.js.css'); 
     this.sortWidgets(); 
     this.addWidgetControls(); 
     this.makeSortable(); 
    }, 

    getWidgetSettings : function (id) { 
     var $ = this.jQuery, 
      settings = this.settings; 
     return (id&&settings.widgetIndividual[id]) ? $.extend({},settings.widgetDefault,settings.widgetIndividual[id]) : settings.widgetDefault; 
    }, 

    addWidgetControls : function() { 
     var iNettuts = this, 
      $ = this.jQuery, 
      settings = this.settings; 

     $(settings.widgetSelector, $(settings.columns)).each(function() { 
      var thisWidgetSettings = iNettuts.getWidgetSettings(this.id); 
      if (thisWidgetSettings.removable) { 
       $('<a href="#" class="remove tooltip" title="Close this window">&nbsp;</a>').mousedown(function (e) { 
        /* STOP event bubbling */ 
        e.stopPropagation();  
       }).click(function() { 

        if(confirm('This widget will be removed, ok?')) { 
         $(this).parents(settings.widgetSelector).animate({ 
          opacity: 0  
         },function() { 
          $(this).slideUp(function() { 
           $(this).toggleClass('closed'); 
                   /* Save prefs to cookie: */ 
           iNettuts.savePreferences(); 
          }); 
         }); 
        } 
        return false; 
       }).appendTo($(settings.handleSelector, this)); 
      } 

      if (thisWidgetSettings.editable) { 
       $('<a href="#" class="edit">Edit</a>').mousedown(function (e) { 
        /* STOP event bubbling */ 
        e.stopPropagation();  
       }).toggle(function() { 
        $(this).css({backgroundPosition: '-66px 0', width: '55px'}) 
         .parents(settings.widgetSelector) 
          .find('.edit-box').show().find('input').focus(); 
        return false; 
       },function() { 
        $(this).css({backgroundPosition: '', width: '20px'}) 
         .parents(settings.widgetSelector) 
          .find('.edit-box').hide(); 
        return false; 
       }).appendTo($(settings.handleSelector,this)); 
       $('<div class="edit-box" style="display:none;"/>') 
        .append('<ul><li class="item"><label>Change the title?</label><input value="' + $('h3',this).text() + '"/></li>') 
        .append((function(){ 
         var colorList = '<li class="item"><label>Available colors:</label><ul class="colors">'; 
         $(thisWidgetSettings.colorClasses).each(function() { 
          colorList += '<li class="' + this + '"/>'; 
         }); 
         return colorList + '</ul>'; 
        })()) 
        .append('</ul>') 
        .insertAfter($(settings.handleSelector,this)); 
      } 

      if (thisWidgetSettings.collapsible) { 
       $('<a href="#" class="collapse tooltip" title="Show/hide this window">&nbsp;</a>').mousedown(function (e) { 
        /* STOP event bubbling */ 
        e.stopPropagation(); 
       }).click(function(){ 

        $(this).parents(settings.widgetSelector).toggleClass('collapsed'); 
        /* Save prefs to cookie: */ 
        iNettuts.savePreferences(); 
        return false; 
       }).prependTo($(settings.handleSelector,this)); 
      } 
     }); 

     $('.edit-box').each(function() { 
      $('input',this).keyup(function() { 
       $(this).parents(settings.widgetSelector).find('h3').text($(this).val().length>20 ? $(this).val().substr(0,20)+'...' : $(this).val()); 
       iNettuts.savePreferences(); 
      }); 
      $('ul.colors li',this).click(function() { 

       var colorStylePattern = /\bcolor-[\w]{1,}\b/, 
        thisWidgetColorClass = $(this).parents(settings.widgetSelector).attr('class').match(colorStylePattern) 
       if (thisWidgetColorClass) { 
        $(this).parents(settings.widgetSelector) 
         .removeClass(thisWidgetColorClass[0]) 
         .addClass($(this).attr('class').match(colorStylePattern)[0]); 
        /* Save prefs to cookie: */ 
        iNettuts.savePreferences(); 
       } 
       return false; 

      }); 
     }); 

    }, 

    attachStylesheet : function (href) { 
     var $ = this.jQuery; 
     return $('<link href="' + href + '" rel="stylesheet" type="text/css" />').appendTo('head'); 
    }, 

    makeSortable : function() { 
     var iNettuts = this, 
      $ = this.jQuery, 
      settings = this.settings, 
      $sortableItems = (function() { 
       var notSortable = null; 
       $(settings.widgetSelector,$(settings.columns)).each(function (i) { 
        if (!iNettuts.getWidgetSettings(this.id).movable) { 
         if(!this.id) { 
          this.id = 'widget-no-id-' + i; 
         } 
         notSortable += '#' + this.id + ','; 
        } 
       }); 
       return $('> li:not(' + notSortable + ')', settings.columns); 
      })(); 

     $sortableItems.find(settings.handleSelector).css({ 
      cursor: 'move' 
     }).mousedown(function (e) { 
      $sortableItems.css({width:''}); 
      $(this).parent().css({ 
       width: $(this).parent().width() + 'px' 
      }); 
     }).mouseup(function() { 
      if(!$(this).parent().hasClass('dragging')) { 
       $(this).parent().css({width:''}); 
      } else { 
       $(settings.columns).sortable('disable'); 
      } 
     }); 

     $(settings.columns).sortable({ 
      items: $sortableItems, 
      connectWith: $(settings.columns), 
      handle: settings.handleSelector, 
      placeholder: 'widget-placeholder', 
      forcePlaceholderSize: true, 
      revert: 300, 
      delay: 100, 
      opacity: 0.8, 
      containment: 'document', 
      start: function (e,ui) { 
       $(ui.helper).addClass('dragging'); 
      }, 
      stop: function (e,ui) { 
       $(ui.item).css({width:''}).removeClass('dragging'); 
       $(settings.columns).sortable('enable'); 
       /* Save prefs to cookie: */ 
       iNettuts.savePreferences(); 
      } 
     }); 
    }, 

    savePreferences : function() { 
     var iNettuts = this, 
      $ = this.jQuery, 
      settings = this.settings, 
      cookieString = ''; 

     if(!settings.saveToCookie) {return;} 

     /* Assemble the cookie string */ 
     $(settings.columns).each(function(i){ 
      cookieString += (i===0) ? '' : '|'; 
      $(settings.widgetSelector,this).each(function(i){ 
       cookieString += (i===0) ? '' : ';'; 
       /* ID of widget: */ 
       cookieString += $(this).attr('id') + ','; 
       /* Color of widget (color classes) */ 
       cookieString += $(this).attr('class').match(/\bcolor-[\w]{1,}\b/) + ','; 
       /* Title of widget (replaced used characters) */ 
       cookieString += $('h3:eq(0)',this).text().replace(/\|/g,'[-PIPE-]').replace(/,/g,'[-COMMA-]') + ','; 
       /* Collapsed/not collapsed widget? : */ 
       cookieString += $(settings.contentSelector,this).css('display') === 'none' ? 'collapsed,' : 'not-collapsed,';     
       /* Closed/not closed widget? : */ 
       cookieString += $(settings.handleSelector,this).css('display') === 'none' ? 'closed' : 'not-closed'; 
      }); 
     }); 
     $.cookie(settings.saveToCookie,cookieString,{ 
      expires: 10 
      //path: '/' 
     }); 
    }, 

    sortWidgets : function() { 
     var iNettuts = this, 
      $ = this.jQuery, 
      settings = this.settings; 

     /* Read cookie: */ 
     var cookie = $.cookie(settings.saveToCookie); 
     if(!settings.saveToCookie||!cookie) { 
      /* Get rid of loading gif and show columns: */ 
      $('body').css({background:'#fff'}); 
      $(settings.columns).css({visibility:'visible'}); 
      return; 
     } 

     /* For each column */ 
     $(settings.columns).each(function(i){ 

      var thisColumn = $(this), 
       widgetData = cookie.split('|')[i].split(';'); 

      $(widgetData).each(function(){ 
       if(!this.length) {return;} 
       var thisWidgetData = this.split(','), 
        clonedWidget = $('#' + thisWidgetData[0]), 
        colorStylePattern = /\bcolor-[\w]{1,}\b/, 
        thisWidgetColorClass = $(clonedWidget).attr('class').match(colorStylePattern); 

       /* Add/Replace new colour class: */ 
       if (thisWidgetColorClass) { 
        $(clonedWidget).removeClass(thisWidgetColorClass[0]).addClass(thisWidgetData[1]); 
       } 

       /* Add/replace new title (Bring back reserved characters): */ 
       $(clonedWidget).find('h3:eq(0)').html(thisWidgetData[2].replace(/\[-PIPE-\]/g,'|').replace(/\[-COMMA-\]/g,',')); 

       /* Modify collapsed state if needed: */ 
       if(thisWidgetData[3]==='collapsed') { 
        /* Set CSS styles so widget is in COLLAPSED state */ 
        $(clonedWidget).addClass('collapsed'); 
       } 

       /* Modify closed state if needed: */     
       if(thisWidgetData[4]==='closed') { 
        /* Set CSS styles so widget is in CLOSED state */ 
        $(clonedWidget).addClass('closed'); 
       } 

       $('#' + thisWidgetData[0]).remove(); 
       $(thisColumn).append(clonedWidget); 
      }); 
     }); 

     /* All done, remove loading gif and show columns: */ 
     $('body').css({background:'#fff'}); 
     $(settings.columns).css({visibility:'visible'}); 
    } 

}; 

iNettuts.init(); 

でありますその後、すべてのブラウザでうまく動作しますが、残念ながら私のプロ用の個別ウィジェット設定を使用する必要がありますject。

IE6-7はこれらの人のためにエラーを発生させます。 "}"理由はわかりません。

+0

ShankarSangoliによると、構文エラーがあります。コードはIE 6と7以外の多くのブラウザでは失敗します。末尾のカンマはES5では許可されていますが、すべてのブラウザがそれに対応しているわけではありません。 – RobG

+0

@RobG - 後続するコンマのエラーはIEのブラウザにのみ存在し、すべてのブラウザはそれに満足しています。 – ShankarSangoli

+0

"AlL"他のブラウザ?あなたはどちらを試しましたか?特にES3の構文エラーですが、一部のブラウザではそれが許されています。それを許可しないブラウザがまだ多く使用されています。私は長年に渡ってそのエラーを乗り越えていないので、どのものを覚えていないのですが、それらはすべてFirefoxやSafari 2まででした。 – RobG

答えて

3

正常に機能するこのオブジェクトの最後のカンマを削除します。

widgetIndividual : { 
     static: { 
      movable: false, 
      removable: true, 
      collapsible: true, 
      editable: false 
     } 
} 
+0

@Clinton - あなたの問題を解決しましたか? – ShankarSangoli

+0

ありがとう、それは魅力のように働いた。あなたは人生の節約者です。乾杯 –