top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1245

coda-slider:横滑りの、javascriptライブラリもいろいろあるけれど、jQuery利用のこの「coda-slider」を利用させていただきます! ・・・ 【javascriptライブラリ】

 2010-01-25
 一応、「創ったmetaboy」引越しのお話の流れ、
 ではありますが・・・

 久しぶりに、javascruptライブラリ
 もういまは、ほんと驚くほどたくさんのライブラリがあって、
 ほとんどが無料で使えるライセンスで公開されてて
 有難いことです。
 今回利用させていただいたのは、
 ・jQuery をベースにした
  ・Coda-Slider 2.0
   ※もう使ってる方もいらっしゃるでしょうね。
    使い易いし・・・軽いし・・・


Coda-Slider 2.0
Coda-Slider 2.0 1.1 のものを以前利用させてもらった
 こともあったのですが、2.0は、cssもうまく利用でき
 ・より容易にカスタマイズ
  できるようになってます




  追記に  ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎  Coda-Slider 2.0 はいいですね の巻
           :javascriptライブラリ

************************************************


 ■まずはこちらの
  デモメニューを・・・

  一目瞭然。素晴らしい軽快さ、と様々な動き。
  素晴らしい。


Coda-Slider 2.0 - October, 2009
Coda-Slider 2.0 - October, 2009 解説にもありますが、
 スライドするメイン部分の上にあるパネルは
 javascriptの中で自動生成されます。
 (もちろん オフも可能)




 ■実装
  ※すでに、jQuery は入ってます・・・


 

  □ダウンロード取得したファイルのうち
   ・jquery.coda-slider-2.0.js を
    複写・リネームして編集。
    最初にカスタマイズできる部分がまとめられていて、
settings = $.extend({
autoHeight: true,
autoHeightEaseDuration: 1000,
autoHeightEaseFunction: "easeInOutExpo",
autoSlide: false,
autoSlideInterval: 7000,
autoSlideStopWhenClicked: true,
crossLinking: true,
dynamicArrows: true,
dynamicArrowLeftText: "« left",
dynamicArrowRightText: "right »",
dynamicTabs: true,
dynamicTabsAlign: "center",
dynamicTabsPosition: "top",
externalTriggerSelector: "a.xtrig",
firstPanelToLoad: 1,
panelTitleSelector: "h2.title",
slideEaseDuration: 1000,
slideEaseFunction: "easeInOutExpo"
}, settings);
 解説は、
   > Coda-Slider 2.0 Settings - Full listing
     こちらにありますね。
     とりあえず私は、トップのタブを消して
     "dynamicTabs: false" としました。

 

  □これを
   <head>~</head> 内にいつものように組み込み。
<script type="text/javascript" src="/js/jquery.coda-slider20090125.js"></script>

 

  □実際のHTML部分では、
<div class="coda-slider-wrapper"> 
<div class="coda-slider preload" id="coda-slider-7">
<div class="panel">
<div class="panel-wrapper panel1 corner"><p>1つ目</p></div>
</div>
<div class="panel">
<div class="panel-wrapper panel2 corner"><p>2つ目</p></div>
</div>
<div class="panel">
<div class="panel-wrapper panel3 corner"><p>3つ目</p></div>
</div>
・・・・・
</div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
</div>
 のように用意します。

  □cssファイルも、用意されているものを編集。
   headタグ内に組み込みます。


 ・・・以上。
 簡単ですねぇ。後は 説明頁を参考に、好きな動きを実現。


 ■動きはまだ見せられませんが・・・
  引越し先の「創ったmetaboy」で、
  引越し先の「創ったmetaboy」で、こんな感じで用意しました
  こんな感じで用意しました。
  ※left/right で、気持ちよく横スライド!
   ありがとうございます。


 横スライドしたくて、まだ試されてない方
 お薦めですよ。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1245-96ca0557
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。