掌握 Dojo 工具包，第 7 部分: Dojo 的扩展

清单 8. Reminder.html
　<div　class="memo">　
　<div　class="title">${title}</div>　
　<div　class="close"　dojoAttachEvent="onclick:_onClose">X</div>　
　<div　class="contents"　dojoAttachPoint="containerNode"></div>　
　</div>　

把清单 9 中的 css 片断保存为 Reminder.css，同样放到刚创建的目录中。

清单 9. Reminder.css
.memo　{　background:　yellow;font-family:　cursive;width:　10em;position:absolute;　
　　　　　top:5px;right:5px;z-index:100;}　
.title　{　font-weight:　bold;text-decoration:　underline;float:　left;}　
.close　{　float:　right;background:　black;color:　yellow;font-size:　x-small;　
　　　　　　cursor:　pointer;}.contents　{　clear:　both;font-style:　italic;}　
.close_focus　{　float:　right;background:　red;color:　yellow;　
　　　font-size:　x-small;cursor:　pointer;}　

template 文件已经准备好了，现在让我们来看看 Dijit 定义文件，代码如清单 10 所示，把它保存为 Reminder.js，放到目录 <Dojo home>/ibm/dijit 中。

清单 10. Reminder.js
　dojo.provide("ibm.dijit.Reminder");　
　dojo.require("dijit._Templated");　
　dojo.require("dijit._Widget");　
　dojo.declare(　
　"ibm.dijit.Reminder"　
　,[dijit._Widget,dijit._Templated]　
　,{　
　　title:"Reminder"　
　　,templatePath:　dojo.moduleUrl("ibm.dijit",　"templates/Reminder.html")　
　　,_onClose:　function(){this.destroy();}　
　});