flip!という良い感じのプラグインがあったので色々やってみた。
設置は簡単で
|
1 2 3 4 5 6 7 | $( "#flipPad a" ).bind("click",function(){ $( "#flipbox" ).flip({ direction: "動き方", color: "#ffffff", content: "HTML" }) }); |
という感じでボタンに対してイベントを付加する。
動き方には
左：rl
上：bt
下：tb
右：lr
のいずれかを代入する。
あとはエフェクト後の要素に何を入れたいか
を定義するのが
content
でありHTMLも可。
colorは背景色
サンプルのコードは以下。
JS
|
1 2 3 4 5 6 7 8 9 10 | $(function(){ $( "#flipPad a" ).bind("click",function(){ var $this = $(this); $( "#flipbox" ).flip({ direction: $this.attr("rel"), color: $this.attr("rev"), content: $this.attr("title") }) }); }); |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | #flipbox { width: 500px; height: 200px; line-height: 200px; background-color: #d90071; font-size: 200%; color: #ffffff; text-align: center; } #flipPad { width: 500px; text-align: center; margin-top: 10px; } #flipPad a { -webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; display: inline-block; margin-right: 3px; text-decoration: none; color: #333; text-align: center; padding: 3px 4px; background-color: #F2F2F2; background: -moz-linear-gradient(top, #fafafa 0%, #e2e2e2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#e2e2e2)); text-shadow: 1px 1px 0px #ffffff; border: solid 1px #E3E3E3; border-color: #e3e3e3 #e3e3e3 #cccccc; box-shadow: 0px 0px 1px #ffffff inset; cursor: pointer; float: left; } #flipPad a:hover { background: -moz-linear-gradient(top, #e2e2e2 0%, #fafafa 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(100%,#fafafa)); } |
HTML
|
1 2 3 4 5 6 7 | <div id="flipbox">flip-box</div> <div id="flipPad"> <a href="#" class="left" rel="rl" rev="#c0d4e0" title="ああああああああああ">left</a> <a href="#" class="top" rel="bt" rev="#bfd3b9" title="いいいいいいいいいい">top</a> <a href="#" class="bottom" rel="tb" rev="#8c2230" title="うううううううううう">bottom</a> <a href="#" class="right" rel="lr" rev="#d3669d" title="ええええええええええ">right</a> </div> |
また、これを応用させてメールフォームを作ってみた。
以下のようにして要素を埋め込み次のステップの関数を呼ぶというようにしている。
|
1 2 3 4 5 6 7 8 9 | <input type="text" id="tb_setp1"><input type="button" value="次へ" onClick="to_step2();"></div> <div id="step2"> <div class="box"> <i>お名前</i> <input type="text" id="tb_setp2"><input type="button" value="次へ" onClick="to_step3();"> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 | function to_step2() { str += "メールアドレス：" + $( "#tb_setp1" ).val() + " "; $("#flipbox").flip({ direction: "rl", color: "#c0d4e0", content: $("#step2").html() }) } |
