宣布銳3.1.0
3月31日下午12:59 2010 YUI團隊| 發展 | 9評論YUI的團隊很高興地宣布釋放銳3.1.0 。
這個版本的重點包括以下內容:
- 組件的基礎設施 -銳3部件基礎設施現已基本到位。 德賽satyen已被集中在這項工作在過去的幾個月中,和2009年在YUICONF討論的做法,他現在是為充分實現相應的 屬性 , 插件 和 Widget模塊組件基礎設施組到達GA狀態。 satyen提供了詳細的開發指南為那些有興趣學習更多有關組件的基礎設施。
- 國際化的實用工具 - Satyen工作在新的國際化實用與雅虎國際工程師諾伯特·林登貝格3.1.0。 該組件介紹銳3的方法,以國際化,允許外在模塊可以單獨提供從代碼與亞當摩爾定律指定語言偏好裝載機添加到支持的語言資源束。 我們將繼續發展和建立這種做法為我們介紹YUI的3部件具有更複雜的用戶界面。
- TabView作為參考部件 -馬特·斯威尼的TabView更新和3基於YUI的部件,包括採取漸進增強的方法,我們作為一個很好的參考實現。
- 裝載機改進 -亞當·摩爾已經提高了銳3的裝載機,以更好地支持YUI 3畫廊 。 為3.1.0,您現在可以加載任何圖庫模塊,無需額外的配置運到3.1.0之前只需通過引用在你的模塊
use()語句。 - 銳2 3 -亞當延長電源
use()甚至進一步與YUI的2 3個項目 。 隨著3.1.0版本,你現在可以直接從您的YUI的2個模塊use()語句,把您的銳3實例完全沙箱版本的銳2。 這項工作的支持開發,正在過渡到銳3,但仍然依賴銳2,包括廣受歡迎的是獨特的某些組件銳2的DataTable 。 - 新的可排序的實用工具 - 可排序是從DAV玻璃的新的實用程序,利用拖放來實現排序名單。 單個表或多個列出哪些項目可以從一個列表拖動到其他提供支持。
- 視覺處理滑塊 -視覺設計師傑夫·康尼夫銳工程師盧克·史密斯曾與Slider組件為3.1.0,這是一個系列的替代視覺滑塊治療的結果。 盧克還更新滑塊優勢,在一般的Widget基礎設施的改善。
-
新的API用於創建合成DOM事件 -盧克說的Y.Event.define()方法,以方便開發人員定義新的DOM事件在YUI 3生態系統。 使用這填補了在本土的DOM事件列表或另有標籤常見的用戶交互瞬間的空白,那麼你會與任何其他事件訂閱和退訂。
一如既往,YUI項目經理Georgiann帕克特3.1.0為YUI提供一個全面的變更發布-什麼改變了整個YUI 3家庭的詳細信息,請參閱該文件。
下一步是什麼?
YUI的3.0.0和3.1.0之間的版本,50多個免費的,開源的模塊已被添加到YUI的3畫廊 。 今天, 所有的內容是任何YUI 3.1.0實例 。 隨著我們對我們的工作為YUI的3.2.0開始,庫本身將是什麼,但靜態 - 目前,銳3增長更加迅速地從社會的貢獻比從核心小組的工作,這些捐款是在規模空前的訪問。
在未來幾週內,我們將更新YUI的路線圖和日曆與年初我們從3.2.0規劃的目標和時間表。 3.2.0將是作為核心團隊的大部分高價值的UI熟悉從YUI 2世界的基石,是把注意力集中的一個部件釋放。
在此期間,我們期待您的反饋對銳3.1.0。 參加我們YUILibrary.com論壇 ,讓我們知道通過bug跟踪系統,如果你發現問題在釋放。
共享和擴展: 書籤del.icio.us Digg它! | reddit!
即將舉行的行業會議
3月29日,9:24 PM 2010年由湯姆·休斯,裘槎| 雜記 | 5評論我們熱愛偉大的高科技會議上,我們知道,你有很多令人驚奇的事情分享。 所以我把這個會議和未來barcamps揚聲器或參與名單。
我們要在其中一些,我們希望我們會看到你有說話或不。
專業會議
Web 2.0博覽會紐約2010
截止日期 :2010年4月12日
Web 2.0博覽會紐約提交頁面
會議日期 :2010年10月18日- 21nd
地點:紐約,紐約,美國
EuroPython 2010
截止日期 :2010年4月30日,
EuroPython提交頁面
會議日期 :19 - 2010年6月22日的
地點:伯明翰音樂學院,英國伯明翰
barcamps
- 4月3日- MobileCamp波士頓
- 4月10日- BarCamp羅切斯特
- 4月10日- BarCamp夏洛特
- 4月17-18日- BarCamp波士頓
- 5月1日- BarCamp米蘇拉
- 09月25日- BarCamp瓊斯伯勒
我們將不斷更新事件發言的最後期限,因為他們來了。 讓我知道我錯過了在評論部分,我們將確保您的活動包括在這裡。
共享和擴展: 書籤del.icio.us Digg它! | reddit!
在YUI 3畫廊:馬特·帕克的Resize插件
2010年3月25日,6:45上午由馬特·帕克,在發展中, YUI 3圖庫 | 1條評論
作者簡介:馬特·帕克( @ Twitter的Lamplightdb )的創始人和開發商燈光下的數據庫系統 ,一個小公司,提供一個全功能的基於Web的管理系統在英國的非利潤。 馬特在北倫敦西部的生活和作品。 馬特在這篇文章中,討論他的新的YUI的3庫大小調整插件 。
我們使用一個可怕的很多不同的銳2在我們的主要應用部件和組件,並愛他們! 但我認為這是開始入門交手的時候, 銳3 ,決定我不得不將一展身手了YUI 3 銳2的Resize工具 。 我也有寫日記部件的長遠計劃,如果它要在銳3,這將需要一些resizableness。
其結果是: 我的銳3畫廊調整大小的插件 。 源是在GitHub上 , 這裡是一個功能的例子
我決定做一個插件,而不是一個widget。 至於我可以告訴大家的是,插件像一個漂亮的手提包,或者一雙鴕鳥皮鞋;他們漂亮的一個現有的元素,但他們沒有的BE-和最終所有。 元素調整大小感覺就像我的插件。
使用調整大小,包括在您的網頁的代碼:
<腳本
一旦你得到了頁面上的模塊,使得元素調整大小,只要插上容易:
YUI的()。使用(“畫廊的調整”功能(Y){ y.one(“#elementId的”)插頭(Y.Plugin.Resize)。; });
這似乎很重要的,我3銳銳2中存在的組件版本的API和配置應該是相似的,至少,或盡可能多,因為他們可以在YUI 3方法。 所以,你可以使用這個插件與YUI 2版本相同的配置對象,我提供了相同的API方法。 從頭開始,我寫的插件代碼,但CSS是直接從銳2複製,只有改變前綴yui- yui3- 。 這應有助於減少YUI的2到3銳過渡使人們的學習曲線。
這裡是作為一個對象作為第二個參數傳遞的一些更多的選擇,例如plug()
YUI的()。使用(“畫廊的調整”功能(Y){ y.one(#elementId“) 插頭(Y.Plugin.Resize {拖動:真實, 比例:假的, 身高:150, 代理:真實, 鬼:真, 動畫:真, autoRatio:真實, 手柄:[“T”,“B”,“L”,“R”,“TL”,“TR”,“基本法”,“BR” hiddenHandles:假的, 懸停:真, knobHandles:真實, useShim:真實, 狀態:真實, / /這是新的:一個選擇子元素內#elementId找到 / /應在包裝比例調整大小。 wrappedEls:“IMG” / /所以是這樣的:“擁抱”包裝包裝元素? / /這將只使用一個包裹元素。 hugWrappedEl:真 }); });
使用YUI的一致性有一個例外:包裝元素。 我調整大小畫廊模塊增加了一些div內被調整到給你拖動手柄的元素的元素。 這是罰款,只要元素的接受子節點,但圖像,文本域和不能做。 在銳2, “調整大小工具自動(或者如果你告訴它)一個包裝元素添加到您的圖片(或其他),它調整大小。
這是正常的,但它不是用插件方式的那麼好。 插件插入到特定的節點,並作為該節點的屬性訪問。 但是,如果我的插件開始創建新的父節點,並重視本身和它的行為該父接口是有點壞了,使用它變得混亂。 因此,底線是,你必須包裝你的照片,現在自己。 這可以轉換為優勢;包裝元素可以包含一個圖像的樁,說,它們都可以被調整的包裝,但他們的標題,可以獨處。
以插件方式是否適合你,我很想從用戶的反饋( 在新的品牌廊調整大小論壇 ) -也就是說,你喜歡的便利,或將你喜歡額外的便利,實用,可自動處理的包裝圖像和文本域? 我仍然有一些其他待辦事項,以及例如,我還沒有得到有線的活動,還有一些重新安排的零碎(拉出CSS類名),和一些性能和尺寸優化尚未做。 我還沒有完成跨瀏覽器測試,或者如果你使用Mac上的Resize,特別是,我很想上,它是如何為你工作的反饋 。
共享和擴展: 書籤del.icio.us Digg它! | reddit!
安德魯Bialecki榮獲效果模塊銳3畫廊比賽2010
3月24日,2010 3:29 PM由埃里克·米拉利亞,在發展中, YUI 3圖庫 | 5評論恭喜,,安德魯Bialecki( @ Twitter的abialecki ),其Scriptaculous的啟發效果模塊贏得銳3畫廊比賽2010 。
安德魯,家住在華盛頓地區,將出席JSConf,2010年在下個月從雅虎的免費機票 開發人員網絡 。 (謝謝, @ YDN !)
獲獎作品:影響
安德魯公司的項目的基礎上YUI 3動畫元件,增加糖層由Scriptaculous的API的啟發。 這個想法將是一個熟悉的(歡迎)用於這種語法的人之一:
(“#main_demo”)。y.one移動({X:300})淡出(); 法官表示讚賞這個包的實用和可取。 開發商將欣賞簡潔的語法和探索性的影響,特別是如果他們的經驗與其他圖書館工作。
我們也欽佩的敬業精神, 安德魯為模塊提供的文件 。 文件從來都不是一件容易的事,但它與您的代碼是實施者的第一接觸點,並全面記錄項目,你需要認真告訴你的聽眾。 安德魯很容易地清除我們吧。
我們可以看到gallery-effects顯示在大量use()在未來的聲明,這是決定性因素之一。 有用的,表現的,令人信服的記錄 - 在這種情況下,一個成功的組合。
他提交的安德魯。 安德魯的畫廊貢獻YUILibrary.com退房 。
佳作
我們判斷比賽的模塊的質量這是一個艱難的選擇 - 是一個有很多有趣的工作,在這一組。 我們挑出一些其他值得特別讚揚值得注意的條目:
- 用處:YUI的幻燈片 -喬希·利扎拉加YUI幻燈片模塊 (jQuery的週期插件的啟發)是乾淨,優雅,和有據可查的。 這是一個強有力的競爭者,如果你正在尋找基於YUI的3圖像循環儀。
- 唯一性:徑向菜單 -馬特·斯奈德的徑向菜單,縮略圖或中型對象組合是一種新的方法。 該組件的使用情況可以說是比一些UI部件窄,但部署在正確的情況下,它可能是相當的影響力和獨特的。
- 代碼質量:組件管理器 - ,埃里克Ferraiuolo的組件管理敲響了我們寫得很好,作為一個項目,幫助開發者管理自己的代碼結構。 雖然它不會使你的頁面有光澤,它可能有助於使您的應用程序更好地工作,這是值得在我們的書榮譽獎。
- 文件:YUISand -了勞倫斯密的YUISand模塊,這是一個漂亮的執行,由jQuery的流沙啟發,是有案可稽的和有趣的。 它與類文件共享高分, 詹姆斯Punteney的讚揚和模塊化幻燈片基地/幻燈片動畫串聯 , Josh的循環式幻燈片 ,和其他幾個人。
在17天的16模塊
這是一個短期運行的較量,但狹窄的窗口,儘管有16資格提交的模塊,和他們沒有失望。 事實上,其中許多人最終可能會作出一個令人信服的貢獻,您的未來3 YUI的應用之一。 有一個圖像放大鏡 , 兩個 視頻模塊, 一個3 YUI的數據源的包裝 ,使其工作與銳2組件, 傳送帶部件 , 一個DOM創建糖模塊 ,多。
與這些最近來港定居人士(連同其他幾個人從過去的幾個星期沒有比賽資格), YUI 3畫廊是高達82模塊 。 它們的範圍從基礎的異想天開,但資源本身已經是銳3開發組合的最有價值的方面之一。 ( 它可能會得到更有價值得很快 。)請記住,作為未來的3.1版本(只是幾個星期之遙),你就可以使用所有這些模塊直接從您的use()語句,沒有額外的配置或開銷。
感謝大家誰提交模塊。 安德魯在JSConf有樂趣!
共享和擴展: 書籤del.icio.us Digg它! | reddit!
Ada Lovelace的日2010:倫敦朱莉,劉戴安娜,海倫娜拉詹,Shweta Hayatnagarkar,雅虎財經和貝蒂祖
由布賴恩·朗特里在12:06 2010年3月24日,在雜記 | 評論關閉布賴恩·朗特里是雅虎在雅虎媒體集團的財務前端工程建築師。 本文支持YUIBlog的Ada Lovelace的日承諾;阿達的洛夫萊斯日慶祝婦女在技術和科學的貢獻。
雅虎的婦女 金融前端工程團隊都是一些最有才華的工程師,我曾經工作的特權。 他們的最佳做法,獲取和最終用戶的熱情,使建設世界上最大和最好的金融網站絕對的快感。 推出了大規模的更新,將我們的代碼庫全球推入數據中心,它在全球各地的雅虎財經網站上的前夕,我找到自己的感覺令人難以置信的幸運的一天到一天的基礎上與這些婦女的工作。 我問雅虎財經前端隊的婦女去想什麼給他們帶來的前端工程和它就像世界上最經常訪問的網站之一。
朱莉·倫敦
我建於1998年我的第一個網站時,被認為是GIF動畫尖端。 我作為一個人類學家工作的時間和從來沒有想到,5照出的小網頁,我為舊金山州立大學建會是一個路徑,最終將導致雅虎的開始。
我愛的前端工程,因為我喜歡接受挑戰,我喜歡解決難題。 我的工作是永遠不會無聊。 景觀不斷變化和脫穎而出,你必須不斷地學習。
在雅虎工作,使我的自我檢查。 我的工作是由數以百萬計的人使用的一個網站上的輝煌。
廖曼華
我第一次參與網頁編程工作,當我作為一個CO-OP的學生在我的本科學習。 我在惠普工作,對他們的內部網站和網絡工具。 我接觸到各種各樣的任務,但我很快就發現自己吸引到前端工程。 我喜歡能寫幾行代碼,打在瀏覽器上的刷新按鈕,並立即看到結果。 瞬間的滿意是壓倒性的。 我喜歡上最接近用戶的一線工作。 重要的是,我認為我向用戶提供了很大的經驗,作為一個前端工程師,我往往能影響網頁的可用性和設計。
雅虎在前端技術提供廣泛的培訓,它也有一個高標準,我們寫的代碼。 雅虎把我們寫的代碼訪問。 對我來說,這是非常有益的,要知道,殘疾人能夠訪問雅虎財經的特點,因為我寫的代碼,支持輔助技術。
我自豪地告訴人們,我最大的金融網站上的淨工作。 這是一個巨大的責任,知道我寫的代碼為全球數百萬用戶。 在同一時間,這是一種難以置信的感覺,要知道,我幫助,因為我寫的代碼更容易把事情做好的人。
海倫娜拉詹
大家都知道的諺語,“臉是心靈的指數”。 我會比較前端工程的臉和後端工程的頭腦。 說這一切。 首先是該網站的外觀和手感判斷,然後等特點,那就是我,這是什麼使我的生活有趣。
這是一個可怕的經驗,在財務方面的工作。 並不是每個人都有工作機會,它是由數以百萬計的人每天在世界上的產品,我很高興有這個機會。 這個項目給了我有幸與一些偉大的技師工作,它可以幫助我每天學習新的東西。
shweta Hayatnagarkar
前端工程是一個了不起的域 - 你到發展最酷的軟件,最終用戶實際看到和欣賞。 你是不斷發展的特點,影響用戶體驗。 此外,你得到學習和工作的前沿,國家的最先進的技術不斷發展。 雅虎提供了一個堅實的平台,前端工程。
它是雙刃的劍 - 一方面你1,無論你開發用於世界各地的數百萬用戶另一方面,你必須要成為你的腳趾不斷確保,該網站是運行完美,滿意。 因此,它的挑戰和滿足在同一時間。
雅虎是一個奇妙的地方是一個前端工程師。 前端基礎設施和不斷發展的前端研究,更何況我們的數百萬用戶,使發展中國家在雅虎最有趣的,具有挑戰性的和令人滿意的工作經驗。
貝蒂祖
我的GIF動畫一炮打響的時候,也開始在建設網站。 我在學習計算機科學,專注於高性能網站的發展。 我作為一個前端工程師加入雅虎,就已經很欣慰看到不同的前端技術如何發展在線的用戶體驗和網頁日常生活的一部分,人們的生活。
我在Yahoo!財經的前端團隊的重點包括分析和發展方式來提高網站的性能和用戶體驗。 我還幫助其他Yahoo!屬性來識別性能瓶頸,並提出改進方案。 我喜歡紫色的精神與公司以外的人分享,我是在美國馬薩諸塞州理工大學招聘計劃研究所的代表之一。
這將是雅虎在一個月內和我的第四年,回頭看,它一直是這樣一個充實的旅程。 我去上班,在網站上,影響數以百萬計的人們的日常生活,和我去上班,在一個友好,忙碌,瘋狂而有趣的團隊環境中的一些偉大的天才。
共享和擴展: 書籤del.icio.us Digg它! | reddit!
Ada Lovelace的日2010:雅虎開發者網絡Shahsahebi Sadaf
2010年3月24日6時56分上午由Nicholas C. Zakas | 雜記 | 3評論尼古拉斯·C. Zakas是對鉛的前端工程師雅虎 主頁 , YUI的貢獻者和作者。 本文支持YUIBlog的Ada Lovelace的日承諾;阿達的洛夫萊斯日慶祝婦女在技術和科學的貢獻。

成長在矽谷的中心地帶,人們可以說Sadaf Shahsahebi總是注定要與技術工作。 她的父親帶回家,她的第一台計算機時,她是7所中學,她已經在學校編程Pascal中,同時暑期課程學習C + +的。 即便如此,部分Sadaf同樣對藥品和潛力,以幫助治療和治愈兒童畫。 這是不正確,直到大學前,當她明確決定專注於技術。 醫學界的損失竟然是雅虎的增益。
機會暑期實習開始後,她在大學的大二在雅虎關係持續到畢業時,她決定雅虎全職工作。 雖然她的實習並沒有集中在前端工程,她所吸引,當她得知有關塾計劃對學科。 sadaf花了幾個月的學習有史以來第一次塾類畢業前的插件和前端工程的細節。
sadaf然後加入雅虎 應用平台(邑)作為他們的第一個前端工程師團隊。 她的團隊從頭開始創建邑的一部分,和它的功能豐富的平台,開發商享受今天增長。 相當一個人的成就,更遑論別人的走出大學校門的第一份工作。
因為她關於YAP的知識的深度,Sadaf也負責工作了YAP技術集成到我的Yahoo!她密切合作,與我的雅虎團隊,創建一個與現有產品的無縫體驗,使一個巨大的影響我的雅虎用戶的全球數百萬。
sadaf目前角色的一部分雅虎 開發者網絡團隊有她的開發和維護的開發工具,允許第三方開發人員能夠創建和管理他們的YAP的應用。 我只想說,如果你曾經創造了YAP的應用,那麼你Sadaf的工作表示感謝。
Sadaf帶來了她的工作是顯而易見的,當她說:一個網頁,一個愛的挑戰,以及對知識的渴求的熱情。 她經常可以發現,試圖擴大自己的理解,她所有的東西軟件,因為她是一個熱心讀者,剛剛開始在計算機科學碩士課程。
網絡所面臨的挑戰,不斷變化,不斷發展的API境界是完全調整Sadaf的相當大的人才。 雖然她很快就承認,IE6的驅使她的堅果,Sadaf前端工程和她的奉獻的熱情繼續學習,確保為她美好的未來,她未來的任何項目。
共享和擴展: 書籤del.icio.us Digg它! | reddit!
在YUI 3畫廊:約翰Lindal的表格管理
2010年3月23日11:08,在發展中, YUI 3圖庫 | 5評論由約翰Lindal上午網站上的主要形式已經很長一段時間。 在初期,他們很簡單:用戶輸入的值,然後等待,而服務器處理的值,或吐回錯誤。 Web 2.0的興起,已顯著改善的經驗,最顯著的客戶端上的預先驗證。 這將提供即時反饋,避免無謂的連接到服務器。
預驗證僅僅是形式的一個方面,但是。 整個週期是:
- 預填充默認值的形式;
- 預先驗證在瀏覽器中輸入;
- 提交表單數據以同步或異步的服務器;
- 顯示服務器返回的結果(成功或錯誤)。
當結合銳3 IO ,銳3庫模塊的形式管理支持這個完整的週期。 在這裡你可以玩的客戶端功能。
初始化
第一步,預填充默認值的形式,當然是最好的設定值直接在標記完成,因為這個工程即使JavaScript被關閉。 但是,您還可以通過地圖的默認值,表單元素的名稱鍵入表格經理構造,。 當你調用prepareForm()它合併傳遞給構造函數的默認值從DOM的默認值,構造函數值優先考慮。 結果被保存,所以你可以很容易地通過調用重置這些值populateForm() 你還可以修改這些存儲的默認值: setDefaultValues() setDefaultValue()或saveCurrentValuesAsDefault() (請注意,這是不同的瀏覽器的本地reset功能,因為它僅使用DOM中的編碼值。表格的經理提供clearForm()作為包裝reset 。)
在初始化過程中調用另一個有用的功能是initFocus() 這台集中在表格的第一個元素。 如果填寫表格是訪問該頁面的主要原因,這節省了用戶的點擊。 顯然,如果你有一個以上的形式在頁面上,你應該只為其中之一,呼籲initFocus()
預驗證
預先驗證用戶輸入的是一個棘手的業務 。 在我的經驗,最簡單的方法是最好的檢查後,用戶說, 我做的
一切,這就避免了需要過濾的輸入流(的keyup很容易趕上,但粘貼是非常困難的,這一切導致非常意外。
邊緣的情況下的行為),更重要的是,它不會打斷用戶的流量。 這就是為什麼表的管理提供了一個單一的功能來驗證一切形式(擊鼓,請): validateForm()
與其他解決方案不同,表格管理存儲在DOM中驗證配置。 為了紀念驗證領域,適用於直接到外地的一個或多個下面的CSS類:
-
yiv-required 值不能為空。
-
yiv-length:[x,y] 字符串必須至少x字符和最Y字符。 必須指定至少一個x和y。
-
yiv-integer:[x,y] 該值必須是一個整數,值必須至少在X和最Ÿ。 x和y都是可選的。
-
yiv-decimal:[x,y] 該值必須是一個小數,值必須至少在X和最Ÿ。 指數是不允許的。 x和y都是可選的。
例如,如果一個字段必須填寫,只接受6至10個字符,將CSS類yiv-required yiv-length:[6,10]
編碼驗證CSS類的一個很好的好處是,它可以應用在有關情況,例如,當編輯表中的動態創建的領域。 (我希望張貼銳2的DataTable很快一個例子。)FormManager公開的靜態函數validateFromCSSData()所以你不必推倒重來。
如果您需要使用正則表達式驗證一個字段,通過調用註冊setRegex() 為別的,你可以通過調用setFunction()函數附加到外地。 如果您需要進行檢查,包括多個領域,你可以重寫你的實例postValidateForm() Y.FormManager postValidateForm()
最後請注意:顧名思義,預驗證是不是真正的驗證 。 JavaScript是比較容易顛覆(或完全關閉),所以,它從客戶端接收服務器必須永遠不要相信什麼。 此外,只能做一些檢查,在服務器上,例如,任何需要訪問數據庫。
顯示錯誤
顯然,無論是在客戶端或服務器上的驗證預驗證,如果失敗,那麼你需要通知用戶,最好由突出的領域,需要注意的。 形式管理的功能支持通過displayMessage()
此功能預計某些CSS標記的DOM類surrouning每個表單元素或表單元素緊密結合。 我最喜歡的佈局是:
<div class=" formmgr-row> ...元素標籤... <span class=" formmgr-message-text "> </ SPAN> ...表單元素標記與CSS類formmgr的場 ... </ DIV>
這個定位很好,因為上述領域的標籤,並顯示一條錯誤消息時,這是非常明確的錯誤適用的領域。 看到它在行動中,按照這個鏈接,並在頁面上左上角單擊Validate按鈕。
但是,這僅僅是我的偏好。 You can arrange the DOM elements any way you want inside the container marked by formmgr-row , as long as somewhere inside is another container marked by formmgr-message-text , and the field itself is marked by formmgr-field .
Message Types
One important point is that displayMessage() requires a message type. The supported types are stored in Y.FormManager.status_order in order of precedence. The default is [ 'error', 'warn', 'success', 'info' ] , but you can modify this to suit your needs. The ordering is important because, if you call displayMessage() with a higher precedence type and the field is already displaying a message with a lower precedence, then the new message will replace the original message. Similarly, a lower precedence message will be ignored if a higher precedence message is already displayed. This allows you to toss messages at each field with abandon, secure in the knowledge that errors will override warnings.
When a message is displayed, the container marked with formmgr-row and the field marked with formmgr-field both get an extra CSS class: formmgr-has type , where type is the message type. This allows you to style the message, field, label, etc. in a different way for each message type. In addition, the fieldset containing the form field also gets the same class. This can be used to direct the user's attention when the form is large. (If several fields within a fieldset have different types of messages, the highest precedence type is set on the fieldset.)
消息
Form Manager includes a default set of error messages for all the validations that can be encoded in CSS. These strings are stored in Y.FormManager.Strings , so you can modify and/or localize them.
You can also specify custom messages for individual fields by calling setErrorMessages() .
Note that there is no default message for a regular expression validator, because anything generic like The value does not match the required pattern.
is utterly meaningless to the user. If you do not set a message for the type regex before setting the regular expression itself, Form Manager will log an error to remind you.
Submitting the Form
Regardless of whether you submit the data synchronously (via form.submit() ) or asynchronously (via Y.io ), you will probably want to disable the form while the data is being processed. Form Manager automatically finds all buttons inside the <form> element. If you have additional buttons elsewhere on the page, you can register them by calling registerButton() . All known buttons will be disabled when you call disableForm() . (If you use XHR, call enableForm() after you receive the response from the server!)
If you submit the form synchronously, then you will serve the same page again if there are errors. In order to work without JavaScript, you should write the errors directly into the DOM, the same way that Form Manager does it.
If you submit via XHR, then you know that JavaScript is enabled, so you can use displayMessage() to highlight the values which the server rejected. Obviously, this requires that the response from the server include detailed error information!
As a final note, if the form is in an overlay, then you should only close the overlay if the server response with success
; ie, display errors in the overlay, but display a success message somewhere prominent on the main page.
共享和擴展: 書籤del.icio.us Digg它! | reddit!






