You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
これで使える！DIV.ONLOAD｜たかみんつ
DIV要素のonloadで処理ができるようにするスクリプトのご紹介。 普通、DIVのonloadって呼ばれないですよね。 呼ばれるような気がするんだけど、残念ながら呼ばれない。 でもね、ふと利用したいことがあるわけですよ。 ページ読み込み時に特定の要素を初期設定したい時などです。 一度しか使わないようなIDを設定して、ページ読み込み時に（ソース上で）遥か遠くのSCRIPTからゲットエレメントバイネームなどして要素を参照して・・・ なあーんてヤヤコシイことをするより、<div onload='this.したいこと云々();'で一発なのに・・・。 とはいえムリなのですから、自分でやります。 簡単に言ってしまえば、ページロード時にonload属性が設定されている要素を検索して呼び出せばよいのです。 jQueryなら簡単ですよ。 javascriptのソースファイル：[allonload.js]
こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。
[JS]スマフォ・タブレットでの利用を前提に作られたタブを実装するスクリプト -Tabby
Demo: 垂直型のタブ タブレットやデスクトップなどの広いスクリーンでは垂直型で右側にコンテンツが表示され、小さいスクリーンでは水平型に表示されます。 Tabbyの使い方 ステップは2つです。 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトとjQueryをbodyの下あたりに記述します。 <head> ... <link rel="stylesheet" href="tabby.css" type="text/css"> </head> <body> ... <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script src="tabby.js"></script> </body> Step 2: HTML HTMLはデモをベースに紹介します。 Demo: ベーシックタイプ
ドラッグアンドドロップで表示を自在に組み替えられるjQueryプラグイン·Gridster.js MOONGIFT
Gridster.jsは自由にレイアウトが組み替えられるUIを提供するjQueryプラグインです。 Pinterestに感化されたのか、ブロックの高さを組み替えつつ表示するUIが流行っています。今回紹介するGridster.jsはそれに似ていますが、横幅も変更可能で、さらに自分でドラッグアンドドロップして並びが変更できるのが特徴になっています。 ドラッグして場所を移動できます。 こんな感じに並んだりもします。 Gridster.jsはjQuery製のプラグインになっています。使う最小のカラム数、行数を指定できます。使える場所としてはiGoogle的なウィジェットを自分で並び替えて表示する類のUIであったり、写真を表示したりするのに良いかも知れません。 Gridster.jsはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTは
軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」:phpspot開発日誌
軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 2012年07月13日- Zebra_Datepicker, a lightweight datepicker jQuery plugin 軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 13KBでクロスブラウザ、CSSによるデザイン変更が容易で国際化対応もしていて日本語カレンダーへのカスタマイズも簡単。 日付の形式も自在に指定可能。YdM等とオプション指定するだけです。 こうしたライブラリは実装が簡単であると同時に、サイトのデザインにマッチするようにカスタマイズできるようになっていると本当に使い勝手がよいですね。 実装自体は便利だけどカスタマイズに数日かかったなんていうとちょっと困ります。 年だけの選択も出来ます 関連エントリ これは新し
[JS]プロダクトの一覧表示を1クリックで、リストとグリッドに切り替えるチュートリアル
ベーシックなHTMLとCSSで実装されたプロダクトページの表示をリストとグリッドに切り替えるjQueryのチュートリアルを紹介します。 Building a List/Grid View Switcher with jQuery [ad#ad-2] デモ 実装 デモ 表示の切り替えは、右上のアイコンをクリックで。 デフォルトはリスト表示で、プロダクトのサムネイル、リンク、購入ボタンがセットになっています。 デモページ：グリッド表示 実装 HTML HTMLはそれほど複雑ではありません。 まずは、右上の切替用のアイコンのHTMLです。 <span class="list-style-buttons"> <a href="#" id="gridview" class="switcher"><img src="images/grid-view.png" alt="Grid"></a> <a hr
jQueryに足りない機能を色々追加·jQuery++ MOONGIFT
jQuery++は標準のjQueryにはない機能を幾つも追加するプラグインです。 jQueryはとても優秀なJavaScriptライブラリです。プラグインも多数作られており、それを使えば様々なことができます。そうした多彩な機能をまとめて提供してくれるのがjQuery++です。 ブロックの大きさを自動計算します。ブラウザごとの誤差も吸収してくれるようです。 フォームの各項目を操作するのに便利なメソッドです。 選択している文字、場所を取得できます。 マウスの場所やその時のDOM要素が取得できます。 ドラッグアクションです。 ドロップアクションです。 リサイズです。 jQuery++ではこれ以外にもアニメーション、クッキー、キーボード入力でBackspaceやタブ、エンターキー、ファンクションキーの入力を判定したりできます。全てのライブラリを一括でインストールする必要はなく、必要な機能だけをピッ
たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」:phpspot開発日誌
Hammer.js たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」。 タップ、ダブルタップ、ホールド、ドラッグ、トランスフォームといった処理を一手に扱えるようになるライブラリです スマホだけでなく、かなりのブラウザにも対応 使い方は、まずHammerオブジェクトのインスタンスを初期化します。 あとはイベントハンドラを ontap といった形で記述していくだけなので、面倒な事は何一つ考えないでいいです 若干動きが良くない部分もあるみたいですが、今後に期待したいですね 関連エントリ スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」 スマホサイト作成のフレームワーク「iUI」が新しくなっている件 PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 ス
jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
アコーディオンとグローバルメニューを併せたコンテンツを実装出来るjQueryプラグイン・facets - かちびと.net
ユニークだったのでご紹介。グローバル メニューに連動してアコーディオンが 連動して開閉するコンテンツを実装する jQueryプラグイン。使いどころはあまり 無さそうですけど、もしかしたら、とい うことで・・ IE6や7でも動いてくれます・・・が、tableに置き換える事でなんとか実装してるようです。少しチカチカするので使いどころに悩みますが・・ グローバルメニューにマウスを乗せると、下部のアコーディオンが開閉します。なかなかインパクトありますねー。 下層メニューも作れる。 IETesterによるIE6のキャプチャです。 こういうのも出来るそうな。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js'></script> <script
iPhoneやiPadにも対応の、ページをめくるようなエフェクトを実装出来るjQueryプラグイン・FlipPage - かちびと.net
面白そうなアイデアが生まれそうな気がして なんとなくメモ。よくあるページめくりの エフェクトを実装するjQueryプラグインで、 iPadやiPhoneにも対応しているので個人的 にはむしろ、タッチデバイス向けに使いたい という気もしています。Android等でも使え るそうですよ。 フリック対応ならiPad用って考えてもいいかも、とか思いました。シンプルでマークアップもかなり楽です。 ちょっと分かりにくいですけどめくれてるんです。divで囲った要素ごとにめくるので画像だけでなく、テキストでも何でも出来るのが素敵。 実機でテストしましたが、確かにフリックでめくることが可能でした。が、ネイティブアプリのような軽快な動きは期待しないほうがいいですかね。スパイス的な役割として使いたいところです。それか、誰か改良して！ 一応マウスでも操作できるのでお試し下さい。Result押せばデモを確認出来ます
テーブルにソート、内容編集、行の削除等の機能を加えるjQueryプラグイン・TableGear - かちびと.net
なかなか多機能なライブラリだったので 備忘録。テーブルにソート、コンテンツの 編集や、Ajaxによる行の削除が可能な jQueryプラグイン・TableGearです。この 手のプラグインはいくつかありますが、 中でもかなり高機能な気がします。 jQueryだけでなくmootoolsも用意されてるみたいです。テーブル内でソートが可能で、セル内は編集できます。もちろん、編集後のソートもOK。行そのものを消す事も可能ですよ。 セル内は編集可能で、普段はこのように通常と変らないインターフェースを維持できます。マウスでクリックするとプルダウンや入力エリアが出現。 編集してもソート機能は維持 ソート機能が付いていますが、セル内に変更を加えても、変更後の内容でソートしてくれます。 行の削除も 行ごと削除する事も出来ます。 デモはPHPとMySQLを使って設計してるようですが、他のシステム上でも動作すると
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
WebデザインにjQueryを使いたい人向けの動画チュートリアルサイト・jQuery for Designers - かちびと.net
jQueryをWebデザインの為に使い たい、という方にお勧めのサイト・ jQuery for Designersのご紹介。 jQueryは様々なプラグインがあり ますが、ここはWebデザインに特化 しています。 jQuery for DesignersはデザイナーのためのjQuery情報サイトです。まだ数自体は少ないのですが、チュートリアルやデモを中心に情報を配信していますので今後の期待も込めてご紹介します。 Webデザイナー用のjQuery情報サイトです。右上に「Easy」、「Medium」、「Hard」とありますが、これは導入難易度を示しているようです。 チュートリアルは動画とテキストがあります。動画コンテンツ上部のdemo、View Codeでデモやコードのページに切り替えます。 例えば以下のような情報があります。 Automatic Infinite Carousel 自動でスラ
jQueryを使ったWYSIWYGなエディタ·elRTE MOONGIFT
elRTEはJavaScript製/jQueryプラグインなオープンソース・ソフトウェア。Webベースでコンテンツを作成したり、編集する際に取り得る手法は幾つかある。例えば一定の記法に沿って書くことでHTMLにコンバートして表示するもの。もう一つはWYSIWYGなエディタを用意してその場で編集するというものだ。 jQuery UIを使っている WYSIWYGエディタであればリテラシーが高くないユーザであっても、リッチなコンテンツの編集が可能になる。CKEditorをはじめとして幾つか有名なソフトウェアはあるが、ここで紹介したいのはelRTEになる。 elRTEはテキストエリアの上にツールバーを表示するタイプのWYSIWYGエディタで、jQuery UIを使って作られているのが特徴になる。jQueryを使っているので、カスタマイズが容易に行えそうなのが魅力だ。ベースのままでは提供されない機能
ブラインド式に画像が切り替わるjQueryプラグイン・jQuery Blinds - かちびと.net
IE6,7でも動いてくれるので 実用性あるかなと思ってメモ。 ブラインド式に画像が切り 替わってくれるjQueryの プラグイン、jQuery Blinds。 なかなかスムーズな動きです。 IE6でも7でもスムーズに切り替わってくれますよ。いろいろ凄いプラグインありますけど結局使うのはブラウザに対応してるプラグインになりますよね。。 外に広がるようにスムーズに切り替わってくれます。なかなかよさ気。デモ作った。画像に他意は無いです。 マークアップも簡単。 <div class="slideshow"> <ul> <li><img src="1.jpg" alt="1" /></li> <li><img src="2.jpg" alt="2" /></li> <li><img src="3.jpg" alt="3" /></li> <li><img src="4.jpg" alt="4" />
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
25 Amazing jQuery Date Picker Calendar Plugins
[JS]jQueryのプラグイン33+1選 -2011年1月