タグ

Web制作とjqueryに関するwebbingstudioのブックマーク (13)

  • [JS]超軽量で設置も簡単!Facebook, Twitter, Google+のボタンを設置するスクリプト -SocialCount

    デモページ:カウント付きで縦並び SocialCountの使い方 使い方のステップは、2つ。 これ以上ないくらいに簡単です。 Step 1: 外部ファイル スタイルシートとスクリプトを外部ファイルとして設置します。 まずは、スタイルシートをhead内に。 <head> <link rel="stylesheet" href="../src/socialcount.css"> </head> アイコンを使用する場合は、もう一つ外部ファイル(socialcount-icons.css)を加えます。 続いて、スクリプトをページの下の</body>の上に。 ... <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="../src/socialcount.js"></script> </bod

    webbingstudio
    webbingstudio 2012/11/30
    CSSで編集可能なSNSのシェアボタンを生成するjQueryプラグイン。Facebookの、ボタンテキストがいいね!なのにクリックするとシェアになってしまう問題も、hover可能な環境についてはクリア
  • wp_enqueue_scriptの仕様がWordPress3.3でちょこっと変わったって話

    WordPressづかいなら頻繁にお世話になっているであろう、wp_enqueue_script関数。 自作やどっかから拾ってきたjQueryプラグイン(=not WordPressプラグイン)とかを使う時に、JavaScriptライブラリを正しく、あるべき順序で読み込んでくれるというアレです。 wp_enqueue_scriptをちゃんと使えたら、初心者から中級者にランクアップって言ってもいいんじゃないかと勝手に思ったりしてます。中級者の定義って難しいですけど。 それはどうでもいいとして、このwp_enqueue_scriptの仕様が3.3から微妙に変わったのに、あまり話題に登場しないなーと思っておりまして。 そうこうしてるうちに3.3.1が出て久しくなってしまったので、誰かが書く前に自分で書いときます。

    wp_enqueue_scriptの仕様がWordPress3.3でちょこっと変わったって話
    webbingstudio
    webbingstudio 2012/06/09
    wp_enqueue_script関数の最新の仕様について。
  • http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/

    webbingstudio
    webbingstudio 2012/06/03
    ナビゲーションにhoverするとメイン画像が切り替わるスライドショー。ありそうでなかった。
  • Meerkat :: A jQuery Plugin

    Let’s play hide n’ seek Hello! My name is Meerkat, I'm a jQuery plugin. I like long walks on the beach, sitting naked by a fire, playing hide n' seek, and all the peanut butter you can feed me. News & Updates November 10th, 2010 Added ability to automatically trigger “dontShowAgain” on timer method (read) April 22nd, 2010 Callback functionality now available (onMeerkatShow)! (read) April 2nd, 2010

    webbingstudio
    webbingstudio 2012/01/07
    画面の上下左右に広告バーを出したり、スプラッシュページを作成できるプラグイン。cookieを保存して、二度と表示しないようにすることもできる
  • 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 --------------------------------------------------------------------------------------------

    webbingstudio
    webbingstudio 2011/10/29
    jQuery mobileのデザインテーマをブラウザから作成できるツール。複数サンプルの比較、URLによる他の人へのシェア、Kulerとの連携も可能
  • どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509

    jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基バリデーションルール 3. select, checkbox、radio、複数項目の場合 4

    webbingstudio
    webbingstudio 2011/10/06
    リアルタイムでフォームの入力チェックを行うプラグイン。HTMLの編集ができないフォームでもhead要素にスクリプトを書いて実行できる。エラーメッセージもポップアップ・スライドダウンが選択可。
  • Pull Out Content Panel with jQuery | Codrops

    In this tutorial we will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded […] In this tutorial we will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded to full page size to show more. A custom slider allows to scroll t

    Pull Out Content Panel with jQuery | Codrops
    webbingstudio
    webbingstudio 2011/09/23
    ネタ帳さんが使っている、フッターまでスクロールすると右からパネルが出てくるスクリプトのチュートリアル。Zenbackを使っていると競合してしまいそうだ
  • 「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる - Publickey

    このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単! スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1)HTMLを書くだけでモバイルアプリケーションができてしまう 2)モバイルのユーザーインターフェイス対応の部品が多く揃っている 3)iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な

    「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる - Publickey
    webbingstudio
    webbingstudio 2011/05/14
    簡単なHTMLの記述でページ遷移アニメーションも含めたスマートフォン用コンテンツを生成できる
  • jQuery UI Tabsを使ってタブを実装する

    jQuery UI Tabsを使ってタブを実装する方法を紹介します。 当は4月1日は毎年エイプリルフールネタをエントリーしているのですが、今年は自粛します。 1.サンプル 以下に簡単なサンプルを用意しましたのでご覧ください。 サンプル 2.jQuery UI Tabsのダウンロード jQuery UIのページの「Download」をクリック。 「Toggle All」をクリックして、すべてのチェックを外します。 「Widgets」の「Tabs」をチェック。 ページ下にある「design a custom theme」をクリック。 「Theme Roller」でテーマを選択します。「Roll Your Own」タブではすべてを自分でカスタマイズできますが、最初は「Gallery」タブから決まったデザインを選択して、jQuery UIとテーマの対応の感触をつかんだ方がいいでしょう。 ここでは

    jQuery UI Tabsを使ってタブを実装する
    webbingstudio
    webbingstudio 2011/04/22
    タブ切り替えの実装はjQuery UI Tabsが無難。タブとコンテンツの両方をdivで包括する必要があることに注意。フォーカス時の点線はa要素にoutline:noneで出なくなる
  • フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌

    PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫:PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"

  • デザイナー・コーダー必見!使えるform関連jQueryプラグインの数々 | バシャログ。

    こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに!かつ操作性を向上!できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック(バリデーション)が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日語用は別途作成し、使用することが可能です。 jQuery

    デザイナー・コーダー必見!使えるform関連jQueryプラグインの数々 | バシャログ。
    webbingstudio
    webbingstudio 2009/05/30
    うぬー、最近はこういうの普通にデザイン画に含めてくるからなあ。
  • ThickBox 3.1

    ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. Features: ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k. The ThickBox JavaScript code and C

    webbingstudio
    webbingstudio 2009/04/23
    Lightbox派生のポップアップライブラリ。HTMLの表示、ログインページ等のAjaxを含む表示が可能。リンクに長いクエリが入ってしまうのがちょっと気になる
  • jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ

    JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを5つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){

    webbingstudio
    webbingstudio 2008/12/11
    HTMLのツリー構造を活用し、効率の良いセレクタで処理速度を向上する方法。id指定は極力していたけど、メソッドチェーン全然知らなかった…
  • 1