發新話題
打印

Stickies : jGrowl + ROR = 提示外掛

Stickies : jGrowl + ROR = 提示外掛

GitHub : Stickies(繼承自ihover修改的unobtrusive版本) : http://github.com/JokerCatz/stickies/tree/master

附加檔案是裝可愛的View,使用只需要類似
複製內容到剪貼板
代碼:
error_stickie("Your browser sucks" , {:life => "20000" , :corners => "20"})
在controller或view內下就可以跳出那個裝可愛的view,有error,notice,warning,debug可以玩(就是替換掉ROR內預設的notification的意思哩)

安裝
    ./script/generate stickies
   將會複製這兩個檔案到相對應的位置
        public/stylesheets/stickies.css
        public/javascripts/jquery.jgrowl.js
   使用jQuery & jQuery UI但plugin內不想付,要裝jRails或是自己手動載入請自行選擇
   之後在view或layout加入上面那兩個和加入這行<%= render_stickies %>即可

   以下是部分的README(可用的展現功能).......Orz"好懶得翻譯....等有時間再翻唄 & 想了解更多,可以查閱完整的README,有很多舊的訊息可參考
引用:
default :
   :remember => true,
   :name     => :browser_warning,
   :seen_in  => 24.hours,
addon-jGrowl support :

  Globel only , like <%= render_stickies(:closerTemplate => "CloseAll" , :header => "HiHi!!") %>


   :closerTemplate => "[ close all ]" This content is used for the close-all link that is added to the bottom of a jGrowl container when it contains more than one notification.
   :debug_mode => false ; debug mode for firebug

  Sub & Globel setting with stickies , like error_stickie("Your browser sucks" , {:life => "20000" , :corners => "20"})

   :header => "" ; Optional header to prefix the message, this is often helpful for associating messages to each other.
   :sticky => false ; When set to true a message will stick to the screen until it is intentionally closed by the user.
   :glue => "after" ; Designates whether a jGrowl notification should be appended to the container after all notifications, or whether it should be prepended to the container before all notifications. Options are after or before.
   :position => "top-right" ; Designates a class which is applied to the jGrowl container and controls it's position on the screen. By Default there are five options available, top-left, top-right, bottom-left, bottom-right, center. This must be changed in the defaults before the startup method is called.
   :theme => "default" ; A CSS class designating custom styling for this particular message.
   :corners => "10"px ; If the corners jQuery plugin is include this option specifies the curvature radius to be used for the notifications as they are created.
   :check => "1000" ; The frequency that jGrowl should check for messages to be scrubbed from the screen.
   :life => "3000" ; The lifespan of a non-sticky message on the screen.
   :speed => "normal" ; The animation speed used to open or close a notification.
   :easing => "swing" ; The easing method to be used with the animation for opening and closing a notification.
   :closer => true ; Whether or not the close-all button should be used when more then one notification appears on the screen. Optionally this property can be set to a function which will be used as a callback when the close all button is clicked.
   :closeTemplate => "×" ; This content is used for the individual notification close links that are added to the corner of a notification.
   :log => function(e,m,o) {""} ; Callback to be used before anything is done with the notification. This is intended to be used if the user would like to have some type of logging mechanism for all notifications passed to jGrowl. This callback receives the notification's DOM context, the notifications message and it's option object.
   :beforeOpen => function(e,m,o) {""} ; Callback to be used before a new notification is opened. This callback receives the notification's DOM context, the notifications message and it's option object.
   :open => function(e,m,o) {""} ; Callback to be used when a new notification is opened. This callback receives the notification's DOM context, the notifications message and it's option object.
   :beforeClose => function(e,m,o) {""} ; Callback to be used before a new notification is closed. This callback receives the notification's DOM context, the notifications message and it's option object.
   :close => function(e,m,o) {""} ; Callback to be used when a new notification is closed. This callback receives the notification's DOM context, the notifications message and it's option object.
   :animateOpen => { "opacity: 'show'" } ; The animation properties to use when opening a new notification (default to fadeOut).
   :animateClose => { "opacity: 'hide'" } ; The animation properties to use when closing a new notification (defaults to fadeIn).
上面的{""}表示該字串該是JavaScript語法並寫入於function中,"xxx"表示字串的預設值,"10"px表示單位&填數字字串就好,true/false就直接塞布林

以上,這個鬼非常的好用,你完全不用考慮要挖哪個地方來做錯誤訊息之類的訊息提示,只要通通丟那個語法就好了,改版後的還支援Theme,配上CSS一整個就無敵到一個極致啊X"D......花了一整個下午搞這個|||...不過應該以後每個專案都會用上這個才是 & 希望有人可以加入偕同開發的行列:P & 感謝ihover的初版
附件: 您所在的用戶組無法下載或查看附件
(Plurk) 人因夢想而偉大,如果沒有信仰,則將一無所有,持續往殉道的路邁進,獻祭著自己的靈魂,走著最極端的路;而那迷霧的後面,會是地獄,也是天堂
self.attributes #=> [惡搞之魂,貓化身,怪咖吸鐵石,邪道程式設計師,動漫宅,蘿莉控,惡趣味,Geek,H=F^3]
[82,117,98,121,32,79,110,32,82,97,105,108,115,32,105,115,32,77,121,32,76,105,102,101].map{|l|l.chr}.to_s

TOP

真棒的提示功能. 我都自己寫..... 醜又累.
http://www.keane.idv.tw
http://www.upgreen.com

TOP

真好用…根本不會動到目前的版面又漂亮…
謝謝JokerCatz花時間整合jGrowl

TOP

那個東西目前有個......不太算是缺點的缺點,也就是禁用JavaScript的時候將不會顯示任何訊息||||||,還在想辦法看要不要改用純HTML顯示然後隱藏轉jGrowl的模式來玩||
(Plurk) 人因夢想而偉大,如果沒有信仰,則將一無所有,持續往殉道的路邁進,獻祭著自己的靈魂,走著最極端的路;而那迷霧的後面,會是地獄,也是天堂
self.attributes #=> [惡搞之魂,貓化身,怪咖吸鐵石,邪道程式設計師,動漫宅,蘿莉控,惡趣味,Geek,H=F^3]
[82,117,98,121,32,79,110,32,82,97,105,108,115,32,105,115,32,77,121,32,76,105,102,101].map{|l|l.chr}.to_s

TOP

發新話題