Sortable - jQuery UI API 1.8.4 日本語リファレンス - StackTrace依存ファイル jquery.ui.core.js jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.sortable.js 引数 optionsオプション 関数 String: "destroy"、 "disable"、"enable"、"option"、"widget"、"serialize"、"toArray"、"refresh"、"refreshPositions"、"cancel" のいずれか。 値書式説明
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
バニラJavaScriptを選択する
jQueryを用いて書いたコードと同等な働きをするコードをjQuery抜きで書くとどのようになるのかを示したWebサイト「You Might Not Need jQuery」（jQueryは必要ないかも）が先日話題になりました（はてなブックマークも180以上付いています）。 ちょうどこのWebサイトを話題にした記事「Choosing Vanilla JavaScript」が、Webデザイナ向けに情報発信をしている著名なWebサイト、A List Apartに掲載されていました。 Vanilla JavaScriptとは、要するに何もトッピングされていないバニラアイスクリームのように、jQueryなどのライブラリを使わない素のJavaScriptのことを示しています。 この記事は何でもjQueryを使うのではなく、正しい選択をしようというテーマの内容になっており、参考になりそうだったので翻訳
単体1KB以下で動作する遅延ローダーライブラリ「Echo.js」:phpspot開発日誌
Echo.js, simple JavaScript image lazy loading 単体1KB以下で動作する遅延ローダーライブラリ「Echo.js」。 スクロールがいってはじめて画像を読み込むライブラリ。jQueryなどに依存せず、軽量。 空の画像をsrcに設定しておきつつdata-echoでソースを指定するだけです。 読込中の画像にはローディングアニメーションもついてます 関連エントリ LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」
【jQuery】入力フォームを追加するサンプル - すたら日記
jQueryの.clone()メソッドで、入力フォーム一式をまるごとコピーするようにしています。 その後、idの通し番号のみを書き換えています。 デモhttps://codepen.io/sutara79/pen/mjLyWr 応用 追加したフォームを削除したい場合は、下記の記事をご覧ください。 http://d.hatena.ne.jp/sutara_lumpur/20111113/1321169720 より汎用的なjQueryプラグインを作りました。 jquery.addInputArea.js
jQuery 2.0 Released | Official jQuery Blog
You asked for it, you got it: jQuery 2.0 has arrived! As promised, this version leaves behind the older Internet Explorer 6, 7, and 8 browsers. In return it is smaller, faster, and can be used in JavaScript environments where the code needed for old-IE compatibility often causes problems of its own. But don’t worry, the jQuery team still supports the 1.x branch which does run on IE 6/7/8. You can
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
[JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation
ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
[JS]テキストを揃えたり、文字間を調整したり、かっこいいアニメーションを適用したりするjQueryのプラグインのまとめ
テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連のjQueryのプラグインを紹介します。
Code | Drew Wilson.com
Comments are moderated. Need Help? Have a Feature Request? Use the Community Forums
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 LightboxLightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。グル
jQuery Mobile リファレンス的なもの - へっぽこプログラマーの日記
jQuery Mobile のリファレンス的なものを作りました。 取り敢えず叩き台で、ツッコミなどあればコメントください！ ※RC2版に対応しました Page 要素 属性 値 概要 div data-role page ページ 設定 値 既定 備考 data-fullscreen boolean false フルスクリーン表示（ヘッダーとフッターでdata-position="fixed"を指定する必要がある） data-add-back-btn boolean false 戻るボタンの自動生成 data-back-btn-text 任意 "Back" 自動生成された戻るボタンのテキスト data-keep-native 任意 ネイティブで利用するUIをセレクターで指定する data-dom-cache boolean false ページをキャッシュする data-theme 任意 c テ
[JS]テキストでも画像でもリストでもテーブルでも、長いコンテンツにスクロールバーを加えるスクリプト -Scrolite
デモページ：p要素 Scroliteの使い方 外部ファイル スクリプトとスクロールバー用のスタイルシートを外部ファイルとして記述します。 <script src="lib/jquery.min.js" type="text/javascript"></script> <script src="lib/jquery.scrolite.min.js" type="text/javascript"></script> <script src="lib/jquery.mousewheel.js" type="text/javascript"></script> <link rel="stylesheet" href="styles/jquery.scrolite.css"></link> HTML HTMLは基本的にはそのままです。 jQueryのセレクタで指定するために、classを加えると便利
格好いい！折り畳んだ紙を開くようなアクションを実現·Paperfold CSS MOONGIFT
Paperfold CSSは中間のメッセージを折り畳んで表示し、クリックで開く3Dアクションを施すJavaScriptライブラリです。 これはアイディアの勝利！Paperfold CSSを使うと折り畳んだメッセージを開いて表示したりする際に効果的に見せられるようになりそうです。 デフォルトの表示です。See 5 More Postsという表示があります。そこをクリックします。 徐々に開いていきます。 折り畳まれた部分が開いて表示されました。 デモ動画です。折りたたみの量などは自由に設定できます。しかも3Dであり、マウスで回転させたり見る向きを変更できたりします。 Paperfold CSSはGmailの多数のリプライが重なった時のメッセージ群を表示する際のやり方に近いです。面白い使い方が出来そうです。 Paperfold CSSはJavaScript製のオープンソース・ソフトウェア（Pub
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
Turn.js: The page flip effect in HTML5
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」:phpspot開発日誌
Modern Syntax