我正在尝试基于iNettuts小部件界面制作Firefox扩展： Source 1 Source 2
我的目标是从widgets_rpc.php文件获取小部件的内容：
<?php
header("Cache-Control: no-cache");
header("Pragma: nocache");
$id=$_REQUEST["id"];
echo "<p>This is the content for <b>$id</b></p>";
switch ($id) {
case "widget1":
echo "<p>This is the content for widget #1</p>";
break;
case "widget2":
echo "<p>This is the content for widget #2</p>";
break;
case "widget3":
echo "<p>This is the content for widget #3</p>";
break;
default: echo "<p>OK</p>";
}
?>
来源JS：
/*
* Script from NETTUTS.com [modified by Mario Jimenez] V.3 (ENHANCED, WITH DATABASE, ADD WIDGETS FEATURE AND COOKIES OPTION!!!)
* @requires jQuery($), jQuery UI & sortable/draggable UI modules
*/
var ios = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);
var cookieUri = ios.newURI("chrome://mystartpage/content/index.html", null, null);
var cookieSvc = Components.classes["@mozilla.org/cookieService;1"].getService(Components.interfaces.nsICookieService);
var cookieVal = " ";
var iNettuts = {
jQuery : $,
settings : {
columns : '.column',
widgetSelector: '.widget',
handleSelector: '.widget-head',
contentSelector: '.widget-content',
saveToDB: false,
cookieName: '',
widgetDefault : {
movable: true,
removable: true,
collapsible: true,
editable: true,
colorClasses: ['color-yellow', 'color-red', 'color-blue', 'color-white', 'color-orange', 'color-green'],
content: "<div align='center'><img src='/skin/img/load.gif' border='0' /></div>"
},
widgetIndividual : {
widget1 : {
movable: true,
removable: true,
collapsible: true,
editable: true,
mycontent: "asd"
}
}
},
init : function () {
this.attachStylesheet('/skin/inettuts.js.css');
$('body').css({background:'#000'});
$(this.settings.columns).css({visibility:'visible'});
this.sortWidgets();
//this.addWidgetControls();
//this.makeSortable();
},
initWidget : function (opt) {
if (!opt.content) opt.content=iNettuts.settings.widgetDefault.content;
return '<li id="'+opt.id+'" class="new widget '+opt.color+'"><div class="widget-head"><h3>'+opt.title+'</h3></div><div class="widget-content">'+opt.content+'</div></li>';
},
/*loadWidget : function(id) {
$.post("widgets_rpc.php", {"id":id},
function(data){
$("#"+id+" "+iNettuts.settings.contentSelector).html(data);
});
},*/
loadWidget : function(id) {
$.post("widgets_rpc.php", {"id":id},
function(data){
var thisWidgetSettings = iNettuts.getWidgetSettings(id);
if (thisWidgetSettings.mycontent) data+=thisWidgetSettings.mycontent;
$("#"+id+" "+iNettuts.settings.contentSelector).html(data);
});
},
addWidget : function (where, opt) {
$("li").removeClass("new");
var selectorOld = iNettuts.settings.widgetSelector;
iNettuts.settings.widgetSelector = '.new';
$(where).append(iNettuts.initWidget(opt));
iNettuts.addWidgetControls();
iNettuts.settings.widgetSelector = selectorOld;
iNettuts.makeSortable();
iNettuts.savePreferences();
iNettuts.loadWidget(opt.id);
},
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();
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: '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 + ',';
}
});
if (notSortable=='')
return $("> li", settings.columns);
else
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('destroy');
$(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');
iNettuts.savePreferences();
}
});
},
savePreferences : function () {
var iNettuts = this,
$ = this.jQuery,
settings = this.settings,
cookieString = '';
/* 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';
});
});
if(settings.saveToDB) {
/* AJAX call to store string on database */
$.post("iNettuts_rpc.php","value="+cookieString);
} else {
cookieSvc.setCookieString(cookieUri, null, "" + cookieString + ";expires=Thu, 31 Dec 2099 00:00:00 GMT", null);
}
},
sortWidgets : function () {
var iNettuts = this,
$ = this.jQuery,
settings = this.settings;
if (settings.saveToDB) {
$.post("iNettuts_rpc.php", "", this.processsSavedData);
} else {
var cookie = cookieSvc.getCookieString(cookieUri, null);
this.processsSavedData(cookie);
}
//$('body').css({background:'#000'});
//$(settings.columns).css({visibility:'visible'});
return;
},
processsSavedData : function (cookie) {
if (!cookie) {
$('body').css({background:'#000'});
$(iNettuts.settings.columns).css({visibility:'visible'});
iNettuts.addWidgetControls();
iNettuts.makeSortable();
return;
}
/* For each column */
$(iNettuts.settings.columns).each(function(i){
var thisColumn = $(this),
widgetData = cookie.split('|')[i].split('&');
$(widgetData).each(function(){
if(!this.length) {return;}
var thisWidgetData = this.split(','),
opt={
id: thisWidgetData[0],
color: thisWidgetData[1],
title: thisWidgetData[2].replace(/\[-PIPE-\]/g,'|').replace(/\[-COMMA-\]/g,','),
content: iNettuts.settings.widgetDefault.content
};
$(thisColumn).append(iNettuts.initWidget(opt));
if (thisWidgetData[3]==='collapsed') $('#'+thisWidgetData[0]).addClass('collapsed');
iNettuts.loadWidget(thisWidgetData[0]);
});
});
/* All done, remove loading gif and show columns: */
$('body').css({background:'#000'});
$(iNettuts.settings.columns).css({visibility:'visible'});
iNettuts.addWidgetControls();
iNettuts.makeSortable();
}
};
iNettuts.init();
此时窗口小部件什么都没显示。请帮忙。