Mootoolsと同じ機能をJqueryでも使いたい – リニューアル覚書

2008.05.16

TB:0

画像　- Mootoolsと同じ機能をJqueryでも使いたい – リニューアル覚書

リニューアル前まではサイトの動的部分はMootools1.2を使用していましたが、最近Jqueryを勉強しているので、こちらも全部Jqueryに変更しました。

MootoolsからJqueryに移行

Mootoolsは視覚的な部分に特化し、Webデザイン的にはとても扱いやすいJavascriptライブラリでした。

しかしJqueryはそれに併せて軽量で高速、phpとの相性もよく、Prototype.jsなどとも共存可能(※異なるJSライブラリは競合を起こしやすい)と聞いたので最近は仕事でもこちらをよく使っています。

リニューアルで全てJqueryにすることにしました。

Mootools公式ページではTooltipsを表示できるサンプルがあり、特にプラグインを必要としくても簡単に導入できました。

Mootools tooltips のサンプル

delab

<a href="http://de-lab.com" title="delab::トップページへ">delab</a>

title=”タイトル::説明”

mootools demos – Tips

希望するtooltips機能

指定した要素(例：div#entry)内の[a="title"]形式になってるものにTooltipsが適用される
title=”タイトル::説明”が適用されるもの
Mootoolsデモは<a Class=”tips1″などのクラス属性が必要だけど、無くても動くもの
半透明が好き

jqueryでも出来た

jQuery clueTip Plugin

何か複雑なことが出来るTooltipプラグインみたいですが、 Demoをみると良さそうなので採用しました。

デモはクラス属性がついてる物ばかりなので変えてみた。

header.php　

<script type="text/javascript" src="http://de-lab.com/wp-content/themes/delab/lib/js/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://de-lab.com/wp-content/themes/delab/lib/js/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="http://de-lab.com/wp-content/themes/delab/lib/js/jquery.cluetip.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('a[@title]').cluetip({splitTitle: '::' , dropShadow: false, showTitle: false});
	});
</script>

jquery.cluetip.css 該当箇所を書き換え

.cluetip-default {
  background-color: #4D473D;
  filter: alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
  color: #FFF;
  padding: 10px;
  z-index: 10000;
}
.cluetip-default #cluetip-outer {
  position: relative;
  margin: 0;
}
.cluetip-default h3#cluetip-title {
  margin: 0;
  padding: 0;
  font-size: 0.95em;
  font-weight: 700;
  color: #CCC;
}
.cluetip-default #cluetip-title a {
  color: #fff;
}
.cluetip-default #cluetip-inner {
  border-top : 1px #CCC dotted;
  margin:0;
  padding:0;
}