2010-12-20 18 views
0

我正在嘗試爲正在處理的應用創建一個短期重疊通知。我也碰巧完全限制使用YUI作爲我唯一的腳本庫。目標是在保存表單的帖子後面的頁面上顯示YUI風格的通知。我將使用simpledialog,但客戶端不希望與通知進行交互,並且它們不需要任何按鈕或控件,只是一個顯示消息的無功能風格框。YUI「已保存」通知

現在我試圖拉開的效果是產生類似於jQuery的showGlobalMessage函數的東西。那麼,是否有任何YUI控件可以做到這一點?如果不是,使用自寫的js來產生這種效果的最好方法是什麼?

感謝您的幫助。

回答

0

YUI Overlay Widget是你在找什麼?

我粘貼了一個示例頁面,演示了它的工作原理。如果這或多或少是你想要的,那麼你應該可以擁有一個函數,在表單提交後,激活覆蓋。你將不得不查找API來詳細瞭解一下 - http://developer.yahoo.com/yui/3/overlay/

而且,YUI具有自定義事件(但我不知道很多關於他們):http://developer.yahoo.com/yui/3/event/

<body> 
<div id="myContent"> 
    <div class="yui3-widget-hd">Overlay Header</div> 
    <div class="yui3-widget-bd">Overlay Body</div> 
    <div class="yui3-widget-ft">Overlay Footer</div> 
</div> 
<style> 
#myContent 
{ 
background-color:blue; 
color:red; 
} 
</style> 
<div id="parentNode"></div> 
<style> 
#parentNode 
{ 
color:red; 
background-color:blue; 
} 
</style> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare phare 

Etiam porttitor consectetur sagittis. Suspendisse libero lorem, porta ut tincidu 

Etiam dapibus urna ut mauris semper varius. Vestibulum auctor tincidunt urna, id 

Nam posuere rutrum sem porttitor pretium. Suspendisse pulvinar sodales viverra. 

Donec eleifend nisi nec mauris vestibulum a placerat sapien molestie. In tempus 

Proin tincidunt feugiat accumsan. Fusce vel sagittis tellus. Quisque vitae conse 

Nam vestibulum, ipsum suscipit dignissim feugiat, nisl lectus sodales felis, nec 

Quisque venenatis, nulla sit amet sodales semper, turpis nulla viverra lectus, a 

Phasellus euismod ligula at lectus interdum a malesuada ante lacinia. Nam venena 

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 

Donec ut eros lorem, eget bibendum neque. Aliquam semper, tortor sed euismod luc 

Nullam volutpat adipiscing congue. Aliquam fringilla diam quis quam pharetra tin 

Etiam a tortor at justo sodales mattis. Praesent porttitor enim ac sem ultrices 

Nam condimentum, ante non adipiscing tristique, magna felis semper arcu, eu temp 

Morbi ut enim eget urna ornare elementum ac a ligula. Vestibulum commodo quam se 
<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script> 
<script> 
YUI().use('overlay', function(Y) { 
var overlay = new Y.Overlay({ 
    srcNode: '#myContent', 
    centered: true 
    }); 
    //overlay.render(); 
    overlay.render('#parentNode'); 
}); 
</script> 
</body> 
0

我結束了,只是寫一個javascript setTimeout函數來隱藏一個simpledialog。沒有我想要的那麼優雅......但是它可以工作。