仿雅虎yahoo多標籤切換
中 |
小 [2007/11/23 11:18 | 分類:
admin ]
最近**要改版，其中**的改版效果設計模仿了yahoo的多標籤tab切換,先看看yahoo的標籤效果吧
demo效果:
yahoo.html
效 果看起來不錯，對於**內容很多的**這樣的標籤切換很能節省頁面空間，同樣給瀏覽者以新奇的感覺。好的效果就應當使用快捷效率的方法來實現,本來想借用 yahoo的自身實現**，但看來看去覺得其實現程式太複雜這當然是我自己的看法，也許是因為技術不夠弄不明白程式作者的意圖，去網上搜了一把，結果出來 的都是yahoo一樣的大同小異對於初學或者根本不明白js的人想弄明白太難了，所以想想就乾脆自己寫出乙個吧。下面我就把我實現的仿yahoo切換標籤 步驟列出來，給那些跟我一樣鬧不明白yahoo**的朋友分享下。
功能：模仿yahoo的多標籤切換，增加預設顯示狀態。
原理：我總認為寫程式和做其他事情一樣，先把其中原理或者計畫弄清楚了那我們實施起來就很容易，對於這個標籤切換我們也一樣想理清實現它的基本原理，然後編寫對應的js**和css樣式**。
實現這個標籤切換的原理其實很簡單，就是當滑鼠滑過它時，讓對應的顯示框給顯示出來，其他的給隱藏掉。
先看看我們所使用到的：
郵箱背景：a
空間背景：b
相簿背景：c
沒用使用時的背景：d
我們的js**主要就獲取滑鼠是否在滑動到對應標籤上，如果是我們就通過js改變它的背景為對應始終狀態(a或b或c),另外行的背景為沒用使用時的背景(d)，同事顯示、隱藏要展示的對應標籤內容。
第一步：html組織顯示
css **
第二步：js**編寫
首先引入js框架prototype.js
實質函式**：
函式的呼叫：
想要使用哪個就定義那個為預設的顯示狀態
效果：三欄導航
yahoo.html 兩欄導航
yahoo_3.html
tags:
yahoo標籤
Yahoo的SNS 雅虎關係
雅虎中國也開始進入sns領域，開通了乙個名為 雅虎關係 的sns平台，用於和熟人 朋友 同學 同事 家人 建立緊密聯絡，了解他們的狀況與動態 進 感聯絡 趣味互動 增加人際關係等等。到現在為止，中國的sns 已經氾濫成災，如遍地牛毛一樣多了，架設乙個sns也幾乎沒有什麼技術難度，只要在支援php的伺...
GridView實現多標頭
1 建立乙個類，public class multtitle title 為乙個自定義的titles類陣列，其有兩個屬性，乙個為span 要合併的列數 乙個是text 單元格中內容。關於titles類請自己定義，很容易的。public static void createtitle object s...
一拆多 驗證打標
data a input id aa bb cards 3 1 da 3 2 22 1 1 123 1 2 113 2 1 22 2 2 33 run 笨辦法，按照分類標誌取子表，幾個分類就取幾張 data a1 set a rename aa a1 bb b1 if aa 1 run proc s...