Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。 なぜ使うの? モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。 グローバル変数を極力減らして、機能をモジュールの形で提供できる。 コードの成長に合わせて構造を作れる コードを見通しやすくする 要件に応じて追加、置き換え、削除ができる シンプルな書き方 Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。 var Sample = { name: 'sampleくん', age: '30',
速度を数字で調節する際はカッコのなかの""は不要。jquery.jsを加えるのも忘れずに。 <script type="text/javascript"> $(document).ready(function() { $('#wrapper').fadeIn("slow"); }); </script> html <div id="wrapper"> ここにコンテンツ </div> css #wrapper{ display: none; } 追記【2012/7/19】:Flash部分には反映されないようです。 関連記事 ドロワーメニューjQuery Drawerコピペ用ソース jQuery でタブ切り替えコンテンツ jQuery トグル開閉 jQuery: ページの読み込み時にフェードイン jQuery で target="_blank" を使わず別ウィンドウ
最近ボールペンのキャップを閉め損ねて指が青色になって行きます。 javascriptでDOMの要素を追加するにはdocument.createElement()ですよね。 var div = document.createElement("div"); document.body.addChild(div); jQueryでやるにはどうしたらええのか。最初分からんかったとです。まあ、ひとつには上記のやり方で追加するってのもありです。追加したものもjQueryで使えます。しかしまあ、なんとなくやりたくない。単にタグを追加するには $("#hoge").append('<a href="http://www.google.com">google</a>'); で子要素に追加できるし、 $("#hoge").appendTo('<a href="http://www.google.com">go
Psst, here's beta copy of idTabs 3.0. Email me if you have questions. Version 2.2 Here's what's new. Changed option 'return' to 'change' Removes confusion with javascript's return Added ability to dynamically add idTabs The most requested feature Added 'selected' class option More freedom rules! Added ability to change defaults Now you can select no tab to be shown at start Bind idTabs to differen
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
今回は、javascriptを使ってグローバルナビやローカルナビをハイライト(オンマウス時の状態)にする方法をjQueryを使って簡単にやってみたいと思います。 今回のサンプルでは、「画像のグローバルナビ」を想定して作りました。これを応用すれば、ローカルナビの場合や、該当のリンクのCSSを変更することも出来るはずです。 詳しいソースはサンプルに直書きしております。下記に簡単な仕組みを箇条書きにしてみます。 jQueryとglobalNaviCurrent関数で成り立っています。 まずはlocation.pathnameで、開いているページのパスを取得します。(サンプルの場合は「/sample/2008/04/sample1.html」になります) 取得したパスを「/」で分割し配列に収めます。そこから必要な部分のみ取り出し並べて、グローバルナビに記述されているパスと同じパスを作製します。(サ
デザインも秀逸なナビゲーションを実装するスタイルシートとスクリプトのチュートリアルの紹介です。 各サイトではチュートリアルの他、ファイル一式や画像データをダウンロードできるものもあります。
視覚障害者のPC利用に役立つ話題、アクセシビリティ関連、Dreamのエッセイ、KUyo's Homepageの更新情報などをお届けいたします。 今回は、mixiの自動ログインブックマークレットを作ってみました。 …でも、おそらくほとんどの方は必要ないと思います。 なぜなら、mixiはログイン状態をクッキーに保存してくれるので、わざわざ毎回ログインする必要がないからです。 それなのになぜ作ったのか。 実は、先日「ボイスセンス」という音声PDAを購入しました。 ボイスセンス これにはウェブブラウザ機能があって、当然mixiにもアクセスできるわけですが、ウェブブラウザ閉じてしまうとクッキーが削除されるようで、mixiのログイン状態が消えてしまうわけです。 ですから、毎回ログイン用のメールアドレスとパスワードを入力しないといけない…めんどくさ!! ってなわけで、この作業を自動化するために自動ログイ
この頃、tumblrの有効な活用方法を見つけるべくゴニョゴニョしているわけだけど、複数のアカウントを持っていると、今どのアカウントでログインしているか分からないし、別のアカウントでreblogしてしまったりしていた。 そこで、特定のアカウントで tumblr. するための Bookmarklet を作ってみた。 Tumblr.ログインの仕組み Tumblrはログイン系、ポスト系のAPIが見当たらないのでHTMLを見てみました。 ログインは(http://www.tumblr.com/login)にemailとpasswordを渡してやれば良いんだけど、HTTP_METHODがPOSTじゃないといけないので、リンクだけでは実現できない。以下のようなフォームをポストしないといけない。 <form name="f" action="http://www.tumblr.com/login" met
概要 ページの先頭へ戻るときにスムーズにスクロールしながら戻れるようにするスクリプトです。 HTML 内に onclick 属性等を追加しないでいいので、綺麗な HTML ソースを保つことができます。この JavaScript を読み込むだけで動作するので、運用中の Web サイトへこの機能を追加することも容易です。 Web Graphics の A (slightly) better technique for “Back to Top” links.で公開されているスクリプトに追記させていただきました。 動作確認用の demo ダウンロード 説明 例えば、ページの先頭へ戻るのhrefの値を のようにしている場合、このスクリプトの最初にある backToTopBootConf のtopFlag の内容は#headerと設定して HTML ファイルの head 要素内などで読み込んでくださ
SBO(ソーシャルブックマークオプティマイズ)のブックマークレット SMO(ソーシャルメディアオプティマイズ)の中でもソーシャルブックマークの最適化に重点を置いたSBO(ソーシャルブックマークオプティマイズ)。 SBOとしてWEBサイト上にソーシャルブックマークのブックマークレットを設置することの意味は大きいです。 特にIT系の読者の多いサイトでは、コンテンツさえよければ多大なトラフィックがソーシャルブックマークより見込めます。 メジャーなソーシャルブックマークのブックマークレット(htmlとMovableType用とWordPress用)とアイコンをまとめときます。 アイコンはダウンロードして使ってください。 (FireFoxは記号でも改行を行わない仕様なのでIEでの閲覧がお勧めです) はてなブックマーク 日本で一番有名なソーシャルブックマーク。人気エントリーは毎日チェックしてます。 h
Ajax/JavaScriptライブラリをまとめておきます。(順不同) | 基本 | 統合 | 表示系 | GUI部品 | イメージ | PGM連携 | ブラウザ | Flash | その他 | | 部品集 | リンク | 編集履歴 | ・基本ライブラリ ・・・Ajax開発のベースになるもの ↑TOP prototype.js 超メジャーなAjaxライブラリ prototype.js の開発者向けメモ prototype.jsリファレンス prototype.jsリファレンス(JavaScriptist) prototype.js逆引きサンプル集 Prototype 1.5.0 Cheat Sheet Prototype 1.5 PDF - API/サンプル/解説 Prototype.js Documentation - まとめサイト Prototype 1.6.0へのアップグレード実例紹
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く