</li>
<li class="widget color-white">
<div class="widget-head">
<h3>窗口标题</h3>
</div>
<div class="widget-content">
<p>人应竭尽所能，然后听天由命。</p>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="inettuts.js"></script>
</body>
</html>
inettuts.js
var iNettuts = {
jQuery : $,
settings : {
columns : '.column',
widgetSelector: '.widget',
handleSelector: '.widget-head',
contentSelector: '.widget-content',
widgetDefault : {
movable: true,
removable: true,
collapsible: true,
editable: true,
colorClasses : ['color-yellow', 'color-red', 'color-blue', 'color-white', 'color-orange', 'color-green'] },
widgetIndividual : {
//个别的模块
intro : {
movable: false,
removable: false,
collapsible: false,
editable: false
},
dingzh : {
movable: false,
removable: false,
collapsible: true
}
}
},
//初始化
init : function () {
this.attachStylesheet('inettuts.js.css');
this.addWidgetControls();
this.makeSortable();
},
getWidgetSettings : function (id) {
var $ = this.jQuery,
settings = this.settings;
//判断ID模块是否定义过
return (id&&settings.widgetIndividual[id]) ? $.extend({},settings.widgetDefault,settings.widgetIndividual[id]) : settings.widgetDefault;
},
//动态追加元素
addWidgetControls : function () {
var iNettuts = this,
$ = this.jQuery,
settings = this.settings;
//设置选择器环境
//默认情况下，选择器从文档根部对 DOM 进行搜索。不过，可以为 $() 设置可选的 context 参数。
//如果我们希望在一个 .column类属性 的对象中 中搜索一个.widget类属性的 元素，可以限定下面的搜索：
$(settings.widgetSelector, $(settings.columns)).each(function () {
//遍历匹配的结果
var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
//移除窗体元素
if (thisWidgetSettings.removable) {
$('<a href="#" class="remove">CLOSE</a>').mousedown(function (e) {
//阻止事件冒泡
e.stopPropagation();
}).click(function () {
if(confirm('这个小部件将被删除，确定吗?')) {
$(this).parents(settings.widgetSelector).animate({
opacity: 0
},function () {
$(this).wrap('<div/>').parent().slideUp(function () {
