[B! jQuery] kasumaniのブックマーク

[jQuery]トースト通知を表示する - Qiita

2020/09/04 加筆バージョンアップさせ、非jQuery依存にしましたので、Androidっぽい見た目のトースト通知を作ってみた(非jQuery依存)の方をご覧ください Androidで数秒で消える通知メッセージ（トースト通知）を、jQueryで実装してみました。見た目もAndroid風で、画面下のセンターに黒背景・白文字で表示します。 (IE9～11、Chrome、FireFoxで動作確認) トースト通知のJavaScript版ライブラリとしては、Toastrというライブラリが有名なようです。 // トースト通知クラス var Toast = (function(){ var timer; var speed; function Toast() { this.speed = 3000; } // メッセージを表示。表示時間(speed)はデフォルトで3秒 Toast.proto

kasumani 2014/05/14

トースト通知を表示する 4 ストック 0 コメントこの投稿をストックする Androidで数秒で消える通知メッセージ（トースト）を、jQueryで実装してみました。シンプルなやつです。 ※IE9～11、Chrome(最新)、FireFox(最新)でしか動作

jQuery

リンク

jQuery UIをタッチデバイスに対応させるためのライブラリ・jQuery UI Touch Punch - かちびと.net

jQuery UIをタッチデバイスに対応させるライブラリ・jQuery UI Touch Punchのご紹介です。いつか使うかも、と思ったので備忘録。これを見て、そういやスマフォでjQuery UIを試したことが無いことに気が付いた次第です・・ jQuery UIのドラッグとかリサイズとかソートとかをiPhoneなどに対応させるためのライブラリです。そういやjQuery UIはタッチデバイスで動くのか試したことありませんでしたが、ドラッグやリサイズはそのままでは使えませんでした。これは需要あるんじゃないですかね。このライブラリでタッチデバイスに対応させられるのは以下の通り。 Draggable Droppable Resizable Selectable Sorta ble Accordion Autocomplete Dialog Progressbar Slider 実機でテ

kasumani 2012/04/28

リンク

画像にツールチップを表示できるjQueryプラグイン「iPicture」 | Web活メモ帳

画像ギャラリーに良さそうなjQueryプラグイン画像の一部について、詳細に説明したい場合に使える「iPicture」をご紹介。この写真のこの人が○○でさー、この右下のコレが○○だったんだー。という説明をマウスオーバーすると表示できるようになります。 Flickrなんかでも、画像の上に説明を載せれたりしますよね。いつか使うかもしれないので一応メモ。アイコンにマウスオーバーすると簡単な説明が表示されます。スライドショーやギャラリーに組み込むと良さそうですねコードは以下のような感じになるそうです。 jQuery(document).ready(function(){ $( "#iPicture" ).iPicture({ pictures: ["picture1","picture2","picture3", ...all pictures' ID], moreInfos:{ "p

kasumani 2012/04/02

リンク

レスポンシブデザインに使えるjQueryプラグイン集 – creamu

「20 Useful jQuery Plugins for Responsive Web Design」という記事で、レスポンシブデザインに使えるjQueryプラグインが20個まとまっています。上記はPHOTO SWIPE。スマートフォン用に、スワイプできるスライドショーを作ることができます。 isotope アニメーションでオブジェクトの位置が変更されます ResponsiveSlides.js シンプルなクロスフェードタイプのスライドショー The Heads-Up Grid オーバーレイでグリッドラインを表示 jQuery Masonry fluidなレイアウトが実現できる scrolldeck 矢印キーでページ移動、動きのあるプレゼンテーションを可能にする Elastislide ウィンドウサイズの変更に対応した、レスポンシブなカルーセルギャラリー AUTOMATIC IMAGE

kasumani 2012/03/15

リンク

jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル:phpspot開発日誌

jQuery HTML5 Drag-and-Drop File Upload | LearnComputer jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル。 jQueryのfiledropプラグインを使いつつサーバにファイルをアップロードするためのJavaScriptとPHPコードの例が掲載されています。 JS部分のコード例。アップ先のPHPエントリポイント、アップ開始、終了時のイベントハンドラが指定できます。 PHP側では $_FILES を使ってファイルを受け取るという簡単な物になっています。関連エントリファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」ファイルアップロード関連のjQueryプラグイン１０ PHPを使ったAjaxファイルアップロードサンプル１０

kasumani 2012/03/13

リンク

jQueryでスクロールすると表示する系いろいろ

jQueryでスクロールすると表示する系いろいろ最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。投稿日2012年03月08日更新日2019年12月19日ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

kasumani 2012/03/08

リンク

Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ

Twitter Bootstrapをカスタマイズしたり、jQuery UI, jQuery Mobileで使ったり、PhotoshopやFireworkの素材として利用したり、WordPressのテーマなど、もっと活用するためのリソースをWeb Resources Depotから紹介します。まずは、Twitter Bootstrapから。

kasumani 2012/03/06

リンク

奥行きのある回転を可能にする「Roundabout」 – creamu

Roundaboutは、奥行きのある回転を可能にするjQueryプラグインです。その他にも、動きのスムーズなデジタル時計や、CSS3 3D Transf ormsのサンプルなどがあります。 Roundabout

kasumani 2012/03/02

リンク

スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」:phpspot開発日誌

Curtain.js スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」単なるスクロールする縦長ページではなく、スクロールするとブロック要素が別々に動いて面白い演出が作れます。左下のナビゲーションでページ送りをしたりも出来るみたい今なら、これを使ってサイトを作れば、玄人なWEB業界の人も目を丸くするかもしれませんね。関連エントリフルスクリーン背景がスライドショーになるCSS3サンプルレスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」

kasumani 2012/02/13

リンク

はてなブックマーク

タグ

関連タグで絞り込む (18)

jQueryに関するkasumaniのブックマーク (9)

お知らせ

今週のはてなブックマーク数ランキング（2024年11月第1週）

月間はてなブックマーク数ランキング（2024年10月）

今週のはてなブックマーク数ランキング（2024年10月第4週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス