タグ

jQueryに関するkanakogiのブックマーク (262)

  • [JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll

    デモページ:3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse

  • 簡単で高機能!デザイナー必見の汎用性が高いjQueryプラグイン7選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近、いろんな先輩方から「お前服だっせえな」と言わるので、ファッションの傾向を泣く泣く変えました。嵐の相葉君をお手にこれまで頑張って参りましたが、相葉君には近づけませんでした。無念。 さて、今回はさまざまなシーンで活用できる、汎用性の高いjQueryプラグインを7つほどご紹介させていただきます。簡単&シンプルで優れた機能のものばかりなので、ぜひご覧ください。ダウンロードできる家サイトのほかに、日語で分かり易く解説してくださっているサイト様のURLも合わせて載せておきます。 1.世界一使いやすいスライダー”bxslider.js” カスタマイズ豊富で、設置の仕方も超簡単!弊社CTOづやさんのオススメでもあります。 フリック、スワイプも対応しています。最強すぎます。 ダウンロード:bxslider様

    簡単で高機能!デザイナー必見の汎用性が高いjQueryプラグイン7選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • JSONデータを使ってテーブルを表示·Tabler MOONGIFT

    TablerはJavaScript製のオープンソース・ソフトウェア(MIT License)です。 HTMLテーブルは様々な場面で使われます。そのため、より使い勝手よくカスタマイズしたり表示をダイナミックに変更したいと言ったニーズが出てきます。そこで今回はJSONからテーブルを表示するTablerを紹介します。 基的な使い方。カラムを定義してJSONデータを当てはめるだけです。 全てを表示するのではなく、指定したキーだけを表示させる事もできます。 Ajaxデータで取得したデータを使って表示をよりダイナミックに。 ページネーション付き。ページ番号またはnextボタンで次のリストに遷移します。 Tablerでは元々データがJSONであり、レンダリングはTablerに任せる事ができます。システム側から出力されるリストに合わせてテーブルの表記を変更する事も簡単でしょう。ベタにHTMLタグを書くよ

    JSONデータを使ってテーブルを表示·Tabler MOONGIFT
  • [JS]スクロールしてもサイドバーなどの要素を貼り付けたように常に表示させるシンプル高性能超軽量スクリプト -Sticky-kit

    ユーザーがスクロールした際、指定した要素をぴたっと貼り付けたように指定範囲に常に表示させるスティッキー用のjQueryのプラグインを紹介します。 実装は非常に工夫されており、シンプルかつ高性能、しかも1.8kの超軽量! 一行の記述で、複数の要素を異なる範囲に表示させることもできます。 複数の要素を異なる範囲にも貼り付けたデモ Sticky-kitの使い方 実装は非常にシンプルで、簡単です。 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="/jquery.sticky-kit.js"></script> <

  • 【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。

    はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読

    【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
  • 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita

    結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合

    結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
  • jquery小技まとめ32

    作成:2013/07/1 更新:2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー(Google Analytics関係とか)なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール 1.ページ内リンク/フッターまわり/トップに戻る 2.パララックス スライド 3.カルーセル 4.レスポンシブなスライダー 5.ヌルヌルサクサクなスライドメニュー 6.サムネイル付きクロスフェードスライドショー 補助 7.Google Ana

    jquery小技まとめ32
  • waterfall.js

    div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリプトのページ自体がデモになっています。 まずは、デスクトップサイズでの表示。 デモページ、幅780pxで表示 カラムの数はカラムの幅の最小値を設定することで、自動で表示されます。 ページ内の適用範囲も指定できるので、左のサイドバーはそのままの表示です。 waterfallの使い方 使い方は簡単です。 HTMLがあれば、数行加えるだけで完了です。 Step 1: 外部ファイル waterfallはj

  • 郵便番号から住所を補完するjQueryプラグインを作ってみた · けんごのお屋敷

    郵便番号から住所を自動的に補完してくれる JavaScript のライブラリに AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム(CGI不要版) がありますが、それを jQuery のプラグインとして実装したものを作ってみました。 jquery.ajaxzip2 通常版と、スペースや改行などが圧縮された minify 版があります。使い方はリンク先の github に書いてあるので参考にしてください。 また jquery.ajaxzip2 を実装するにあたって、さらに使いやすくするために従来の AjaxZip2 を少し拡張しました。 拡張機能 次のような機能を新たに追加しています。 住所補完後の動作をコールバック関数で指定可能 郵便番号から住所を補完する際に JSON 形式の住所データを非同期に取得しにいきますが、それが完了した後に呼び出されるコールバック関数を指定できる

  • ガントチャート上でドラッグ&ドロップでタスクの並び替えられるようにしてほしい – Customer Feedback for Backlog

    ベトナムにおけるBacklog活用のリアル ベトナムにおけるBacklog活用のリアル backlog BacklogAmazon EKS クラスターを Blue-Green アップデートするためにやっていること BacklogAmazon EKS クラスターを Blue-Green アップデートするためにやっていること backlog 2023年最も素晴らしいプロジェクトを表彰!Good Project Awardを開催しました 2023年最も素晴らしいプロジェクトを表彰!Good Project Awardを開催しました backlog Backlog開発者が夫婦の不和をなくす家庭管理アプリを作ってみた話 Backlog開発者が夫婦の不和をなくす家庭管理アプリを作ってみた話 backlog 創業からもうすぐ80年の老舗企業!ミートボールでおなじみの石井品様で、プロジェクト

    ガントチャート上でドラッグ&ドロップでタスクの並び替えられるようにしてほしい – Customer Feedback for Backlog
  • jqueryを効率よく学ぶ方法は? - プログラミング学習の窓口

    jQueryを学ぼうと思ってネット検索をしても、色々な情報が出てきてどの情報を参考にすればいいか分からないという経験をした方はいるのではないでしょうか。 特に独学で学ぼうとすると、その壁によくぶつかります。ドットインストールのようなメジャーなサービスも使ったことがなければ、その価値は分かりません。 そこでおすすめなのがプログラミングスクールの活用です。最初に何から学ぶべきかといった説明はもちろんのこと、キャリアプランまで相談に乗ってくれるので、ただ単に学んで終わるということが減らせます。 The post jqueryを効率よく学ぶ方法は? first appeared on プログラミング学習の窓口.

    jqueryを効率よく学ぶ方法は? - プログラミング学習の窓口
  • ScaleOut | Supership

    2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 件に関する詳細は、プレスリリースをご確認ください。

    ScaleOut | Supership
  • ブックマークレットで jQuery を使う魔法の 210 文字 - Qiita

    「ブックマークレットで jQuery を使う魔法の 210 文字」という記事を ブログ に書いたのですが、ここ Qiita ではその技術的な解説をしてみようと思います。 やりたい事はそのものずばり、ブックマークレットの中で jQuery を使うという事です。 ちょっとした処理の自動化や簡単なツールなど、よくブックマークレットを書いて活用しているのですが、ブックマークレットだと素の JavaScript を書かなければならず、DOM 操作が含まれる事をやろうとすると、jQuery に慣れた身には面倒くささが先に立ってしまいます。 ならば、ブックマークレットで jQuery を使えるようにすればいい!というのが今回の趣旨になります。 まず方針として、どんなページでブックマークを起動してもちゃんと jQuery が使えるようにしたいです。ですので、jQuery 体は自前で調達しなければなりませ

    ブックマークレットで jQuery を使う魔法の 210 文字 - Qiita
    kanakogi
    kanakogi 2013/06/18
    ブックマークレット作成時に
  • フォームの入力をもっと快適にする·jq-idealforms MOONGIFT

    jq-idealformsはjQuery/JavaScript製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 Webサイトでフォーム入力を行う機会はとても多いです。だからこそ変な作りのフォームでは入力途中で嫌になってしまって閲覧者が逃げてしまいます。そんな勿体ない取りこぼしのようにできるフォームがjq-idealformsです。 レスポンシブWebデザインなフォームです。入力時にリアルタイムチェックしてくれます。 OKだと青くなります。 カレンダーは選択式です。 チェックボックスなどのデザインがカスタマイズされています。 ドロップダウンも色がついています。 jq-idealformsではステップごとに表示を分けたり、キーボードの入力をリアルタイムにサポートしていたりと便利な機能がたくさんついています。ブラウザはIE8以降の他メジャーなブラウザに対応し、Android

    フォームの入力をもっと快適にする·jq-idealforms MOONGIFT
  • 簡単にYouTubeの動画ギャラリーをWebページに掲載できるjQueryプラグイン「jquery.youtubeGallery.js」

    簡単にYouTubeの動画ギャラリーをWebページに掲載できるjQueryプラグイン「jquery.youtubeGallery.js」
  • LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」:phpspot開発日誌

    jQuery Unveil - A very lightweight plugin to lazy load images LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」 LazyLoadプラグインの余分な機能(エフェクト、イベント)を省いて軽量化したものです。 LazyLoadでページ表示速度をあげようとしてLazyLoadで遅くならないようにしたい場合に使えそう とにかく軽くしたい場合に検討してみてもよいプラグインですね 関連エントリ 1ページ内で複数ページに分割できるjQueryプラグイン「windows」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 レスポンシブに加えスマホ用のメニュー実装もできる

  • 話題のサークルデザイン|展開可能なソーシャルボタンをjQueryで実装できる「ClassySocial」

    スマートフォン用に作られたアプリのうち、今年はサークルが広まっています。 同時にフラットデザインなんかと併用して使われることがあり、今回はこうしたサークルデザインのアクセントとして使うことが出来るサークルボタンをご紹介致します。 これはjQueryを利用して、比較的簡単に設置出来るのが利点です。 以下からダウンロード可能。 ClassySocial | Class.PM とりあえずイメージとしては以下の様な。 中心から周りに展開。 ボタンから右へ展開。 今回の紹介されているものは、ソーシャルボタンですが、使い道はいろいろですね。 設置 jQueryお決まりのコレ。<head></head>内に記述。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 続いて、CSS

    話題のサークルデザイン|展開可能なソーシャルボタンをjQueryで実装できる「ClassySocial」
  • [JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect

    フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。 デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。 フィルタリングのサポート。 キーボードナビゲーション。 テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。 まずは、一つ目。

  • jQuery:よく使用される機能をまとめて実装できるプラグイン - NxWorld

    スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるjQueryプラグインのまとめです。 予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。 紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりもします。 yuga.js web制作を優雅にするために作られたjQueryプラグインで、7種類の機能が実装されています。 ライセンスはMIT Licenseで、ライセンスに従う限り許可なく自由に使用できるそうです。 機能 ロールオーバー 現在のページをハイライト表示 外部リンクを別ウインドウで開く 画像をthickboxで表示(thickbox.jsを使用) スムーススクロール タブ機能 CSS3の擬似クラスをクラ

    jQuery:よく使用される機能をまとめて実装できるプラグイン - NxWorld
  • 人や動物のシルエット

    Design Your Way is a brand owned by SBC Design Net SRL Str. Caminului 30, Bl D3, Sc A Bucharest, Romania Registration number RO32743054 But you’ll also find us on Blvd. Ion Mihalache 15-17 at Mindspace Victoriei contact@designyourway.net You came here for some really cool CSS text effects that will help you make amazing web typography for your websites. In order to successfully give a website a lo

    人や動物のシルエット
    kanakogi
    kanakogi 2013/05/21
    地図のまとめ