タグ

jQueryに関するhalohalolinのブックマーク (22)

  • DataTables | Javascript table library

    Add advanced interaction controls to your HTML tables the free & easy way

    halohalolin
    halohalolin 2016/04/08
    jQueryを用いたtableタグを整えて表示するライブラリの一つ、並び替え・ページ切り替え・ajax・Bootstrap対応、MITライセンスで商用利用可
  • SnackbarJS by FezVrasta

    Create snackbars and toasts with ease. SnackbarJS is a lightweight and jQuery powered plugin made to work in Bootstrap style, just like the Bootstrap tooltips work. Using it is as easy as writing: <span data-toggle=snackbar data-content="This is my awesome snackbar!">Click me</span> Options There are some options to customize SnackbarJS look and beahvior: var options = { content: "Some text", // t

    halohalolin
    halohalolin 2014/12/24
    Androidの通知(Toast・トースト)っぽいものをブラウザで実装できるライブラリの一つ
  • [jQuery] JSON文字列をパース(構文解析)する

    前の記事のおまけ。 JSON文字列を、ちょー簡単にパース(構文解析)して利用する方法。 Ajaxを使ってCGIを呼び出してJSON文字列を受け取り、それをパースして利用する。 jQuery1.4以降が必要。 // JSON取得関数(単に「JSONおくれ!」って言う関数なので、何でもええです。) function get_JSON(where_string) { // JSON生成CGI(別にCGIに限らすJSONを吐き出す相手) var cgi = "http://host/cgi/create_JSON.pl"; var qs = "?WHERE_STRING=" + where_string; // JSON取得 var JSON = $.ajax({ type: "POST" , url: cgi + qs , dataType: "json" , async: false }).r

    halohalolin
    halohalolin 2014/01/20
    jQueryにおけるJSON文字列を取得して構文解析して配列に格納するには、<格納先変数> = $.parseJSON($.ajax({type:"<GET/POST>",url:"<URL>",dataType:"json",async:false}).responseText);
  • レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」:phpspot開発日誌

    Galereya. jQuery gallery. レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 PCでもスマホでも使えるPinterest風ギャラリーが作れるjQueryプラグイン。サンプルの画像は若干気持ちが悪いですが、使う分には問題ないですね。 カテゴリ分けしてフィルタリングも可能っぽい。 関連エントリ CSSで設定ができるPinterest風レイアウト実装ライブラリ「Salvattore」 ドラッグ&ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」 ダイナミックなタイル状レイアウトを実現できるjQueryプラグイン「Freewall」

    halohalolin
    halohalolin 2013/12/05
    各写真の縦横比を変えずに一覧で並べるプラグイン
  • 面白い!自分のサイトに高度な画像編集機能を提供する·jquery.deviantartmuro MOONGIFT

    jquery.deviantartmuroはWeb画像編集サービスのdeviantART muroを埋め込みサービスとして呼び出すjQueryプラグインです。 Webブラウザ上でできることは多岐に渡る訳ですが、ペイントですらWebベースで行う時代になっています。その高機能ペイントサービスとして知られるdeviantART muroを自分のWebサイトに埋め込んで使えるのがjquery.deviantartmuroです。 この画像を自由に編集できます。 もはや普通のペイントアプリです。 レイヤーにも対応。 エクスポートできます。 拡大も可能。 囲い込みでの範囲指定も。これがWebアプリケーションとはすごい時代になったものです。 jquery.deviantartmuroはペイントソフトウェアとしての機能を提供する訳ではなく、あくまでもdeviantART muroの機能を埋め込みで提供してい

    面白い!自分のサイトに高度な画像編集機能を提供する·jquery.deviantartmuro MOONGIFT
    halohalolin
    halohalolin 2013/05/15
    機能としては興味深い。1.高機能&英語なので初心者向けアプリケーションには不適? 2.自分のサイトへアップロード方法はあるのか? 3.このキャンバスへ画像を呼び出す方法はあるのか? が気になる。
  • Colorbox Examples

    Colorbox Demonstration Elastic Transition Grouped Photo 1 Grouped Photo 2 Grouped Photo 3 Fade Transition Grouped Photo 1 Grouped Photo 2 Grouped Photo 3 No Transition + fixed width and height (75% of screen size) Grouped Photo 1 Grouped Photo 2 Grouped Photo 3 Slideshow Grouped Photo 1 Grouped Photo 2 Grouped Photo 3 Other Content Types Outside HTML (Ajax) Flash / Video (Iframe/Direct Link To You

    halohalolin
    halohalolin 2013/01/14
    LightBox系のjQueryプラグインの一つ、写真や絵の紹介に用いることができる、閉じるボタンは右下、一行コメントが付けられる
  • fancyBox

    Fancybox #Fancybox is the ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. Supports images, videos, maps, inline content, iframes and any other HTML content. This is the fifth generation of Fancybox. Both Carousel and Panzoom components are used under the hood and that's what makes this project so unique. In addition, Fancybox is ea

    halohalolin
    halohalolin 2013/01/14
    LightBox系のjQueryプラグインの一つ、写真や絵の紹介に用いることができる、閉じるボタンは右上、ライセンスに注意(Creative Commons Attribution-NonCommercial 3.0→非営利のみ)
  • なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!! | ゴリミー

    今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」! 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読!5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する!これは当にすごい!! まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ

    なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!! | ゴリミー
    halohalolin
    halohalolin 2012/10/15
    jQuery Masonryがレスポンシブ・ウェブデザインに対するNHKスタジオパークの解らしい
  • Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」:phpspot開発日誌

    FullCalendar - Full-sized Calendar jQuery Plugin Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」 カレンダー実装のスクリプトは色々とありますが、UIが綺麗に作られているカレンダー実装jQueryプラグインの1つとしてご紹介 ドキュメントが充実しておりカスタマイズ制が高いものとなっています 関連エントリ Google Calendar風に使えるカレンダー実装jQueryプラグイン「jquery-frontier-calendar」 これで自前でGoogleカレンダーを持てる!jQuery&PHPで実現されたプログラム

    halohalolin
    halohalolin 2012/10/05
    『Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」/カレンダー実装のスクリプトは色々とありますが、UIが綺麗に作られているカレンダー実装jQueryプラグインの1つとしてご紹介』
  • jqueryrotate - Project Hosting on Google Code

    Code Archive Skip to content Google About Google Privacy Terms

    halohalolin
    halohalolin 2012/09/24
    画像回転プラグイン、$("#" + markers.markers[0].icon.imageDiv.id + "_innerImage").rotate(45);で、OpenLayersと組み合わせて動かすことが可能。なんかぼやけている気がするがIE8にも対応
  • Loading...

    halohalolin
    halohalolin 2012/08/01
    jQueryのカンニングシートとして役立ちそうなAPI辞書webアプリ
  • テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」:phpspot開発日誌

    テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。 ソート可能にしたり、ストライプなデザインにしたりといったカスタマイズも可能。 実装できるデザイン例。Twitter Bootstrap と組み合わせたテーマ2種類とその他2種類のテーマがデモとして表示されています 意外と手間取るテーブルデザインですが、こうしたものを参考に美しくデザインしたいものですね 関連エントリ CSS3でクールな角丸テーブルを作る例 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイ

    halohalolin
    halohalolin 2012/05/09
    $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。ソート機能はなさそう
  • 【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 | マイナビニュース

    Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している

    halohalolin
    halohalolin 2011/11/16
    表内でカーソル操作は出来なさそうだが、Tableタグベースの表に設定できるので導入が容易そう
  • FitText - A plugin for inflating web type

    A jQuery plugin for inflating web type Download on Github FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. Oh, and don't you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!

    halohalolin
    halohalolin 2011/05/14
    スマートフォンからPCまで、画面幅に合わせてフォントサイズを自動調節してくれるjQuery Pluginらしい。
  • スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

    ※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。(ムービーはiOSシミュレータによるデモです)iPhoneAndroidでご覧の方はデモに直接アクセスしてください(ムービーは再生されません)。 【デモを見る(iPhoneAndroidで見てください)】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置(position:absolute)を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。

    halohalolin
    halohalolin 2011/05/01
    ・スマートフォン用横スライド・自動的に5秒ごとにスライド・スワイプによるスライド・フリックによるスライド・横向き時に自動的にサイズ補正・センター寄せレイアウト・ページング的UIの自動生成・「前へ」「次へ」
  • [JS]jQueryのプラグイン100選 -2010年総集編

    2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 ツールチップ関連 レイアウト関連 背景画像関連 その他UI関連 アニメーション関連 スクロール・ドラッグなど操作関連 テーブル・リスト・データ関連 フォーム関連 コンテンツ生成 その他 コンテンツスライダー・カルーセル関連

    halohalolin
    halohalolin 2010/12/21
    コンテンツスライダー・カルーセル関連/ギャラリー・画像拡大関連/ナビゲーション関連/タブ関連/パネル・ボックス関連/ツールチップ関連/レイアウト関連/背景画像関連/その他UI関連/アニメーション関連/スクロール…
  • jQuery Mobile

    jQuery Mobile is no longer supported To read more about the status of the jQuery Mobile project, see the announcement blog post. A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Seriously cross-platform with HTML5 jQuery Mobile framework takes the "w

    jQuery Mobile
    halohalolin
    halohalolin 2010/10/17
    ][javascript][iPhone][Android]今までMobileWebkit向けのフレームワークといえばiUIかiWebkit使ってきたけど、jQuery Mobileも研究しないとな…表現力高そうだし。なお2010/10/17現在ダウンロード出来るのはAlpha1版
  • jQuery 関連記事まとめ - Cyokodog::Diary

    はてブだと埋もれるのでこちらに書き足してきます。 jQuery 基機能 家 jQuery.com リファレンス jQuery 日語リファレンス jQuery 開発者向けメモ jQuery リファレンス- openspc2 jQuery 1.2.6 リファレンス - StackTrace チートシート HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集 - coliss スライド・関連情報 はじめての jQuery jQueryのプレゼンVIDEO - JAM LOG 第1回 Silverlight vs. jQuery+ASP.NET AJAX - @IT チュートリアル jQuery 入門 - openspc2 jQuery を使って Ajax 開発を単純化する - IBM jQueryの魔法 - All About jQuery ではじめ

    jQuery 関連記事まとめ - Cyokodog::Diary
    halohalolin
    halohalolin 2010/10/10
    jQueryリンク集→CSS セレクタ/メニュー、リスト、リンク/位置、リサイズ調整/エフェクト/スクロール/ギャラリーページ/テーブル/マッシュアップ(Twitter/YouTube/Google Maps/はてな)
  • 軽量でデザインが良いWYSIWYGエディタ実装jQueryプラグイン「CLEditor」:phpspot開発日誌

    CLEditor - WYSIWYG HTML Editor 軽量でデザインが良いWYSIWYGエディタ実装jQueryプラグイン「CLEditor」。 次のようなすっきりしたデザインのWYSIWYGエディタを実装出来ます。ボタンはデフォルトで多数ありますが、カスタマイズ可能です。 全てダウンロードしても10KB以内という軽量なものになっています。 内容に応じてサイズを自動で変えたりすることも出来るようです。 IE 6.0+, FF 1.5+, Safari 4+, Chrome 5+ and Opera 10+で動作確認しているそうです。 jQueryプラグインというのもいいですね。 これは覚えておいてよさそう。 関連エントリ WEBフォームをWEB上でWYSIWYG編集して瞬時にダウンロードできる「pForm」 まだまだあったJavaScript製のWYSIWYGエディタコンプリート

    halohalolin
    halohalolin 2010/08/11
    IE 6.0+, FF 1.5+, Safari 4+, Chrome 5+ and Opera 10+で動作確認
  • 画像にぼかし効果を与えられるjQueryプラグイン「Image Blur」:phpspot開発日誌

    Plugins | jQuery Plugins 画像にぼかし効果を与えられるjQueryプラグイン「Image Blur」 $(element).blurimage(); のようにするだけで画像に次のようなぼかし効果を与えられます。 使い方はアイデア次第ですが、なかなか面白いですね。 関連エントリ HTMLで書けるパワポ風プレゼンテーション実装jQueryプラグイン「Slippy」 画像にクリック位置に注釈を入れられるjQueryプラグイン

    halohalolin
    halohalolin 2010/07/19
    $(element).blurimage(); のようにするだけで画像に次のようなぼかし効果を与えられます。