moo.fxでSmiley格納

By Rika on DESIGN

moo.fx
ご存知の方からはとっても簡単な事なのでしょうが、コメントフォームにずらっっと並んだSmileyをJavaScriptで出したり隠したりする方法を、かれこれ一週間ぐらい悩んでいましたが、moo.fxに出会い、やっと設置することができました。
思ったより動作が軽快なのでお勧めです ;):
動作確認はコメントフォームのSmileyアイコンをクリックしてみてください。

Download

moo.fxのget moo.fx for prototypeからSTEP 1: DOWNLOADをクリックしてダウンロードする。

使用するもの

  • prototype.lite.js
  • moo.fx.js
  • moo.fx.pack.js

以下私が使用したCodeです。やり方は色々あると思いますが、無知な私がトライしてできた方法です。細かいことはわかりません:P:

<script type="text/javascript">
window.onload = function() {
	var myHeight1 = new fx.Height('box', {duration: 400, transition: fx.sineIn, onComplete: function(){$('result1').innerHTML = "hidden effect has been completed";}});
	myHeight1.hide();
	$('show1').onclick = function() {
		myHeight1.toggle();
	};
};
</script>

以上をHEADに読み込む。

追加code

Smileyを表示しているコメントフォームのテンプレート(ex.comments.php)にCustom Smileysプラグインを使用した場合

<a href="javascript:;" id="show1">smiley view</a></p>
			<p id="result1"></p>
        <div class="boxholder">
	     <div id="box1">
<!-- Clickable smileys start here -->
<?php
	if ( function_exists(csm_comment_form) ) {
		csm_comment_form();
	}
?>
<!-- Clickable smileys end here -->
            </div>
        </div>

via: NYOKIGLITTER - moo.fx part deux

you may want to subscribe to my RSS feed. Thanks for visiting!

関連する投稿
4 Responses to “moo.fxでSmiley格納”
  1. めぐみ

    ぅお!また、前以上にお洒落に生まれ変わってるっ!!!
    私も1カラムで作ろうと努力中なんですが、元にしてるThemeに穴やら不具合の要因を彼是見つけてしまって、超初心者の私でも、本を片手に1から作った方が早かったんじゃないだろうかという状況に陥ってます(苦笑)

    このJava、私も興味持ってるんですよ~。
    ナビにJavaが使われてるので、使いすぎると重くなるかなと心配はしてるんですけど、よさげですね~。
    トライしてみよっかなぁ♪

  2. Rika

    めぐみさん、こんばんは :):
    あはは。
    もう、themeいじりは病気ですね。誰か止めてください。

    今回は、この “moo.fx” をじゃんじゃん取り入れて、他を省こうかと思ってます ;):

  3. めぐみ

    あはは。何を隠そう(隠せませんが)、私もリニュ魔です。仲間、仲間! :P:

    書き方が悪かったですね。
    私もナビに使ってるJavaは、“moo.fx”なんですよ。
    Rikaさん同様、「とにかくシンプル!でも、ユーザビリティはばっちりよ!」にしたいと思って1カラムを選んだので、Show&Hideは凄く魅力的。
    でも、負荷を心配して1箇所利用で止めとこうかと思ってたんですけど…思ってたんですけど…いやん、Rikaさんのブログ、無茶苦茶軽快じゃないですかっ!
    私も心置きなく“moo.fx”なシンプル化に励もうと思いま~す! ;):

  4. Rika

    めぐみさん、こんにちは。
    私はJavaScriptどころかCSSもphpも、いや、人生そのものが行き当たりばったりなので ;D:
    何も考えずやっちゃってます。あはは。

    本当は、Show-hideだけにしたかったんですが、Show-hideを同じページに複数置くとエラーになり、対処法が分からなかっただけなんです。
    希望は、Audeoのように横にするするーって伸びて欲しかったんだけど。

    仲間ができて心強いです :D: :D: :D:

Have Your Say

RSS feed

rss rss

Category

TagCloud

ADS

BottomBar