ブックマークしました ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください Twitterで共有
はじめに このエントリではJavaScriptでcookieのデータを読み書きする方法について書いています。jQueryを使わずにJavaScriptだけでcookieを操作することはできますが、jQueryを使うととても簡単に実装することができます。 このエントリを書くにあたり、以下のサイトを参考にしました。 jQueryとjquery.cookie.jsを使って開閉を保持するメニューを作ってみる|caraldo.net | WebとiPhoneとロードバイクが大好き! jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践posted with amazlet at 11.05.14西畑一馬 中村享介 徳田和規 インプレスジャパン 売り上げランキング: 18792 Amazon.co.jp で詳細を見る JavaScriptによるcookieの操作 JavaScriptだ
jQuery Mobile 1.4アルファ版が公開。DOMの削減による性能向上とSVGアイコン採用など バージョン1.1ではCSSを活用することで安定動作の充実を、バージョン1.2ではポップアップやフォームなど新しいコントロールを強化、前バージョンの1.3ではレスポンシブデザイン対応をしてきました。今回の1.4では、DOM操作を削減することによる性能向上、SVGアイコンの採用などが行われています。 1.4での主な変更点 現在のjQuery Mobileでは、元になるHTMLに対してjQuery Mobileが装飾や操作のために多数のDIVタグなどを実行時に自動的に追加しています。1.4ではこのDIVタグの追加などが抑えられるとのことです。ブログから引用します。 To improve performance we reduced DOM manipulation. Generation of
Rails3はSQLite3とPrototypeがデフォルトになっていますが、業務などで実際に扱う際はMySQLとjQueryを利用することが多いと思います。そこで個人的なアプリ作成手順が固まってきたので、一旦まとめてみます。調査/検証目的のアプリの想定で、テストの生成もしないようにしてます。 環境 Mac OS X Snow Leopard Ruby 1.9.2p0 (MacPorts) Rails 3.0.5 MySQL 5.5.8 (DMG Archive) アプリ作成 rails new sample -JT -d mysql -JオプションでPrototype生成スキップ -TオプションでTest::Unit生成スキップ -dオプションでデータベースMySQL指定 Gemfile、config/database.ymlがMySQL仕様になる gemはmysql2が利用される Ge
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] これで
Enter/Tab項目移動とFunctionKey制御 jqKeyプラグイン更新 - せかにゃ~ 以下の内容は古くなりましたので、上記記事を参照してください。 一つにまとめてみました。 以前作成したものは、一部間違ってるかも。こちらを参照してください。 機能 Enter、Tabでのフォーム移動 Functionキー制御・・・・・・Fキー押下時の関数登録可能です。 [BackSpace]キーでのページ遷移抑制 OPTION Enter true/false Tab true/false F1〜F12,ESC function(object,shiftKey,ctrlKey,altKey){} object キー押下時のオブジェクト shiftKey shiftKeyの状態:true/false trlKey ctrlKeyの状態:true/false altKey altkeyの状態:tru
Enterキーでフォームを送信したくない時は あるWebアプリケーションのフォームで、Enterキーを押してもSubmitされない様にする必要があって、ちょっと調べた。 リターン(Enterキー)でフォームを送信しない方法: 小粋空間 とりあえずこの記事の「4.押されたキーを判定して抑止する」の所に書いてある方法で対応出来た。 Enterキーで次のフィールドにフォーカスを移動するには 次に、どうせならEnterキーで次のフィールドにフォーカスを自動で移動させたいな~、という事になった。やってみたら、jQueryのおかげでこんな感じで割りと簡単に出来た。 Enterキーが押された時にfalseを返すのではなくて e.preventDefault() を使う様に変えた。その理由はこちらを参照。 Shift+Enterキーにも対応するには さらについでにShift+Enterキーでの逆順の移動に
Javascript ネタです。 ユーザーがテキストボックスに入力した文字を、そのままその画面上に表示するような処理を、Javascriptで作成する際に、エスケープする処理が必要な場合があります。 AJAX でサーバー側から取得した値を表示する場合もそうですね。 今回は、そんなときのエスケープする処理を jQuery を使ってプラグイン形式で紹介したいと思います。 そもそもなぜエスケープする必要があるのか? 知ってる人は知ってると思いますが、そもそもなぜエスケープする必要があるのか?というところから説明します。 PHPやPerlなどのプログラムを勉強された方はよく知ってると思いますが、ユーザーがテキストボックスに入力した文字をそのまま表示する場合、もしその中にHTMLタグが入っていたとします。 そうすると、(あたりまえですが)ブラウザはその文字をちゃんとしたHTMLタグだと認識してしまう
索引 └ プラグイン目次 1章:小ネタ系 ├ イージングの追加 ├ 要素のセンタリング ├ クッキーの操作 ├ マウスホイール ├ スクロールバー(1) ├ スクロールバー(2) ├ スクロールバー(3) ├ スクロールバー(おまけ) └ アニメの一時停止/再開 2章:ショーケース系 ├ Nivo Slider(1) ├ Nivo Slider(2) ├ Nivo Slider(3) └ Nivo Sliderの改造 3章:カルーセル系 ├ carouFredSel(1) ├ carouFredSel(2) ├ carouFredSel(3) ├ carouFredSel(4) ├ carouFredSel(5) ├ スマホでカルーセル(1) ├ スマホでカルーセル(2) ├ カルーセルとnivo(1) ├ カルーセルとnivo(2) ├ カルーセルとnivo(3) └ カルーセルとniv
<select id="selectbox"> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="4">D</option> <option value="5">E</option> </select> Cが選択されたとき $("#selectbox").val(); では3が返ってきます。 valueだけではなくて選択された要素Cを取得したい場合は $("#selectbox option:selected").text(); で'C'が返ってきます。
jQuery 2.0は、jQuery 1.xからのメジャーバージョンアップになりますが、APIの変更や大きな機能追加はありません。Internet Explorer 6/7/8のサポートを廃止することで、これらのサポートに必要だった細かなハックを一掃、いわゆるモダンブラウザにフォーカスしてコードを書き直すことにより、より小さく、速く、安定した動作を目指したものです。 jQuery 2.0はjQuery 1.9.1に比べて12%小さくなっています。 今後もjQuery 2.0では古くなった環境のサポートを廃止することで、より軽量で高速なライブラリを目指す予定で、次にサポート廃止予定なのはAndroid/WebKit 2.xのWebブラウザ。利用シェアの推移を見つつ、それほど遠くないうちに廃止される見通しだと説明されています。 jQuery 2.0の登場により、今後はInternet Expl
結構はまりました。 JSP側は、 <jsp:directive.page language="java" contentType="text/html; charset=UTF-8" /> という状態で、jQueryから $.ajax({...}) すると文字化け。 正確には、GETの場合は、IE、Firefox共に文字化けし、POSTの場合は、IEのみ文字化け。 Firebugで確認する限りでは、文字化けしていないみたい。 色々やってみると、$.ajax({...})のOptionで ,contentType: "application/x-www-form-urlencoded; charset=UTF-8" と指定することで文字化けが解消された。 指定しない場合は、charsetの指定はされないようなので、これを明示することで解決。 # 何故わざわざ指定する必要があるのかは、ちょっと
先日jQuery 1.6がリリースされましたが、案の定.attr()関連で議論になったようで、一週間後に後方互換を保つ更新が行われました。 jQuery: » jQuery 1.6.1 Released 1.6の更新内容は先日の記事をご覧頂ければ。 jQuery1.6の更新内容をまとめたよ。 | Ginpen.com 更新内容 jQuery 1.6では.prop()メソッドの追加と.attr()メソッドの変更があり、これが「属性」と「プロパティ」の差、及び関係性についての議論を引き起こしました。結果として、1.6.1では後方互換を保つよう修正される事になりました。 つまり1.5.2から(1.6を飛ばして)1.6.1へバージョンアップする際は、.attr()関連のコードは変更が不要です。 なお.date()の方は1.6のリリースノートの通りの動作のままである事に注意してください。 前回(1.
セレクトボタンで一度セレクトされたものを解除(selected)の状態に戻したい!な時の話。 下記例で、最初は「そないいわんでも」。 クリックして「ほんにまあ」をセレクト。 もう一度セレクトボタンを触らずに、別のボタンか何かでselectedの「そないいわんでも」に変更したい、みたいなことです。 <select> <option selected="selected">そないいわんでも</option> <option>ほんにまあ</option> </select> selectedIndexがセレクトされているoptionを数値で持っていて、、このselectIndexを 0(0からカウントされている値なので) にすれば戻る。 で、普通にぽわんと考えると $('select') .attr('selectedIndex', 0); とattr()でselectedIndexの値を「0」
改行抜けば1行になるよ? たった◯行のコードでひたすらアイドル水着画像をあつめる なんかそういうタイトルのエントリが(超局所的に)バズっているようなので調べてみた。 【PHP】たった10行のコードでひたすらアイドル水着画像をあつめる - utgym’s diary 【Ruby】たった3行のコードでひたすらアイドル水着画像をあつめる(Rubyだよ) - maeharinの日記 【Goutte】たった数行のコードでひたすらアイドル水着画像をあつめるのをGoutteで書いてみた - iakioの日記 【Python】たった 4 行のコードでひたすらアイドル水着画像をあつめる(Python だよ) - Memo 【Haskell】たった6行のコードでひたすらアイドル水着画像をあつめる(Haskell) 【Perl】ゆーすけべー日記 【PHP】外部ライブラリ不要で、たった一つのツイートに納まる長さの
すごい久しぶりの更新になってしまいました。 さて、jQueryには画像をスタイリッシュに表示するLightbox系のプラグインがたくさんありますね。そのプラグインを、画像へリンクしているa要素に適用させたいとします。いちいちclassやrelを振るのは面倒ですものね。 そんなとき、セレクタで指定するのと、filterで指定するの、パフォーマンス的にどっちがいいのかな、と思って試してみました、という軽い話です。 前提 次のようなhtmlで、画像へリンクしているa要素だけを取得したいとします。画像へのリンクかどうかは、a要素のhref属性の拡張子を見て判断します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <p><a href="sample01.jpg">sample01.jp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く