jQueryプラグインsuperfish、IE6でのバグ

jQueryプラグインsuperfishはマウスオーバーメニューを作成する為のプラグインです。

エフェクトも綺麗で良いプラグインなんですが、IE６でz-indexのバグがあり

修正に少し時間がかかったのでメモ。

修正する為には

jquery.bgiframe.min.jsが必要です。

IE6特有のバグになるので

<!--[if IE 6]><script type="text/javascript" src="js/jquery.bgiframe.min.js"></script><![endif]-->

と読み込んでおいて

<script type="text/javascript">
jQuery(document).ready(function(){
		//プラグインを使用する際は先にプラグインを適用
		if (typeof document.documentElement.style.maxHeight != "undefined") { //IE7以上、Firefox, Opera, Chrome等

ﾂjQuery("ul.sf-menu").supersubs({
            minWidth:    12,
　　 maxWidth:    27,
ﾂextraWidth:  1
ﾂﾂ        }).superfish();
ﾂ    });
} else { //IE6
ﾂjQuery("ul.sf-menu").supersubs({
            minWidth:    12,
　　　　　　　 maxWidth:    27,
ﾂ            extraWidth:  1
　　　　　}).superfish().find('ul').bgIframe({opacity:false}); 
//jquery.bgiframe.min.jsを選択エリアに適用



});


}
}); </script>

とすればOK。

他のブラウザの場合は読み込んでも読みこまなくても影響がないので、IE６用のコードだけでも問題は無いです。

中ページの大きさに合わせてiframeの大きさを変える

javascript使えば出来そうだなと思っていたら、やっぱり合ったので忘れないようにメモ。

http://css-eblog.com/javascript/fit-height-iframe.html

TinyMCEのボタンコントロール一覧

ボタンコントロールの設定と一覧

theme_advanced_buttons1:"",            //ツールバー1段目の設定
theme_advanced_buttons1_add:"",        //ツールバー1段目に加える
theme_advanced_buttons1_add_before:"", //ツールバー1段目の前に加える
theme_advanced_disable:"",             //指定のボタンを使用不可にする

設定オプション

エディタの各部分の位置やサイズ

theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,

その他オプション

//スタイルコントロールの設定
theme_advanced_styles : "class1=class1;class2=class2;",

//フォーマットコントロールの設定
theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,pre,blockquote,code",

//エディタ内のスタイルシート
//(wp-tinyMCEではthemes/(あなたのテーマ)/editor.cssがデフォルトとなっております)
content_css : "editor.css"

//日付や時間の挿入のフォーマット
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",

//エディタ内の自動的に改行
nowrap : false,

//出力するHTMLを自動に整形する <pre>内が勝手に整形された!
apply_source_formatting :false,

//*firefoxのみ Enterキーで改行した場合true:<p> false:<br /> falseにしたら文末のタグから出られない!
force_p_newlines : true,

よく使うリンク,イメージ,メディア等を登録

external_link_list_url : 　"mylinklist.js",
external_image_list_url : "myimagelist.js",
media_external_list_url : "mymedialist.js",
template_external_list_url : "mytemplatelist.js",

窶・mylinklist.js 窶貼r

var tinyMCELinkList = new Array(
	// Name, URL
	["Moxiecode", "http://www.moxiecode.com"],
	["Freshmeat", "http://www.freshmeat.com"],
	["Sourceforge", "http://www.sourceforge.com"]
);

窶・myimagelist.js 窶貼r

var tinyMCEImageList = new Array(
	// Name, URL
	["Logo 1", "logo.jpg"],
	["Logo 2 Over", "logo_over.jpg"]
);

窶・mylinklist.js 窶貼r

var tinyMCEMediaList = new Array(
	// Name, URL
	["Some Flash 1", "test1.swf"],
	["Some Flash 2", "test2.swf"]
);

窶・mytemplatelist.js 窶貼r

var tinyMCETemplateList = [
	// Name, URL, Description
	["Simple snippet", "templates/snippet1.htm", "Simple HTML snippet."],
	["Layout", "templates/layout1.htm", "HTML Layout."]
];

FireFox&IEお気に入り登録ボタンの処理

お気に入り登録ボタンを作成する際、ブラウザによって登録の仕方が違うので、処理をブラウザ毎に切り替える必要がある。
処理は以下の通り

