Good Design Web　｜　BLOG » ajax http://blog.gooddesignweb.com WEBデザイン、wordpressに関するネタを紹介していきます。 Thu, 22 Dec 2011 01:34:10 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 Animated Menus Using jQuery http://blog.gooddesignweb.com/archives/128 http://blog.gooddesignweb.com/archives/128#comments Tue, 18 Nov 2008 06:03:17 +0000 admin http://blog.gooddesignweb.com/?p=128 Animated Menus Using jQuery

ajaxのjQueryライブラリを使った、メニュー作成のチュートリアルの紹介です。
メニューにマウスオーバーした時のゆっくりしたモーションが、かなりかっこいいですよ。
デモページがあるので、確認してみて下さい。
ちなみに、PSDファイル(photo shop形式のファイル）もダウンロードできます。

Animated Menus Using jQuery

]]> http://blog.gooddesignweb.com/archives/128/feed 0 tab Accordion http://blog.gooddesignweb.com/archives/96 http://blog.gooddesignweb.com/archives/96#comments Fri, 17 Oct 2008 00:03:17 +0000 admin http://blog.gooddesignweb.com/?p=96 tabAccordion

今回紹介するのは、新しいものじゃないんですが、タブ付きのアコーディオンajaxです。

タブをクリックするとそのタブの内容に切り替わるというものです。
ダウンロード&サンプルページ

セッティングの方法ですが、ファイルをダウンロード後、jsファイルをサーバーにアップロード。以下を<head>内に記入（jsファイルのアドレスは、アップロードしたアドレスに適宜変更して下さい。）

<script type=”text/javascript” src=”../scripts/prototype.lite.js”></script>
<script type=”text/javascript” src=”../scripts/moo.fx.js”></script>
<script type=”text/javascript” src=”../scripts/moo.fx.pack.js”></script>
<script type=”text/javascript”>
function init(){
var stretchers = document.getElementsByClassName(‘box’);
var toggles = document.getElementsByClassName(‘tab’);
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, ‘nextSibling’);
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>

続いて</body>の前に以下を記入

<script type=”text/javascript”>
Element.cleanWhitespace(‘content’);
init();
</script>

続いてスタイルシートに以下を追加します。

.box{
background: #fff;
}
.boxholder{
clear: both;
padding: 5px;
background: #8DC70A;
border: 1px solid #8DC70A;
}
.tab{
float: left;
height: 32px;
width: 102px;
margin: 0 1px 0 0;
text-align: center;
background: #8DC70A url(images/greentab.jpg) no-repeat;
}
.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 9px 0 0 0;
}

後は、このajaxを表示させたいところに以下を記入して下さい。（以下は、タブが1個の場合。タブを増やす場合は以下を追加で記入）

<div class=”tab”><h3 class=”tabtxt” title=”first”><a href=”javascript:;”>first</a></h3></div>
<div class=”box”>
<p><strong>The First Box</strong>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus ante nec ipsum. In ut felis id leo aliquet euismod. In augue lorem, posuere eu, tincidunt non, bibendum quis, nisl. Integer erat erat, posuere vel, convallis feugiat, accumsan ac, sem. Sed scelerisque tortor nec leo. Etiam vel massa vitae nulla elementum aliquet. Donec egestas semper tellus. Donec ultrices ante cursus lacus. Integer nec est. Suspendisse potenti. Donec fringilla. Maecenas condimentum, arcu sit amet volutpat tincidunt, mi urna sodales nunc, eget porttitor odio lectus sit amet metus. Vivamus aliquam. Etiam lectus leo, venenatis sit amet, vestibulum eu, sollicitudin vitae, metus.</p>
</div>

このajaxは、h3タグとクラスネームの”tab”がトリガーになってます。
hタグがh3だと都合が悪くて書き換える時は、<script>内のh3も書き換えないと、動きません。
結構、オシャレな感じなのでお試しあれ。

]]> http://blog.gooddesignweb.com/archives/96/feed 0