[jQuery] テーブルやリストの背景色を１行ごとに変える | Web Tips - around design
jQueryでよく使うもののまとめシリーズ。 テーブルやリストの背景色を１行ごとに変えて見やすくする技です。 jQuery (Javascript) <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ $('#itemlist li:even').addClass('even'); $('#itemlist li:odd').addClass('odd'); }); </script> HTML <ul id="itemlist" > <li>アイテム１（奇数の列）</li> <li>アイテム２（偶数の列）</li> <li>アイテム３（奇数の列）</li> <li>アイテム４（偶数の列）</li> <li>アイテム５（奇数
Titanium Mobile Best Practices - JP::HSJ::Junknews::HatenaSide
この記事はAppcelerator公式Wikiのドキュメント(2011/10/20更新版)に基づき、和訳±αしたものです。 訳質は良くないので眉に唾を付けて読んでくださいね(^^; https://wiki.appcelerator.org/display/guides/Mobile+Best+Practices （補足：Titanium Mobile SDK 1.7.x以前とは状況が異なる部分もありますので、1.8.x前提ということでご覧ください） このガイドラインの目的 Titanium Mobileは比較的歴史浅く、継続的に変化をしているプラットフォームです。 このベストプラクティスは変更される可能性も否めませんし、Titaniumのアプリケーションを構築するのに必要な知識のすべてを網羅する事も出来ません。 そのため、現在Titanium Mobileアプリケーション開発（もしくは一
JavaScriptでnewが不要なコンストラクタ - 檜山正幸のキマイラ飼育記 (はてなBlog)
昨日の「JavaScriptでシーケンシャルな作業をゆっくりと行う方法」で自作のtaskman.jsを紹介しましたが、最初は、JSDeferred（http://cho45.stfuawsc.com/jsdeferred/doc/intro.html）を使おうかと思ってました。やることを限定すれば関数2つで済んでしまうので、気まぐれでtaskman.jsを書いたのですが、もっと色々やりたいならJSDeferredのようなチャンとしたライブラリがお勧めです。 ところで、JSDeferredのソースに次の1行がありました。 function Deferred () { return (this instanceof Deferred) ? this.init() : new Deferred() } 最初、「ん？ なんだこれ」と思ったのですが、しばらく眺めて「オオオーッ、これはいい！」と叫んで
『Backbone.jsの1番良いリファレンスを頼む』へのAwesomeな回答を翻訳してみた - hamheiの日記
©Powered by hamsketch Quoraの"What are some good resources for Backbone.js?" のトップ回答がcoolだったので、翻訳して追加して編集してコメントしてメモ。 - 公式 Backbone.js 公式サイト ソースコード 解説付きソースコード 解説付きソースコードの翻訳（日本語） Underscore.js（公式サイト）（ソースコード） backbone.jsはunderscore.jsに強く依存してるから、こっちも勉強した方が良いよ 実はこの2つはホストしてるところは一緒だよ（DocumentCloud） 最新の情報が欲しいなら... 公式Wiki GithubのWiki。活発 Backbone.jsは、コードのホストは勿論、公式サイトもデモサービスもgithub::pages、Wikiもgithub::wikiと、Oc
Opera News
AI Opera’s vision: agentic browsers will tackle web inefficiency and unlock massive productivity gains July 31st, 2025 Agentic AI Browsers are here to completely shift the human-computer interaction, and that's why we are building Opera Neon. AI, Uncategorized This is what you can do with Opera Neon: The Next-Gen AI Agentic Browser July 18th, 2025 Discover Opera Neon, the first truly agentic AI br
戻るボタンが押された際、ページのJavaScriptを途中の状態から実行させない方法
スマートフォンを含む最近のブラウザでは、戻るボタンで前のページに戻った際に、JavaScriptも含めて前回の最後の状態を復元します（Back Forward Cacheと呼ばれます）。これはとても便利なのですが、ページを作成する立場からすれば、余計なお世話であることもあります。 Back Forward Cacheの無効化はとても簡単に実現できます。ページの中にonunloadを書くだけです。 <!DOCTYPE html> <html><head><title>onunload test</title> <script> window.onunload = function() {}; window.onload = function() { var count = 0; var loop = function() { document.getElementById("num").in
これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
JavaScript：undefined値の判定
JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。 var a; alert(a); //undefinedが入っている これを利用して、変数が定義済みかどうかを判別することが可能です。…が、やり方がいろいろあるみたいなので、まとめてみることにします。 undefinedと比較する if (a === undefined) { alert("aは未定義"); } グローバル変数として、そのまんまundefinedという名前の変数が用意されているので、それと比較するやり方。一番素直な方法ですが、JavaScriptにおいては良くない書き方とされています。 undefinedは予約語ではなく、単なる変数です。だから上書きすることができるし、関数スコープ内で同名のローカル変数を作ることもできます。（ただし最近の処理系ではconst扱いになって上書
jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種
ベースとなるhtml 今回はテキストタイプなので文字列をリストで並るだけですね。 一部spanを入れた方が動作が安定することがあったので入れてます。javascriptのコードにspanを指定していなかったら外してください。 html <ul id="nav1"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">LINK</a></li> </ul> 1.マウスオーバーでスライドするボタン 単純に横にスライドするアニメーションは「marginLeft」を変化させます。 テキストの色はcssで変えてます。 このナビゲーションに限ってはliにspanを入れると安定して動作するっぽいです。 html <li><a href="
jQueryでリンク＜a＞クリック時のhrefの値を無効にする方法｜BLACKFLAG
jQueryを使ってWebページ上で何かアクションを実装する際、 リンク＜a＞タグをクリックすることでエフェクトを実行させることはよくあること。 その際、別ページへ遷移するわけでも、ページ内リンクを使うわけでもない場合に リンク＜a＞タグの属性「href」の飛び先の指定に困ることがあることも。 結局「href=”#”」でごまかしたり、「href=”javascript:void(0);”」としたり。 その様な場合に使えそうな、 クリックされたリンク＜a＞タグの「href」を無効にする方法があったのでメモ書き程度に紹介してみます。 サンプルでは、リンク用の＜a＞タグの「href」属性が 以下の様な「href=”#”」の場合とします。 ◆HTML <a href="#">アクション実行用リンク</a> このソースの場合の、リンクテキストをクリック後に 「href」属性を無効にするスクリプトは以
newを封印して、JavaScriptでオブジェクト指向する(1)
以下はプロトタイプ的継承だけで一通りの機能を実現できる、という一つの例です。もちろん他にも書き方はありますし、newを使うのがよくないと主張しているわけではないです。 (誤解を生みそうな文体が混じっているようなので追記: 2011/5/14) 春ですし、少し初心者向けの記事を書きます。タイトル通り、JavaScriptのオブジェクト指向について。ちょっと長くなるので目次です。 クラス（に相当するオブジェクト）を作る オブジェクトからオブジェクトを作る（インスタンス化） 単一継承 多重継承 privateは諦めましょう 親のメソッドを呼ぶ コンストラクタ instanceofに対応する ダックタイピングのススメ JavaScript標準のオブジェクト指向といえばnewやらprototypeやらを書く必要がありますが、これらは書くのが面倒臭い上に気をつけないといけない点がたくさんあります。Ja
Javascriptのスキルをもう一段上げたいです。
DOM はお分かりとのことですが、例えば下記の No.3-4 の内容は理解できますか。 http://chaichan.web.infoseek.co.jp/qa3000/qa3355 … 理解がおできなら、練習として CSS セレクタエンジンの作成をお勧めします。速度や実用性は考えなくて構いません。完成しなくても、別目的に転用できる部品がいろいろできるでしょう。 あるいは、UI に興味がおありなら下記をご一読下さい。 http://www.ibm.com/developerworks/jp/web/library … ただし、ここのコードは IE6/7、Fx 1.5、Safari 3 におけるメモリリークパターンなので使っては駄目です。考え方を取り入れつつ、もっと良い実装を書いて下さい。DOM Events に則った別のやり方があります。 もしも、もう少し覚えることがありそうだとお感じな
Titanium Mobileの暗黒ノウハウを公開します。 - このブログは証明できない。
WEB+DB PRESS Vol.61の特集は、Titaniumでした。実際にアプリを作りながらのチュートリアルになっています。正統派な入門記事です。 でも。期待してた内容ではありませんでした。私は、Titaniumの暗黒面が知りたいのです。いつものWEB+DB PRESSなら、そんな記事が多いのですが、さすがにまだ開発者が少なそうなTitaniumではアッサリ目に仕上げるしかないのでしょう。そこで、このどうでもいいブログで、Titaniumのバッドノウハウ、いや、暗黒ノウハウをメモっておきます。 アプリを1本開発しただけですので、そこまでTitaniumのことを解っているわけではありません。間違っているところなどがありましたら、指摘してもらえるとありがたいです。暗黒ノウハウをみんなで共有しましょう。あと、スシなどをおごってもらえると、もっとありがたいです。 前提。 Titaniumのバー
jQuery UI モーダルダイアログの仕組み - てっく煮ブログ
JavaScriptjQuery UI の Dialog 機能はダイアログをモーダル表示することができる。サンプルを見ると、背景がグレーアウトされて、手前のダイアログしか操作できないTab キーを動かしてもダイアログからフォーカスを移せないといった動作になっている。いままでいろんなライブラリの擬似モーダル実装を見てきたが、Tab キーを押したらこっそり裏側の部分にフォーカスを移せるものばかりだったので、Tab キーにちゃんと対処していたところに驚いた。どうやって実装してるんだろうと思って jquery.ui.dialog.js を見てみたら、次のように泥臭く実装していた。 // prevent tabbing out of modal dialogs if (options.modal) { uiDialog.bind('keypress.ui-dialog', function(even
jQuery内部のエラー処理について | バシャログ。
週末にソーシャル・ネットワークを観てきました。全編にわたって早口で物語が展開し、前提知識なしで観たので、途中まで起きていることがつかめませんでした。あらすじは調べてから行かれることをオススメします。個人的にところどころに挟んでくる技術トーク(Emacs使いなところや、講義シーンで出るコンピュータの歴史など)が本筋とは関係ない見所です。 今日もjQuery内部の話をちょっとします。最近、jQuery1.2.xを使っているWebページでjQueryのバージョンを最新にしたら動かなくなることがありました。 調査してみたところ、セレクタの記述が間違っていたが、動作していたこと、(憶測になりますが)1.3でセレクタエンジンSizzleが導入され、挙動が変化したこと、jQueryのエラー処理に変更があったことで不具合が起きてしまったようです。 1.4.1からのエラー処理 jQuery1.4.1から j
Javascriptでいい感じにプロトタイプを継承する - ひよこ3分07秒のはてなブログ
Javascriptでプロトタイプを継承するには function newClass(){ superClass.apply(this, arguments); } newClass.prototype = new superClass(); // superClassを継承 var newObject = new newClass(); console.log(newObject instanceof superClass); // true こんなコードを書けばいいわけだけど、 これだとsuperClassオブジェクトを作っているところがスマートじゃない。 newClass.prototype = superClass.prototype; // superClassを継承 これだと余計なオブジェクトはつくらないけど、 newClassのprototypeを拡張するとsuperClas
人や動物のシルエット
You came here for some really cool CSS text effects that will help you make amazing web typography for your websites. In order to successfully give a website a look that is more visually impressive, designers always concentrate on placing more emphasis upon typography that is both stylish and neat in nature. These same designers used to depend upon programs such as Photoshop to accomplish this; ho
[jQuery] live()が激しく便利な件について
最近jQueryを使って動的なページを作っており、頻繁にappend()やremove()を使ってページエレメントを追加・削除している。その時に面倒だったのが新たに追加したエレメントへのイベントのバインドだ。つまり、append()で追加したエレメントにイベントを毎度バインドするということをやっていた。 しかし、何かうまい方法があると思ってもう一度jQueryのドキュメントを見てみると、live()というチョー便利な関数が(version 1.3から追加されたみたいだ)。以下に簡単なサンプルを。 // class=messageをクリックすると自分自身が消えるようにする $('.message').live('click', function() { $(this).remove(); }); // id=addというボタンを押すと、class=messageというdivをページに追加 $
ウェブページのサイドバーに生じる空きスペースの活用方法
ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Courses and Tutorials in JavaScript | Envato Tuts+
