CSS3を使わずjQueryで、テキストボックスの初期値の文字をフォーカスした時に消えるようにするやり方（IEもいけるよ！）
jQuery 完成サンプルです 試しにクリックしたり、文字を入れてみてください。入力しようとすると、ちゃんと文字が消えて空っぽになります。 また、元々の文字は薄いグレーなのに、入力するときには濃い色の文字になってます。 何をどうしているのか まずはテキストボックスの初期値です。初めからテキストボックスに文字を入れておくには value を使います。 [html] <ul> <li><input type="text" value="ユーザー名" /></li> <li><input type="text" value="メールアドレス" /></li> </ul> [/html] そしてこのままだと、他の文字と同じように 濃い色の文字色のままです。とりあえずCSSでうすくしておきます。 [css] input[type="text"] { color: #ccc; } [/css] これで
jQuery を使ってHTMLタグをエスケープする
Javascript ネタです。 ユーザーがテキストボックスに入力した文字を、そのままその画面上に表示するような処理を、Javascriptで作成する際に、エスケープする処理が必要な場合があります。 AJAX でサーバー側から取得した値を表示する場合もそうですね。 今回は、そんなときのエスケープする処理を jQuery を使ってプラグイン形式で紹介したいと思います。 そもそもなぜエスケープする必要があるのか？ 知ってる人は知ってると思いますが、そもそもなぜエスケープする必要があるのか？というところから説明します。 PHPやPerlなどのプログラムを勉強された方はよく知ってると思いますが、ユーザーがテキストボックスに入力した文字をそのまま表示する場合、もしその中にHTMLタグが入っていたとします。 そうすると、（あたりまえですが）ブラウザはその文字をちゃんとしたHTMLタグだと認識してしまう
jQueryにおけるattr()とprop() - selectedIndexの場合 - - photosynthesis2
セレクトボタンで一度セレクトされたものを解除（selected）の状態に戻したい！な時の話。 下記例で、最初は「そないいわんでも」。 クリックして「ほんにまあ」をセレクト。 もう一度セレクトボタンを触らずに、別のボタンか何かでselectedの「そないいわんでも」に変更したい、みたいなことです。 <select> <option selected="selected">そないいわんでも</option> <option>ほんにまあ</option> </select> selectedIndexがセレクトされているoptionを数値で持っていて、、このselectIndexを 0（0からカウントされている値なので） にすれば戻る。 で、普通にぽわんと考えると $('select') .attr('selectedIndex', 0); とattr()でselectedIndexの値を「0」
jQueryを使って指定サイズに画像均等縮小みたいな〜 - w7工廠
テーブルの中に画像を表示させる際、幅か高さをぴったりあわせて均等縮小でおさめたいときに。 （追記：記事と別コード追加 2011-12-15） サンプルはこちら→W7工廠分室|トップページ サイズを変更できるようにしました。（変更の必要がない場合はinputとか不要です） HTML(head) <script src="jquery.js"></script> <script type="text/javascript" src="jq_imgSizeControl.js"></script> <script> $(function(){ $('input#tbutton').click(function(){ imgSizeControl($('input#twidth').val(),$('input#theight').val()); }); }); </script> HTML(bo
How to Slice Images into Tiles with jQuery and CSS3 Transitions
How to Slice Images into Tiles with jQuery and CSS3 Transitions Did you ever wonder how those cool slideshow plugins split images into pieces and put them back together? The slice and tile effect creates a beautiful look in a slideshow and has become quite popular. Follow this tutorial and it will give you a good understanding of the basic concept behind the slice and tile effect as we go into det
jQuery＆HTML5＆CSSでリッチな動画プレイヤー実装jQueryプラグイン「osm player」:phpspot開発日誌
jQuery＆HTML5＆CSSでリッチな動画プレイヤー実装jQueryプラグイン「osm player」 2010年07月06日- Plugins | jQuery Plugins jQuery＆HTML5＆CSSでリッチな動画プレイヤー実装jQueryプラグイン「osm player」。 次のようなリッチな動画プレイヤーがノンFlashで実装できるプレイヤーです。HTML5非対応ブラウザ用にFlashでフォールバックも可能。 Youtube、vimeoの埋め込みもOKです。 jQuery UI Theme-Roller を使ってテーマの変更も容易だそうです。 HTML5の動画プレイヤーは色々出てますが選択肢のひとつとして覚えておいてもよさそうですね。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能
Rails3とjQueryを使ってAjaxのloadingとかcompleteを表示する方法 - blog.takuyan.com
はじめに Railsが3になってしばらく経ちました。 数々の新機能や大幅な機能拡張があり、その中にはjavascriptに関する変更もありました。 いままでデフォルトでprototype.jsを基本としたJavascriptフレームワークを使用していたのを、Rails3からはシンプルに(jrailsを使うことなく)jQueryを使うことができるようになりました。*1 正確には、特定のjavascriptフレームワークに囚われない、ですかね。 それで、link_to_remote が link_to hoge_url, :remote => true に変更になったとかは割と文献があるんですが、次のステップで必ずぶち当たるであろう「じゃあloadingとかどうすんだよ」という文献があまり見当たらなかったので書いてみようと思います。 結論 rails.jsをちょっと改造する jquery.js
FIXED:jQuery歴3週間の俺がjQueryUIを使わずに<table>に対してtooltipを付けてみた - babydaemonsの日記
前の奴は幅が狭い列で表示が醜かったので、やっぱり書きなおし。orz ソースを晒しておく <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery tooltip TEST</title> <style type="text/css"> td { border-style: solid; border-width:1px; border-color: #000000; } .error { background-color: #eebbbb; } .normal { background-color: #eeffff; } span.tooltip { position: absolute; top: -10000px; left: -10000px; d
jQuery歴3週間の俺がjQueryUIを使わずに<table>に対してtooltipを付けてみた - babydaemonsの日記
とりあえず、ソースを晒しておく <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery tooltip TEST</title> <style type="text/css"> td { width: 12em; border-style: solid; border-width:1px; border-color: #000000; } div.cell { position:relative; height: 1.4em; } .error { background-color: #eebbbb; } .normal { background-color: #eeffff; } span.value { position: absolute; to
jQuery超初心者にありがちな6つの間違い - あじゃぱー
顔に見える？最近「送水口」が気になるという話 「送水口」が気になる今日この頃 最近街中で気になる存在、それがこの「送水口」です。地上のフロアが7階以上あるビルなど、一定の条件を満たした建築物には設置が義務付けられているもので、火事が発生したフロアにただちに水を送るために使われるものです。ポンプ車…
Windows7のような透過ウィンドウを実現するjQueryプラグイン – creamu
Windows7のようにウィンドウを透過させたい。 そんなときに使えそうなのが、『AeroWindow』。Windows7のような透過ウィンドウを実現するjQueryプラグインです。 divを透過させて、重なったときに後ろが透けて見せることができますね。ダブルクリックすると、びよーんと拡大したり、右下をドラッグするとリサイズすることができます。 デモは以下から。 オンラインデモ 動きが気持ちいいので、一度見てみてください。 AeroWindow gihyoさんでの連載が始まりました。最近のかっこいいUIについて考えたり、作り方を紹介したりしていくので、よろしければご覧ください。 第1回 使いやすいメニューはどう作る？ ?水平メニュー あと代官山で物件を見てきました。めちゃくちゃかっこいいんだけど、うーんもうちょい探そうかな。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き） 記事一覧 | gihyo.jp