jQueryを使ってトグルスイッチ

久しぶりのエントリーとなりました。なんとか生きてます。

jQueryのslidetoggleメソッドを使ってスライドするメニューを作ってみました。ボタンを押すと下へメニューがするするっと降りてくるものです。言葉では伝えにくいのでデモをご覧ください。また、サンプルファイルを用意してますのでご利用ください。

jquery-slidetoggle.png

デモを見る
サンプルをダウンロードする

これを作成しようと思ったきっかけは、コードエディタのEspressoがバージョンアップしたので、どのくらい機能向上したのかを確かめるためでもありました。印象は、いくぶんか安定性は増したもののまだまだ不安定な部分が見受けられます。かなり良い感じに仕上がってきているので残念です。

あと、コード補完を選択するショートカットキーに Control-N および Control-P が使えないのがすごく残念。これを変えられるだけでも印象はすごく変わってくるのになぁ。まだまだ、重要なドキュメントはCodaで編集することになりそうです。

サイトトップページにインデックスを追加

jQueryをアップデートしたついでに、jQueryプラグイン「ColorBox – customizable lightbox plugin for jQuery」で実装練習をかねてサイトトップページに今まで書き溜めたドキュメントへのインデックスメニューを追加しました。まだ、「実装しました」くらいの出来映えなので温かい目で見てやってください。

サイトトップページを開くと、左側に「menu」と書かれたタブがありますのでクリックすると menu-index.html ドキュメントをインクルードしてインデックスが開くような仕組みにしてます。変更があっても1ドキュメントを書き換えるだけでいいので楽かなぁと採用してみました。ただ、iPhoneレイアウトも同じページで行っているので、iPhoneで読み込む際にJavaScriptが一緒に読み込まれてしまうので表示速度が落ちてしまいます。同居させるといろいろと制限ができてしまうので、別居させる方向で検討しなければならないのかもしれません。

ズームアイコンを付ける方法

スタイルシートの positon プロパティを使って、画像を編集することなく左上隅にズームアイコンを配置する方法を書いてみました。以前、どこかで書いたような気がするんだけど見つけることができませんでした。なので、再び同じような内容を書いてみたという訳です。

.zoom { 
    position: relative; 
} 
img.zoom_icon { 
    position: absolute; 
    top:-10px; 
    left: -7px; 
}