タグ

jQueryに関するKimuraのブックマーク (36)

  • [JS]これは便利!YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js

    デモ:Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.

    [JS]これは便利!YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
    Kimura
    Kimura 2015/04/15
    「すごく便利だ!」と思ったんだが、はて、使いこなせるかな?メンテナンスめんどいなんてこと無いよね?
  • 今風になった!Web制作で使える最近のjQueryプラグインまとめ

    作成:2014/10/14 更新:2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き 1.ジオメトリック 背景 2.フルスクリーンでスライドさせる 3.ドロアー風ライトボックス 4.動画を再生するタイプ3つ スクロール 5.スクロールでクロスフェード 6.スクロールで奥行きを表現 7.スクロールで分割 画像 8.APNG 9.Google 画像検索風ライトボックス 10.トイカメラ風のフィルター ポップアップ 11.おしゃれなアラート 12.

    今風になった!Web制作で使える最近のjQueryプラグインまとめ
    Kimura
    Kimura 2014/10/15
    いざ探すときになかなか探せなかったりする便利なプラグイン。マウス操作のプラグインに注目。
  • これ結構使えた!サービスサイトやWordPressテーマで使われている小技まとめ

    作成:2014/05/19 更新:2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 1.画像読み込み時、ローディング画像を表示/jQuery 2.読み込み時に文字を動かす/jQuery ヘッダー 3.文字の拡大・縮小/jQuery 4.入力補助/jQuery 5.伸縮するサーチボックス/jQuery コンテンツ 6.中心に水平線を入れる/CSS 7.均等に並べる/段組み/CSS 8.コンテンツが現れた時にアニメーションさせる/jQuery 9.マウスホバーで画像を拡大しキャプションを出す/jQuery 10.マ

    これ結構使えた!サービスサイトやWordPressテーマで使われている小技まとめ
    Kimura
    Kimura 2014/05/20
    こういう小技が結構必要なことが多いんです。jQueryMobileはもう要らない。。。かな?
  • GitHub - stripe-archive/jquery.payment: [DEPRECATED] A general purpose library for building credit card forms, validating inputs and formatting numbers.

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - stripe-archive/jquery.payment: [DEPRECATED] A general purpose library for building credit card forms, validating inputs and formatting numbers.
    Kimura
    Kimura 2013/02/09
    カード支払いのバリデーションを行ってくれるjQueryプラグイン。結構シンプルなので使いやすい。
  • GitHub - diy/jquery-emojiarea: A rich textarea control that supports emojis, WYSIWYG-style.

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - diy/jquery-emojiarea: A rich textarea control that supports emojis, WYSIWYG-style.
    Kimura
    Kimura 2012/12/10
    textareaを絵文字入力可能にするjQueryプラグイン。テキストエリアに表示する絵文字画像はカスタマイズ可能。
  • ノンプログラマーのためのjQuery生成ツール

    変更履歴 2013.03.13 toggleClassが2つ表示されていたため、1つに修正しました on/offを追加しました(1.7)※イベントには追加していません。別途対応します addBackを追加しました(1.8) finishを追加しました(1.9)

    ノンプログラマーのためのjQuery生成ツール
    Kimura
    Kimura 2012/11/14
    選択していくだけでjQueryが書けるツール。ノンプログラマーじゃなくても便利に使えると思う。
  • スマホサイトに入れると使いやすくなる!おすすめjQuery4選! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ

    スマホサイトに入れると使いやすくなる!おすすめjQuery4選! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    Kimura
    Kimura 2012/09/23
    スマートフォン向けサイトに使えるjQuery。jQueryMobileではなく、jQuery。
  • サービス終了のお知らせ - NAVER まとめ

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

    Kimura
    Kimura 2012/07/28
    うーん。「コピペに頼らず、理解する」---耳が痛いな。
  • iView Slider

    画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。 IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。 iOS, Androidのスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ

    Kimura
    Kimura 2012/07/26
    すごいなぁ。画像だけ用意してあとはHTML側でゴニョゴニョできるんだ。ローテーションバナーにびっくり。もうFlashは要らないとハッキリわかった。
  • jQueryで簡単にドラッグ&ドロップのソートを実装する方法

    読む:3分 試す:15分 はじめまして、4月にアシアルへ入社した噂の好青年こと高橋です。 今日はjQuery UIを使ったオシャンティなソートを紹介します。 まずはデモをご覧ください。 「こんなメンド・・・大変そうなUIできるかなぁ?」 心配ご無用!jQueryさんはやってくれます!! まずは必要なソースを準備します。 下記からそれぞれ最新版をダンロードしてください。 http://jquery.com/download/ (24/7/19時点で ver 1.7.2) http://jqueryui.com/download (24/7/19時点で ver 1.8.21) ファイル構造・読み込み等は割愛します。 今回覚えるべき、たったひとつのシンプルなキーワード 「sortable」 まずはHTMLいきます <table class="table table-striped table-b

    Kimura
    Kimura 2012/07/20
    ソートと言うより、ドラッグ&ドロップによる入替え。表の行入替えに使えそうだ。いろいろ使えそうだ。
  • jQuery google api and other google hosted javascript libraries. - ScriptSrc.net

    Mastering the Code Things We Wish We Knew Much Earlier In Our Career - Articles, Tips, Inspirations, Sources and Resources for web designers and developers Watch video Hello, coders! Computer Science became one of the top professions and hobbies in the past two decades. Many people, especially website developers, are drawn to learn at least one programming language that will back up their written

    Kimura
    Kimura 2012/06/13
    Google CDNサービスのscript要素を簡単に取得できるサイト。「Copy」をクリックで<script>タグがクリップボードにコピーされる。
  • [JS]FlashもHTML5も無しで、美しいアニメーションを実装するスクリプト -jCSML

    FlashもHTML5もSilverLight, SVGも使わずに、IE7+, iPhone, iPad, Androidで動作するアニメーションを作成できるjQueryのプラグインを紹介します。 jCS Media Library [ad#ad-2] jCSMLの対応ブラウザ jCSMLのデモ jCSMLのダウンロード jCSMLの対応ブラウザ jCSMLの対応環境は下記の通りです。 HTML5非対応のIE7でも、Flash非対応のiPhoneでも動作します。 IE7+ Firefox3.6+ Chrome Safari iPhone iPad Android jCSMLのデモ jCSMLの多彩で美しいデモをいくつか紹介します。 各デモはチュートリアルも兼ねており、コードも一緒に掲載されています。

    Kimura
    Kimura 2012/06/08
    結構短いコードで書けちゃうみたいだ。「アニメーションで文字を一つずつ表示」の最後のやつとか、映画のオープニングロゴに使えそう~
  • Redactor WYSIWYG html editor

    A simple and fast tool for everyday tasks of creating and editing texts on the web. Suitable for creating and editing common texts for the web, which may also include images, video, embed code. It has a hybrid interface that can be customized according to your needs. For example, you can disable the main toolbar and only show the context toolbar when highlighting text. Or show the control toolbar

    Kimura
    Kimura 2012/05/29
    jQueryベースのWYSIWYG(What You See Is What You Get)エディター。
  • jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com

    必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通:要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>

    jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
    Kimura
    Kimura 2012/05/22
    いつも使うたびに調べているような気がするのでこういうまとめがあると助かります。
  • ThemeRoller | jQuery Mobile

    /*! * jQuery Mobile 1.4.5 * Git HEAD hash: 68e55e78b292634d3991c795f06f5e37a512decc <> Date: Fri Oct 31 2014 17:33:30 UTC * http://jquerymobile.com * * Copyright 2010, 2014 jQuery Foundation, Inc. and othercontributors * Released under the MIT license. * http://jquery.org/license * */ /* Globals */ /* Font --------------------------------------------------------------------------------------------

    Kimura
    Kimura 2011/11/09
    jQuery Mobile用のカスタムテーマを作ることができる。背景色のセルに触るとstart/endが全て同じ色になってしまうので注意。
  • 学生でもキャッシング出来るの?

    学生であっても、お金をキャッシングすることは可能です。ただし、いくつかの条件があります。 まず、年齢です。未成年であっても、キャッシングの契約ができるところもありますが、多くの場合、特に大手の消費者金融では、キャッシング審査対象外としています。また、成年に達していても、返済能力があるかどうかが問われます。一般的な消費者金融では、社会的信用と継続的な収入があるかどうかを重要視しますので、学生はお金を借りることができないことがあります。 しかし、学生ローンを取り扱っているところでは、学生がでることが証明でき、仕送りやアルバイトなどでの収入が証明できれば、審査を通ることが多いです。また、未成年であっても学生であれば対象としているところもあります。したがって、学生でどうしてもキャッシングを利用したいという時には、学生ローンでの契約をまずは試みるのがよいでしょう。 ただし、キャッシングできる金額は最

    Kimura
    Kimura 2011/10/23
    既存の携帯サイトをスマートフォン対応にするsparrow.jsの開発者による解説。
  • Sparrow.js | 携帯サイトを無料でスマホ対応!お手軽簡単、その秘密はJavaScript

    スマートフォンのシェア増加に伴い、携帯サイトをスマートフォンでもキレイに表示させたいと 感じている方は多いと思います。そんな中、「今ある携帯サイトを活かす方法はないの?」とお考えの方に嬉しいニュースです。Sparrow.jsを使えば、簡単に自らの携帯サイトをスマートフォン対応させることができます。しかも、無料ですぐにお使いいただけます。このSparrow.jsを使ったら何ができるかをご紹介します。 半角全角変換 携帯サイトでは半角文字がよく使われています。ところがスマートフォンでは、半角文字を使う必要性はあまりありません。よって半角文字を、スマートフォンでは全角に変換して表示させます。 表示サイズ最適化 スマートフォンでは画像が小さく表示される場合、ユーザーがいちいちズームする手間が発生します。スマートフォンの画面サイズに合わせ、コンテンツを最適なサイズで 表示します。 タッチリスト表示

    Kimura
    Kimura 2011/10/19
    既存のケータイサイトにほんの少しのタグを加え、このsparrow.jsを読み込めば即スマートフォン対応になる。手元のIS04では絵文字が文字化けするがそのうち直るだろう。
  • Knockout : Home

    Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM) pattern Declarative Bindings Easily associate DOM elements with model data using a concise, readable syntax Automatic UI Refresh When your data model's state changes, your UI updates automatically Dependency Tracking Implicitly set up chains of relationships between model data, to transform and combine it Templating Quickly gene

    Kimura
    Kimura 2011/10/06
    jQueryの上に構築されるJavaScriptフレームワーク。HTML5のdata-bind属性を使って面倒なDOM操作不要。なんかより直感的に簡単に記述できそう。jQuery Templatesプラグインとも連係できるらしい。短いコードで結構なことができる予感
  • iOS4.2+ / モバイルSafariの「振る動作(シェイクジェスチャー)」をjQueryを使って検知する

    iPhoneを振る動作(シェイクジェスチャー) によって呼び出されるモーションイベント をjQueryで検知するgShakeのご紹介。 iOS4.2以上 / Safariでは加速度センサー をJavaScript経由で使うことが出来ますが、 これをjQueryでやろう、という内容です。 備忘録です。別にjQueryじゃなくてもいいじゃんみたいな話なんですけど、まぁjQuery大人気ライブラリだし覚えておいて損は無いんじゃないでしょうか。 この件に関しては以前カヤックのえどさん(@edo_m18)が記事とデモを用意してくれてるのであわせて参考にして頂ければ幸いです。 iOS4.2のSafariから追加された加速度センサーでシェイクジェスチャを作るgShake 3KBと軽量で、導入も簡単です。 以下サンプルご用意しました。iOS4.2以上のモバイルSafariで軽く( ゚∀゚)o彡゜すればアラ

    iOS4.2+ / モバイルSafariの「振る動作(シェイクジェスチャー)」をjQueryを使って検知する
    Kimura
    Kimura 2011/07/09
    iPhoneをシェイクするとjQueryを使って検知するgShakeの紹介。jQuery Mobileを使っている=jQueryを使っている---のでまさにモハメドアリ(ぷぷぷ
  • jQuery プラグインを書くための資料と便利ツール - わからん

    次の3つが役立っている。最近実際にいくつか読んでいるけど、複数ブラウザ対応していたり、完成度の高いものばかりというわけではないんだなと知った。そのことにネガティブな印象はなくて、そのまま使えるものじゃなくても、公開して頂けるだけありがたいといった気分。どうせなら GitHub に置いてくれれば、気軽に修正の報告ができるしいいなとは思った。 http://docs.jquery.com/Plugins/Authoring 公式サイトの Plugins/Authoring というセクションに丁寧な解説がある。 http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ テンプレ。コメント付きのほうを一度読み下すだけでも、ためになった。わざわざこのネタのための RSS フィード もあった。 http://jquery.cod

    Kimura
    Kimura 2011/06/28
    タイトル通り。jQueryプラグインなんて書かないと思うんだけどなぜかブクマ。