12
1月
2013

[javascript]セレクトメニューを小綺麗にカスタマイズする方法

いつも味気ないセレクトメニューで飽き飽きな方にオススメ。

スマホとも相性の良さそうなjs、『dropkick.jp』をご紹介します。

img_130112-01

セレクトメニューは普通こんな感じ。

img_130112-02

dropkick.jsはそれを簡単に、そしてスタイリッシュにしてくれます。

実装方法は実に簡単で、上記リンク先よりDLしたファイル内にある

dropkick.css
jquery.dropkick-1.0.0.js

とjquery、あとは下記をhead内に記述します。


<script type="text/javascript" charset="utf-8">
 $(function () {
$('.default').dropkick();
 });
 </script>

後は、selectにclass追加(この場合は『.dafault』)すれば完了です。
このサイトのお問い合わせフォームにも実装してみましたので良かったらご覧ください。こちら

ちなみにcontact form 7でdropkick.js使う場合は、
[select **** class:default~
みたいな感じでclassを付加すればOKです。

05
1月
2013

IE8でlightboxで真っ黒になる場合

ちょっと前の話、lightboxを何となく使っていてIE8で真っ黒になる場合。
環境によっては再現出来ない(正常表示になる)ケースもあるのでわかりにくいですが、
その場合の対処など。

  • 対処法1:slimboxなど類似プラグインに差し替えてみる
  • 対処法2:IEのレンダリングモードを切り替える
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

とか、

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

とかって感じ。

プラグイン差し替えるのも場合によっては修正範囲広くて対応しきれない事もあるので
こんなやり方もありますよ~的な感じですが。