[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory
デモページ：Custom Easings イージングのエフェクトをカスタマイズしたデモ。 Ioryの使い方 Step 1: HTML HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。 <div class="slider js_simple simple"> <div class="frame js_frame"> <ul class="slides js_slides"> <li class="js_slide">1</li> <li class="js_slide">2</li> <li class="js_slide">3</li> <li class="js_slide">4</li> <li class="js_slide">5</li> <li class="js_slide">6</li> </ul> </div> </div> Step 2: CSS
![[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory](https://cdn-ak-scissors.b.st-hatena.com/image/square/f1cb6498582cf16c5feffd074f068f12f4d958a9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040901.png)
[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex
![[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/87c79333735eb75d10033e33d194426b66f5def3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031609.png)
フォームでユーザーにヘルプをツールチップで実装するjQueryプラグイン・jQuery FormHelp - かちびと.net
割と需要ありそうなので備忘録ついでにご紹介。ツールチップで実装する、テキストのフォームヘルパーです。「こういう具合に入力してね」みたいなのを明示するやつ。 フォームのそれぞれの項目にヘルプを作るスクリプトです。マウスホバーやフォーカスでツールチップを出す、というもの。プラグインで実装するほどのものでも無いかもですけど、これはこれで楽そう。 動作サンプルです。HTMLを普通にマークアップするだけで自由にツールチップ内に実装できるのは楽ですね。 コード 本体とプラグインを読み込みます。 $.formHelp(); コールします。 <input id="input-email" type="email"/> <span class="helptext" data-for="#input-email"> <p>ここにツールチップ</p> <hr> HTMLが自由に使えます <ul> <li>One
【pickadate.js】シンプルだけど高機能な日付カレンダー編 | DevelopersIO
pickadate.jsというライブラリーの中で、高機能な日付カレンダーを紹介してもらったので試してみました。 アジェンダ ソースのダウンロード 実装してみる。 日本語表記にする いろいろなオプション まとめ ソースのダウンロード まずはこちらのサイトからソースをダウンロードしてきます。ファイルを展開するといろいろファイルはありますが実際に使うファイルは[lib]フォルダ内にあります。 [lib]フォルダ内は以下のファイルになります、今回は日付カレンダー用のjs、cssを使用してみます。 実装してみる それでは実際に表示してみようと思います。今回のデモで使用したファイルになります。 css default.css default.date.css javascript jquery picker.date.js legacy.js app.js←こちらが実際に実行するファイルです。 ind
jQuery：よく使用される機能をまとめて実装できるプラグイン - NxWorld
スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるjQueryプラグインのまとめです。 予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。 紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりもします。 yuga.js web制作を優雅にするために作られたjQueryプラグインで、7種類の機能が実装されています。 ライセンスはMIT Licenseで、ライセンスに従う限り許可なく自由に使用できるそうです。 機能 ロールオーバー 現在のページをハイライト表示 外部リンクを別ウインドウで開く 画像をthickboxで表示（thickbox.jsを使用） スムーススクロール タブ機能 CSS3の擬似クラスをクラ
[JS]レスポンシブ対応でパンくずの一行が長くて困ったを解決するスクリプト -rCrumbs
多階層をもったサイトでは、パンくずも長くなりがちです。 テキストベースで実装した長い一行のパンくずを表示幅に合わせて最適化するjQueryのプラグインを紹介します。 jQuery rCrumbs -GitHub rCrumbsのデモ rCrumbsの使い方 rCrumbsのデモ 一行で長いパンくずは表示幅を変更すると、最適化されて表示されます。 主要なモダンブラウザをはじめ、IE8+でご覧ください。 デモページ：幅1200, 780, 480pxで表示 幅1200pxで表示 先頭のHomeから、長いページタイトルまで全部が表示 幅780pxで表示 先頭のHome側からはみ出るアイテムを省略 幅480pxで表示 長いページタイトルもはみ出る場合は省略 ※省力無しの固定表示することもできます。 rCrumbsの使い方 実装は簡単で、パンくずはリスト要素で実装されています。 Step 1: 外部
JavaScript でペンと筆圧を扱う : document
4月11 JavaScript でペンと筆圧を扱う はじめに JavaScript でアプリケーションを作っていると、筆圧を取得したくなることがよくあると思います。 ここでは JavaScript でタッチやペンによる筆圧の取得の仕方について簡単にまとめます。 Wacom ペンタブレットによる筆圧の取得 Wacom のペンタブレットではブラウザにプラグインをインストールすることにより筆圧の取得が可能になります。 最近はタブレットの最新版ドライバをインストールすると一緒にプラグインもインストールされるようです。 タブレットプラグインのバージョンによる API 変更 Wacom のタブレットプラグインでは元々ペンを扱う単体のものでしたが、バージョン 2 からはタッチと統合されたため API が変更されました。 基本的には統合であるため、プラグインのオブジェクトに .penAPI を付けるか付け
JavaScript書くときに便利なVimプラギン集 - Life goes on
この記事はVim Advent Calendar 2012の52日目の記事です。 前回の記事はasion_mさんのフロントエンジニアがちょっと幸せになるかもしれないプラグイン作ってます。でした。 良い具合に、フロントエンドのお話続きになっており「流れがキタ！」などと浮かれていたところ、はてなブログが0時から8時まで長時間のメンテに入っており泣きたい気分で一杯になっています。 気を取り直して、エントリを書いていきたいと思います。 さて、自分は一応JavaScriptを書くことで(または書かない事で)オマンマを食べさせていただいてる訳ですが、そういえばあんまりJavaScript書く環境についてブログに書いてないなーと思い、自分が使ってるJavaScript関連のプラギンと設定なんかを紹介していこうと思います。 もちろん、「これは常識でしょpgr」などというものが多数含まれていることは予想され
レガシーブラウザを切り捨てたjQuery 2.0、どれくらい小さくなった？
jQuery 1.9が正式リリースされましたね！ で、同時にjQuery 2.0 β版がリリースされました。 この二つのバージョンの違いは、サポートブラウザの違いです。 jQuery 2.0は後方互換性を切り捨てて、IE6-8では動作しなくなった代わりに、内部のリファクタリングやファイルサイズの縮小を狙っています。 デスクトップブラウザ以外を対象としている場合、2.0は非常に魅力的な選択肢となることでしょう。 そこで気になるのが、「jQuery 2.0はどれくらい小さくなったのか？」という事です。 ただし、jQuery 2.0はまだまだ開発途上で、リファクタリングやサイズ縮小の余地はまだまだあるとのこと。 なので、jQuery 2.0の新しいリリースが出るたび、結果は更新して行きたいと思います。 jQuery 1.9, 2.0, zepto.js,そしてjqMobiを比較してみる
最近リリースされたjQueryプラグイン40「40 Recently Released jQuery Plugins」
軽量で利用しやすく、実務ベースでも多用されるjQuery。今日紹介するのは、最近リリースされたjQueryプラグインを集めた「40 Recently Released jQuery Plugins」です。 Zoomooz.js 機能を問わず、最新のjQueryプラグインがまとめられています。全部で40個のプラグインが集められていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下から Wookmark レスポンシブなグリッドレイアウトを実現するためのjQueryプラグイン。 PageSlide 画面外から、ページパネルを出現させるjQueryプラグイン。 turn.js ページめくりを実現させるjQuery。アナログ感のある表現が可能です。 上記の他にも、沢山のjQueryプラグインがまとめられています。jQueryを利用して何か表現しよう、実現させようと思
jQuery Plugins
This site is a static archive of the old jQuery Plugin Registry. New plugin releases will not be processed. The jQuery Plugin Registry is preserved for historical purposes. Search is still supported. We do not recommend using any versions of plugins from this registry. Please find jQuery plugins on npm.
Webアプリのための標準プラグイン「WTP」
Eclipseでサーバサイドプログラムを作成する場合、これまではSysdeo Tomcat PluginやObjectLearn Lomboz、EclipseHTMLEditorといったサードパーティが提供するプラグインを導入するのが普通でした。これらのプラグインでは、JSPの編集やWebサービスの作成、EJBの作成、HTMLやXMLの編集といった目的に応じて適切なプラグインを探し出し組み合わせて使う必要があり、なかなか決め手となる環境を作ることはできませんでした。 Eclipse Web Tools Project（WTP）は、eclipse.org自体が上記の問いに対する回答を提供するプロジェクトです。WTPには、Javaのサーバサイドアプリケーションを開発する場面で必要となりそうなプラグインがラインアップされているので、サーバサイドプログラミングの第1ステップにはなくてはならないもの
Eclipse Helios への WTP インストール方法 - Masudaq Blog
前回の記事では、 Eclipse Helios のインストール方法を紹介した。 今回は、Eclipse Helios に "WTP(The Eclipse Web Tools Platform)" を手動でインストールする方法を紹介する。 以下の手順は、"Eclipse Classic 3.6.0" が既にインストールされていることを前提条件とする。 ("Eclipse IDE for Java EE Developers" をインストールしている場合は、WTP は同パッケージに含まれているため追加でインストールする必要はない。一般的には、"Eclipse IDE for Java EE Developers" を利用することが推奨されている。) The Eclipse Web Tools Platform(Released Build: R-3.2.0-20100615235519) に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
