2010-05-03 59 views
0

我遇到了一个问题,发现一个脚本即将出现的错误。我得到在Firebug以下错误:基于jQueryUi的可排序jQuery问题

未捕获的异常:语法错误,无法识别 表达:)

问题是我的base.js里面莫名其妙地造成的,猜测排序功能不想要工作与我的jQuery版本。请看看下面的演示:

http://dev.evilmile.de/CommandCP/

656线在base.js:我已经使用了inettuts脚本基本上克隆iGoogles接口。该脚本使我可以对小部件进行排序,隐藏/显示内容并更改每个小部件的颜色,还可以将所有内容保存在cookie中以记住位置和样式。最初,inettuts脚本是使用jQuery 1.2.6和UI 1.6.2运行的,我在jQuery 1.4.2和UI 1.8.1上,出了什么问题。除了可分类功能外,所有功能都运行良好,除了可分类功能外,我没有任何移动等。

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: 'widget-prefs22222', 

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

init : function() { 
    this.attachStylesheet('css/inettuts.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">CLOSE</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).wrap('<div/>').parent().slideUp(function() { 
          $(this).remove(); 
         }); 
        }); 
       } 
       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: '24px'}) 
        .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">COLLAPSE</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 = ''; 
      $(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'; 
     }); 
    }); 
    $.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:'#000'}); 
     $(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'); 
      } 

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

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

};

如果有人能提供一个小贴士在哪里可以找到问题,那绝对会很棒。我在我的知识结束

在此先感谢您的时间。 请问候,

丹尼尔

回答

0

它是自你问的问题一段时间,但我发现自己面临着类似的问题。

首先,你应该对下面的帖子遵循SLaks建议,或简单地用Firebug的代码步骤,以便更好地找准问题所在:uncaught exception: Syntax error after jQuery upgrade

我跟你确认其一个jQuery版本导致了问题,因为我的问题在1.3.2中不存在,但在1.4.2中存在。它似乎与jquery选择器有关,因此找到问题的起点将更容易找到解决方案。