jquery.dgtable - 高パフォーマンスなテーブルライブラリ MOONGIFT
社内システムにおいて、検索結果の一覧表示はよくある機能です。100行程度のデータであれば問題ありませんが、10万行をHTMLで出力するとなれば表示方法を考えなければなりません。レンダリングだけで数分待たされていたら、担当者はストレスを感じることでしょう。 今回は大量のデータ表示を行う場合に使えるjquery.dgtableを紹介します。 jquery.dgtableの使い方 jquery.dgtableは特に表示やスクロールのパフォーマンスに重点を置いています。 複数カラムを指定したソートにも対応しています。 jquery.dgtableは100万行くらいの表示であれば難なくこなします。さらにソート、カラムの移動や幅の変更、マウスオーバーですべてのデータ表示といった機能があります。多機能ではありませんが、大量のデータを表示する際には導入検討したいライブラリです。 jquery.dgtabl
jQueryファイルの読み込み方法(CDNや直接ダウンロード)
jQueryを使うにはまずjQuery本体を読み込まないと始まりません。 ファイルを直接ダウンロードして読み込むことも出来ますが、GoogleなどにホストされているCDNを使って読み込む方法が主流となっています。 その他、読み込み時の注意点などもご紹介します。 CDNを使って読み込む jQueryは1.x2.x3.xのバージョンがあります。 それぞれの読み込み方法を以下でご紹介します。 Google Hosted Libraries https://developers.google.com/speed/libraries/#jquery jQueryのCDNといえばGoogleですね。 jQueryを利用する際はみなさんココから読み込んでるかと思います。 jQuery 1.x
jquery.colorbox.jsの使い方まとめ
色々な機能のライトボックスを実装できるjQueryプラグイン「jquery.colorbox.js」の使い方をメモ。 jquery.colorbox.jsは下記からダウンロードできます。 Colorbox – a jQuery lightbox HTML内に必要なファイルを読み込みます。 <link rel="stylesheet" href="colorbox.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.colorbox-min.js"></script> HTML 画像、埋め込みHTML、外部HTMLの3種類を試してみます。 <a href="../../img/01.jpg" class="lig
S EJ is under construction
Thank you for being patient. We are doing some work on the site and will be back shortly.
Highslide JS - JavaScript thumbnail viewer
What is Highslide JS? Highslide JS is an image, media and gallery viewer written in JavaScript. These are some of its advantages: Tip! Use the visual Highslide Editor to set up your Highslide installation without writing code. Quick and elegant looking. No plugins like Flash or Java required. Popup blockers are no problem. The content opens within the active browser window. Single click. After ope
MixItUp,suffle.js｜ソート、フィルタリングを行うjQueryプラグイン – wald-grun.biz
<!-- FILTER CONTROLS --> <div class="controls"> <h3>Filter Controls</h3> <ul> <li class="filter" data-filter="all">Show All</li> <li class="filter" data-filter="category_1">Category 1</li> <li class="filter" data-filter="category_2">Category 2</li> <li class="filter" data-filter="category_3">Category 3</li> <li class="filter" data-filter="category_3 category_1">Category 1 & 3</li> </ul> </div> <!-
HTMLをレスポンシブなグリッド上でソート、フィルタリングする「Shuffle.js」 - Tecuration .com
「Shuffle.js」はHTMLエレメントをレスポンシブが取り込まれたグリッド上でソート、フィルタリングを実現するjQueryプラグインです。 Shuffle.js 今作っていたWebサービスに取り入れたかったのでエントリー。異なるサイズのエレメントを含んでいてもグリッドレイアウトでソーティングしてくれます。またカテゴリによるフィルタリングも可能です。アニメーションもスムーズで良い感じ。 まずはこの状態から作成日付順にソートしてみます。 画像だけ見ても変わっているところしかわかりませんが、アニメーションがかっこいいです。 このようにフィルタリングも可能です。”Graphic Design”でフィルタリングしてみました。 それでは「Shuffle.js」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。 <script src="//cdnjs.cloudflar
fullPage.jsの使い方メモ - WEBサイト制作のElectric Fruits
2015.07.16 fullPage.jsはフル画面でコンテンツを表示して、少しスクロールするだけで、次のコンテンツまでスクロールさせるjQueryのプラグインです。 それの使い方メモ。 以下のURLからダウンロード出来ます。 http://alvarotrigo.com/fullPage/ 本家のドキュメントはこちら 本家ドキュメントの一部を日本語でわかりやすく説明します。 （特にたくさんあるオプションを中心に説明します。） ファイルの読み込み（Including files） 必要なファイル（JSやCSSファイル）を読み込ませます。 head部分でCSSファイルを読み込ませます。 <link rel="stylesheet" href="css/jquery.fullPage.css"> </body>直上にscriptファイルの読み込みを記述します。 <script src="ht
fullPage.jsで１つのコンテンツをスクロールして表示させたあとにJavaScriptを実行する
フルスクリーンでコンテンツを表示するWebページが増えましたね！ 私も制作に携わることがあり、「fullPage.js」というjQueryプラグインを利用しました:) 「fullPage.js」は、１つのコンテンツをフルスクリーン表示させて、スクロールすることで１ページ分が自動でスクロールし、次のコンテンツが表示されるページを簡単に作ることができます。 わかりにくいかもしれないので、デモをご確認ください。 このfullPage.jsを使い、スクロールしてコンテンツが表示されたらJavaScriptを実行させたい！と思い、色々と調べました。 コンテンツが表示されてからアニメーションなどが動作するとカッコイイですよね！ （onLeaveというオプションを使えば可能であることがわかりました） せっかくなので、基本の使い方や他のオプションなど調べたことをまとめます。 fullPage.jsの使い方
世界の天気情報を一発で取得できるjQueryプラグイン「simpleWeather.js」を使ってみた！ : うえぶはっく
世界中の「天気」に関連する情報を、まとめて取得できるjQueryプラグイン「simpleWeather.js」が公開されているのでご紹介しようと思います！ 地名や位置情報・WOEIDなどの情報から、目的の地域に関連する「天気」「温湿度」「風速」「フォーキャスト」…など、さまざまな情報が簡単に取得出来るようになるので、自分のWebサービスやアプリなどにも組み込みやすいでしょう。 使い方！ 利用方法はシンプルで、「jQuery」と「simpleWeather」のJSファイルを読み込むだけで準備完了です！ そこで、まずは公式サイトから「jquery.simpleWeather.min.js」ファイルを入手しましょう。 ※非圧縮版は「jquery.simpleWeather.js」になります。 また、ダウンロードが難しい場合は、CDN経由からも利用できます。 https://cdnjs.cloud
jQuery DrawSVG
FEATURES This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties. Weights less than 2KB minified and 800 bytes gzipped. Easy to use. Easing and stagger support. Free! Tweet USAGE Include jQuery DrawSVG after jQuery <script src="http://code.jquery.com/jquery-latest.min.j
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
ラジオボタンをスイッチデザインに変換するjQueryプラグイン
味気ないラジオボタンをスイッチデザインに変換してくれるjQueryプラグインです。 それ以上でもそれ以下でも無いのですが・・・。 jQueryプラグインを読み込むだけですぐに変換 jQueryプラグインを読みこめば、ラジオボタンが以下のようになります。 サンプルデモは以下に http://ahmad-sa3d.github.io/rcswitcher/ ダウンロードは以下からできます。index.html ファイルのソースを見れば、特に設定などの仕様を読まなくても直ぐにわかるかと思います。 ahmad-sa3d/rcswitcher · GitHub もう少しデザインにこだわりたい人 ボタンを手軽に変換出来るjQueryプラグインは他にも結構ありますが、こちらもオススメです。 fronteed/icheck · GitHub 是非お試しあれ。 それでは、また。
クールな画像拡大jQueryライブラリ「lity.js」、レスポンシブにも対応！ | SHINGO IRIE
クリックで画像が拡大されるライブラリはlightboxなど数多くありますが、その中でもデザインの邪魔をせず、実装もかんたんなライブラリ、それがlity.jsです。 使い方公式サイトから一式ダウンロード。 ダウンロードしたファイルの中で使うのはdistフォルダ内のlity.js、lity.cssのみ。 jQueryの後に読み込ませます。 <link href="lity.css" rel="stylesheet"> <script src="jquery.js"></script> <script src="lity.js"></script> あとは、 <a href="http://image.jpg" data-lity>Image</a> のようにdata-lity属性をつけるだけで動きます。かんたんですね。下がlity.jsの表示サンプルです。 WordPressへの組み込みWor
jQueryを使った要素の回転を手軽に実装出来るおすすめプラグイン8選 | WebChokoTips – ウェブチョコチップス
先日色々と調べてみていいなーと思った回転系のプラグインを紹介していきたいと思います。 ユニークな演出を手軽に実装することができるので、とてもオススメのプラグインです。基本的に無料のものばかりなので気軽に使って見てください！ jQueryRotate.js DEMO 要素を回転させるためのプラグイン。 回転させたい要素にたいして、$(selector).rotate( 45 ); の様に使えます。 試しに動かしてみたらIE8以下では動作しないようでした。 rotate.js DEMO こちらもjQuereyRotate.jsと同じく要素を回転するプラグインです。 こちらはIE8、IE7でも正しく動作しました！ 指定方法もcss()を使った書き方が出来るので、扱い易いかと思います。
SVGアニメを手軽に作れるLazy Line Painter｜こうめの“これから使える”jQueryプラグイン
「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
jQueryプラグイン「ScroolMagic」2系でよく使う機能を紹介します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、づやです。 前回ScrollMagic2系について下記の記事を書きましたが、基本的な使い方しか書けなかったので、今回はよく使う機能について書きたいと思います。 個人的にTweenMaxをよく使うので、animation.gsap.jsを読み込んでる状態での記事となります。 setClassToggle スクロールの位置によってクラスを付けかえたいときは非常によくあるかと思います。そんなときは、スクロールに応じてクラスを付けたり外したりしてくれるsetClassToggleの出番。 <ul> <li id="list1"><a href="#block1">1番目</a></li> <li id="list2"><a href="#block2">2番目</a></li> <li id="list3"><a href="#block3">3番目</a></li> </ul> <s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高さを揃えるjQueryプラグイン「jQuery-fixHeightSimple」をレスポンシブ対応しました ｜ スターフィールド株式会社
coolwebwindow.com