有趣的Coda-Slider

最近因為工作需要～比較常會用到CSS之類的東西,老實說CSS這種東西真的需要些經驗,因為用久了就會知道哪些ok那些用了會有差異,和一些解決的辦法,總而言之～就是用久就會了(我感覺要用很久)

今個順便紀錄一下Coda-Slider這個東西,Coda Silder其實就是講網頁區塊的橫向effect方式,這在flash的網頁其實頗為常見,以前做的案子透過Flex只要輕鬆的下個指令就可以做這種slide的動作,但如今不能使用flash的前提之下(為了要用精簡版又要符合我超愛酷炫的效果),公司最近的東西就使用了Coda-Slider來做

可以到這邊看看漂亮的效果 [Panic],當然官方這邊有更多的DEMO可以看看唷！！也順便為我自己紀錄一下～

但聽說這個方式對 SEO 和 Usability 有些許影響，所以盡量不要整個網站都這樣搞...

雖然我還不會用JQuery~-而且這個東西跟JQuery有相當大的關連,但自己看一下語法～稍微修修改改應該是不成問題,現在滿多CMS都有用到這類的東西,我想是未來的小趨勢吧,這陣子跟Flash真是愈來愈遠了^^

很貼心的是～這裡有滿完整的教學...當然英文是在所難免的,加減看吧～哈

講一下這個東西的好處-摘自介紹這個東西的網站(以下簡稱這個東西)
1. 這個東西不像Flash會吃CPU資源...without hogging browser CPU
2. 這個東西用不到Javascript
3. 這個東西在效果上支援tab的方式和左右navigation的方式
4. 這個東西不影響顯示內容的格式
5. 這個東西免錢...（公司應該最愛這個～哈）


說到這邊突然想到前陣子弄的影片之類的東西(因為構想是從那邊轉換過來的)




（我想我離題了...）稍微講一下怎麼弄的好了～

1. 在HTML的部份
Class navigation的部份是代表上方的tab
而class scrollContainer很明顯的就是放content的地方囉

<div id="slider">
  <ul class="navigation">
    <li><a href="#sites">Sites</a></li>
    <li><a href="#files">Files</a></li>
    <li><a href="#editor">Editor</a></li>
    <li><a href="#preview">Preview</a></li>
    <li><a href="#css">CSS</a></li>
    <li><a href="#terminal">Terminal</a></li>
    <li><a href="#books">Books</a></li>
  </ul>

  <!-- element with overflow applied -->
  <div class="scroll">
    <!-- the element that will be scrolled during the effect -->
    <div class="scrollContainer">
      <!-- our individual panels -->
      <div class="panel" id="sites"> ... </div>
      <div class="panel" id="files"> ... </div>
      <div class="panel" id="editor"> ... </div>
      <div class="panel" id="preview"> ... </div>
      <div class="panel" id="css"> ... </div>
      <div class="panel" id="terminal"> ... </div>
      <div class="panel" id="books"> ... </div>
    </div>
  </div>
</div>

2. 在CSS的部份
主要是調整整個滑動區域的樣式參數(要多大.邊界多寬之類的)

#slider {
  width: 620px;
  margin: 0 auto;
  position: relative;
}

.scroll {
  height: 250px;
  overflow: auto;
  position: relative; /* fix for IE to respect overflow */
  clear: left;
  background: #FFFFFF url(images/content_pane-gradient.gif) repeat-x scroll left bottom;
}

.scrollContainer div.panel {
  padding: 20px;
  height: 210px;
  width: 580px; /* change to 560px if not using JS to remove rh.scroll */
}

關鍵來了
3. 在Load外部檔案的部份
由於這個東西主要是使用jQuery,所以人家寫好的東西,我們就從外面把他load進來就好囉
可以放在</head>之前

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.3.3-min.js" type="text/javascript"></script>
<script src="jquery.localscroll-1.2.5-min.js" type="text/javascript"></script>
<script src="jquery.serialScroll-1.2.1-min.js" type="text/javascript"></script>

靠邀～人家寫好的東西不給我怎麼用～
來囉～主要是剛剛那幾個.js檔案囉～看不懂就不用改了...（我也不太會）

Download

下載後放在根目錄或是指定個路徑,改一下剛剛上面的路徑就ok囉～