function addBookmark(title,url) {
if (window.sidebar) {
window.sidebar.addPanel(title, url,”");
} else if( document.all ) {
window.external.AddFavorite( url, title);
} else if( window.opera && window.print ) {
return true;
}
}

上記javascriptを記述したら

＜input type=”button” value=”お気に入りに登録” onClick=”addBookmark(document.title, location.href);”＞

とボタンを生成して完了。

jQueryでラジオボタンの値を　取得、設定

$(“input[name=name属性]:checked”).val()

コレで値を取得して、

$(“input[name=name属性]“).val([値])

これで設定。

値を設定するときはリスト型で渡す所（[]でくくる）ことに注意。

jQueryに様々な機能を追加できるプラグイン（jQuery Tools）

画像を自動でスクロールするjavascriptを探していたら見つけたjQuery Tools

英語のページなので使い方を簡単にまとめておく

デモページ

ダウンロードページ

ダウンロードページを開いて必要なファイルをダウンロードする。

ｊQueryが無い場合はjQueryの本家か上記のダウンロードページでダウンロードしてください。

ダウンロードですが、必要な機能をチェックして「Download Now」というボタンを押せば最適化されたファイルがダウンロードできます。

いろんな機能があるので全部説明は出来ませんが、デモページに入ってコードを読めば、大体使い方が分かると思います。

主な機能は

1. Tabs(タブ機能）
2. ToolTip（ツールチップ）
3. Overlay（オーバーレイ（ライトボックスみたいなもの））
4. Scrollable（画像スクロール）
5. Validator（入力チェック）
6. Rangeinput(スライドバーで入力）
7. Dateinput(カレンダーで入力）
8. Expose（部分的に浮き出させる）
9. Flashembed（Flash読み込み）

です。

必要な機能は結構揃っているので使い勝手が良いかと思います。

WYSIWYGエディタ考察

WYSIWYG（ウィジウィグ）エディタとは、コンピュータのユーザインタフェースに関する用語で、ディスプレイに現れるものと処理内容（特に印刷結果）が一致するように表現する技術。

What You See Is What You Get（あなたが見るものはあなたが得るもの）の頭文字をとったものであり、WYSWYG（ウィズウィグ）と呼ばれることもある。

Wikipediaより

というわけで（どういうわけだ？ｗ）

最近CMS（コンテンツマネジメントシステム）を自作しているので、それに使えそうなWYSWYGエディタを考察します。

TinyMCE

WP等のオープンソースのCMS（コンテンツマネージメントシステム）と親和性が高く、殆どのCMSに搭載されていたり、プラグインで導入できる、WYSWYGエディタの代表。

一回使い方を覚えてしまえば、導入は非常に楽で

コマンドラインも豊富で

tinyMCE.execCommand(‘mceAddControl’, false, id);
で対象のテキストエリアにTinyMCEの機能を適用したり
tinyMCE.execCommand(‘mceRemoveControl’, false, id);

で対象のテキストエリアにTinyMCEの機能を削除したりできます。

http://wiki.moxiecode.com/index.php/TinyMCE:Commands

ただ、

機能が非常に多い＋色々最適化される

ので何か細かい事をしたい時に少し厄介になります。

改行についてもデフォルトでは＜ｐ＞タグで挿入されるので、実際のページに反映したときに

デザインが崩れたりします。

これは＜ｂｒ＞タグで改行するというオプションを使えば回避可能。

あと、文字装飾の際に（仕方ないのですが）<span>タグが何重にも重なる事があるので

それで思った様な装飾が出来ないことがあります。

例）大きくして、色を変えたら文字の大きさが変わっていない等

これは欠点ではないのですが、TinyMCEはサニタイズ（外部からの操作によって受け手に悪影響を及ぼす動作をさせないように編集してしまう）機能が充実していて、細かい設定もできます。

ただ、このサニタイズは優秀すぎて、データを飛ばした時に勝手にタグが変わっていたり、エンコードされていたりするので、TinyMCEから送られてくるデータはチェックする必要があります。

高機能ゆえに扱いきるには知識が必要ですが、Web編集に非常に大きな恩恵があるので使いこなしたいエディタです。

CKEditor

FCKEditorの後継で、とにかく軽くて導入しやすい。

がモットーです。まだ使い込んでいないので、これから使ってみて感想を書いていきたいと思います。

TinyMCEで改行が文字化けする件

TinyMCEで改行すると

<p>[半角スペース]</p>

が入り、この半角スペースが文字化けを起こすことがある。

この影響でDBにちゃんと反映されなかったりしたので回避方法をメモ

force_br_newlines : true,
forced_root_block : '',
force_p_newlines : false,

をinitのオプションに追加すると
改行が<br />
で扱われるので回避できる。

ハイパーリンクにスクロールアニメーションを加える（jQuery）

ハイパーリンクをクリックした際デフォルトではパッと移動しますが

移動にスクロールのアニメーションをつけれないかと自作してみました。

j$ = jQuery;

var delay = 20; //処理間隔（ms）
var sw = 0.35; // 移動の細かさ （0 < sw <1 の範囲で）

var baseDelH = 10;
var beforeH;

j$(function(){
j$(“[href^='#']“).each(function(index){
j$(this).click(scrollEvent);
});

});

function scrollEvent(eo) {
var hlId = j$(this).attr(‘href’);
smoothScroll(hlId);
return false;
}

function smoothScroll(hlId) {
var targetH = j$(hlId).offset().top;
var targetW = j$(hlId).offset().left;
var w = j$(window);
var sH = w.scrollTop();
var wH = w.height();

var delH = sH – targetH;

var offset = delH * sw;
var nextHeight = sH – offset;

if (delH > 0) {
if (delH < baseDelH) {
w.scrollTop(targetH);
} else {
w.scrollTop(nextHeight);
var timerId =ﾂ setTimeout(
function () {
smoothScroll(hlId);
clearTimeout(timerId);
},delay);
}
} else if (delH < 0) {
if (delH > baseDelH || (beforeH == nextHeight)) {
w.scrollTop(targetH);
} else {
w.scrollTop(nextHeight);
var timerId =setTimeout(function () {
smoothScroll(hlId);
clearTimeout(timerId);
},delay);
beforeH = nextHeight;
}
} else {
w.scrollTop(targetH);
}
}

ｊQueryの下で読み込めば勝手にハイパーリンクにアニメーションが加わります。

イージングを大雑把にした動きになります。

ページの感じが変わるので良かったらどうぞ＾＾

jQueryオブジェクトの比較

jQuery(“#head”)同士が同じ場合の処理をしたい時

思いつく処理は

jQuery(“#head”)ﾂ ==ﾂ jQuery(“#head”)

ですが結果は

false

になります。

先に作られたjQueryオブジェクトと後に作られたjQueryオブジェクトは同じにならないみたいで

この問題を解決するには

jQuery(“#head”).get(0) == jQuery(“#head”).get(0)

とDOM同士を比べることで解決できます。