当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
[JS]jQueryのプラグイン33+1選 -2010年9・10月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
[JS]jQueryのプラグイン33+1選 -2010年3・4月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 YoxView 画像をスタイリッシュに拡大表示するスライドショー。 Roundabout Shapes 複数のオブジェクトをさまざま
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
[JS]jQueryのプラグイン33 1選 -2011年6月 | コリス
galleryFocus フォーカスした周辺をアニメーションでフェードさせ、中心をくっきり見せるギャラリー。 [ad#ad-2]
[JS]jQueryのプラグイン33+1選 -2010年11・12月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
[JS]レスポンシブ対応でパンくずの一行が長くて困ったを解決するスクリプト -rCrumbs
多階層をもったサイトでは、パンくずも長くなりがちです。 テキストベースで実装した長い一行のパンくずを表示幅に合わせて最適化するjQueryのプラグインを紹介します。 jQuery rCrumbs -GitHub rCrumbsのデモ rCrumbsの使い方 rCrumbsのデモ 一行で長いパンくずは表示幅を変更すると、最適化されて表示されます。 主要なモダンブラウザをはじめ、IE8+でご覧ください。 デモページ：幅1200, 780, 480pxで表示 幅1200pxで表示 先頭のHomeから、長いページタイトルまで全部が表示 幅780pxで表示 先頭のHome側からはみ出るアイテムを省略 幅480pxで表示 長いページタイトルもはみ出る場合は省略 ※省力無しの固定表示することもできます。 rCrumbsの使い方 実装は簡単で、パンくずはリスト要素で実装されています。 Step 1: 外部
実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
[JS]操作感が楽しい！左右にドラッグ・フリックしてコンテンツを表示するスクリプト -Snap.js
表示されているページを左右にドラッグ（フリック）して、アニメーションで左右にコンテンツをスライド表示するデスクトップにもスマフォにも対応したスクリプトを紹介します。 jQueryなどの他のライブラリには依存しません。 Snap.js -GitHub Snap.jsの特徴 Snap.jsのデモ Snap.jsの使い方 Snap.jsの特徴 jQueryなどの他のライブラリへの依存は無し CSS3を使った強力なアニメーション スライドは右・左に対応 ドラッグ操作のサポート ドラッグ操作禁止要素も定義可能 スマフォのフリック操作のサポート フックイベントのサポート イベントの有効・無効の設定 カスタマイズが簡単 対応ブラウザ IE10を含む全てのモダンブラウザに対応しています。 IE7/8/9はCSS3での一部の機能が制限されます。 Firefox 10+ Chrome, SafariなどのWe
zepto.js — the aerogel-weight mobile javascript framework
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. The goal is to have a ~5-10k modular library that downloads and executes fast, with a familiar and versatile API, so you can concentrate on getting
[JS]jQueryのプラグイン33+1選 -2011年4月
Slider Kit スライドショー、コンテンツスライダー、タブコンテンツ、カルーセルなどさまざまなスライドコンテンツに対応。
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はリスト要素など、並列に配置しま
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
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
[JS]jQueryのプラグイン33+1選 -2012年2・3月
Camera 表示サイズに合わせて最適なレイアウトを提供するResponsive Design対応のスライドショー。
BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」:phpspot開発日誌
BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 2013年04月05日- Bootstrap Form Helpers BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」。 国、通貨、日付、時間、電話番号、フォント等を入力する際に便利そうなインプットのヘルパーライブラリのご紹介。 次のように、多数のフォーム入力ウィジェットが追加で利用できます。 フォントは見たままで表示されて、selectから選べるので便利そう。 UIデザインもいい感じ。 関連エントリ Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapのテーマで良い感じに動くオート
[JS]レイヤーに要素を配置し、分離して3Dにぐるぐる回転させるスクリプト -CSSMatrix
jQueryのプラグイン「CSSMatrix」を使って、不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転して表示するデモを紹介します。
[JS]自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator
かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。 Sonic Creatorの前に、まずはSonicのデモから。 Sonic Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量（約3K）のスクリプトで、実装方法などは下記をご覧ください。 かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic 今回紹介するのは、このSonicをコードベースでオンラインで簡単に設計でき、それをアニメーションGIFやCSSスプライト用のPNG画像を生成するオンラインツールです。
プレゼン用のスライドショーを実装する、わずか1KBなのに多彩なエフェクトを備えタッチデバイスにも対応したスクリプト -Bespoke.js
コンカーブ 凹状に配置したパネルをスライドします。 Bespoke.jsの使い方 スライドショーの実装は簡単で、3ステップです。 Step 1: HTMLと外部ファイル スタイルシートとスクリプトを外部ファイルとして記述し、各パネルはsection要素で実装し、articleで包みます。 スタイルシートはテーマごとに変更します。 <link rel="stylesheet" href="path/to/my/theme.css"> <article> <section>Slide 1</section> <section>Slide 2</section> <section>Slide 3</section> </article> <script src="bespoke.min.js"></script> <script src="path/to/my/script.js"></scri
[JS]jQueryのプラグイン33+1選 -2011年2・3月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
Rails で、Controller に定義されている action を一度に取得する方法はありますか？ - QA@IT
平素よりQA＠ITをご利用いただき、誠にありがとうございます。 QA＠ITは「質問や回答を『共有』し『編集』していくことでベストなQAを蓄積できる、ITエンジニアのための問題解決コミュニティー」として約7年間運営をしてきました。これまでサービスを続けることができたのは、QA＠ITのコンセプトに共感をいただき、適切な質問や回答をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。 しかしながら、エンジニアの情報入手方法の多様化やQAサービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年2月28日（金）15:00をもちましてQA＠ITのサービスを終了することにしました。 これまでご利用をいただきました皆さまには残念なお知らせとなり、誠に心苦しく思っております。何とぞ、ご理解をいただけますと幸いです。 QA＠ITの7年間で皆さまの知識
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
