使用銳EtreProprio.com

2010年3月2日,7:18 |在發展在野生YUI的實現由菲利普Bernou上午| 2評論

作者簡介: 菲利普Bernou 菲利普Bernou的創始人和法國的啟動的的首席執行官EtreProprio.com ,為個人的房地產網站。 IBM技術在盧森堡工作四年後,他於2008年推出與奧莉楊仁EtreProprio.com。

EtreProprio.com旨在提供免費的高品質分類( 見這裡上市的例子 )。 目前有超過五千業主上EtreProprio.com銷售他們的房子。 我們希望提供一個簡單但功能強大的接口,我們需要大量的前端邏輯。 經過一個小試驗,我們選擇了銳襲擊了我們強大的,強大的,非常有據可查和高度可定制的。 因此,EtreProprio.com使用YUI(2.8.0)巨資用於其前端。

使用以下模塊:

  • CSS:復位,基地
  • 公用事業:動畫,連接管理器,餅乾,數據源,拖放,JSON的
  • 部件:自動完成“按鈕,日曆,集裝箱,DataTable中,即食,滑塊,TabView,提

讓我們去更深的三種實現:高級搜索,照片上傳和TabView。

高級搜索

用於查找屬性的形式自動完成雙滑塊頂部。 以上的滑塊大拇指標籤的位置,聽來改變事件。 然後,他們將重新定位,如果min和max標籤之間發生碰撞。 可以顯示自動完成實施,如城市,郵政編碼或地區的混合元素。 每個元素都有​​其自己的顯示格式。

嘗試直播

照片上傳+管理

我們使用YUI的上傳數據表拖放模塊以創建簡單的形式上傳照片。 首先,用戶可以選擇他的電腦上的照片。 然後,他點擊“發送所有”和發送照片,一張桌子下面的照片和細節填充。 拖動和下降應用於表中的行,它允許用戶輕鬆地重新排列照片。 使用一個簡單的文字輸入和YUI的XMLHttpRequest實用, 連接管理器,可以修改的每一張照片的說明。

看到下面的演示視頻:

TabView

由於有大量的信息,顯示廣告的細節,我們用TabView設計的頁面。 TabView CSS的個性化功能讓我們頁面的其餘從設計的角度來看,它完美地整合。 我們也節省了tabview帶寬作為唯一感興趣的用戶點擊所有的標籤- TabView支持lazyloading標籤內容 ,以及該模式適用於我們這裡。

共享和擴展: 書籤del.icio.us Digg它! | reddit!

2評論

  1. 這是令人印象深刻。 我想,Craigslist的線索,將採取從您的網站,其在美國的房子房源!

    評論由威爾遜- 2010年3月3日,

  2. 哇,真棒。 我總是優先考慮的jQuery,但我遇到越來越多的網站使用YUI。 我想我可能需要有一看,看到你在這裡做。 好工作。

    評論CSS網頁設計廊 - 3月19日,2010

很抱歉,評論已被封閉,在這個時候。

主辦雅虎

©2006-2012雅虎公司所有權利保留。 隱私政策 - 服務條款

支持WordPress的關於雅虎 虛擬主機