タグ

jqueryに関するmudo34のブックマーク (25)

  • Jquery-kabuki

    jQuery.kabuki header image from Wikipedia What's jQuery Plugin Kabuki ? 'Kabuki' is Japanese Traditional Type and Art. Get Start initialize element bind "Kabuki".

  • pjax - 実装|PORTFOLIO PAPER by FAT

    pjax - jquery plugin 10 pjaxはデータの読み込みと描画の冗長部分を省略することで非常に高速かつ低コストなページ移動を実現する、HTML5で実装される次期標準ブラウジング機能です。 pjaxはこのプラグインを使用することでサーバーに手を加えることなく簡単に導入できます。 最新版のダウンロード プラグインの最新版はGitHubで公開していますのでそちらからダウンロードしてください。 GitHub:https://github.com/falsandtru/jquery.pjax.js ファイル:https://raw.github.com/falsandtru/jquery.pjax.js/master/jquery.pjax.js 概要 サイト内のページ移動において指定したHTML要素(異なるコンテンツを持つ領域)のみ更新することでページ移動を高速化します。ajax

  • HTMLで文字詰めするタイポグラフィー用JS | fladdict

    HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する

  • ul・ol・li要素の備忘録 - NxWorld

    かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ(特に一部のIEで未対応)とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま

    ul・ol・li要素の備忘録 - NxWorld
  • 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プラグイン「iCheck.js」:phpspot開発日誌

    iCheck jQuery plugin - highly customizable checkboxes and radio buttons チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」。 一般的なチェックボックスを少し調整してクールにしたものや、リデザインした物など、クールにカスタマイズすることが出来ます。 シンプルなデザインにしてみた物。 ボタンっぽくしてみたもの よりカスタマイズしてみたもの 関連エントリ 独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン 2次元のラジオボタンを作るチュートリアル&jQueryサンプル

  • GitHubの情報を自サイト内に表示できるjQueryプラグイン「HubInfo」:phpspot開発日誌

    HubInfo | A Github Repo Widget GitHubの情報を自サイト内に表示できるjQueryプラグイン「HubInfo」 次のようなウィジェットっぽいものをjQueryプラグインで簡単に実装できます 使い方は超簡単で、以下の様にコードを書くだけ。 開発している物をサイト内にちょこっと貼り付けたい場合に便利そうですね。 関連エントリ GitHubを自前で持てるRails製オープンソースソフトウェア「GitLabGitHubにあるような、あの押しやすそうなボタンを作成するサンプル&チュートリアル

  • イージング関数チートシート

    イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを(例えばペンのような)放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。

    イージング関数チートシート
  • jQuery 1.7の on() off()について調べてみた | バシャログ。

    新しいチャリを手に入れたら歯車や金属のバーを眺めてニヤニヤするようになったminamiです。 11/3にjQueryの最新バージョン1.7がリリースされました。大小さまざまな機能追加がされましたが、その中でもかなり大きな「.on()」「.off()」というイベントAPIが追加されましたが、今までのイベントAPIとどう違うのかいまいちわからなかったので調べてみました。 「.on()」「.off()」の使いどころ jQueryには今までのバージョンにも、「.bind()」「.live()」「.delegate()」といったイベントAPIがありました。今回追加された「.on()」「.off()」はそれら3つの機能をカバーしたメソッドになります。 「.bind()」「.live()」「.delegate()」については今後も利用できますが、「.on()」「.off()」の使用が推奨されていくようで

    jQuery 1.7の on() off()について調べてみた | バシャログ。
  • matzmtok.com - このウェブサイトは販売用です! - matzmtok リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

  • jQuery Plugins

    The jQuery Plugin Registry is in read-only mode. New plugin releases will not be processed. We recommend moving to npm, using "jquery-plugin" as the keyword in your package.json. The npm blog has instructions for publishing your plugin to npm. Learning Center Forum Twitter IRC GitHub Copyright 2024 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more informat

  • jQuery公式プラグイン・レジストリが公開。GitHubと連携など、今風の仕組みに惚れ惚れ

    白石 俊平 ニュース jquery 0 Comment 2013年1月17日、jQuery「公式」のプラグイン・レジストリ(プラグインの集積場)が公開されました! URLはこちらになります。 http://plugins.jquery.com/ このプラグイン・レジストリの目的は、従来のプラグインサイトでは解決できなかった、「断片化」と「配布」の問題を解決することだそうです。 「断片化」・・・「jQuery プラグインがWeb上の至る所にあり、探すのが面倒」という、現在の状況 「配布」・・・作成したプラグインを配布するためのサイト作成や宣伝に手間がかかる、従来のプラグインサイトでは登録が面倒だった 新しいプラグイン・レジストリは、GitHubと連携することを前提として、こうした問題をエレガントに解決し、従来のプラグインサイトを完全に置き換えるものです。 開発者にとっては、プラグインを公開

  • jQueryでフリック/スワイプ動作の画像スライドギャラリーを作成する実験|BLACKFLAG

    iPhoneiPadAndroidといったスマートフォンやタブレット端末では フリック/スワイプと呼ばれる指でスライドさせるUIが付き物になっています。 jQueryでもこのフリック/スワイプ動作を実装できるプラグインはたくさんありますが いざ自分で作ろうとすると意外と大変な動作だったりします。 この動作についていろいろ調べていたところ Sleipnirのフェンリルさんのデベロッパーズブログにて、 iPhone/Android/PC 対応。jQuery で書くタッチイベント (フェンリル | デベロッパーズブログ) と題した、jQueryでiPhoneAndroidPCでタッチイベントを取得する方法がとても参考になったので この記事を参考にしてフリック/スワイプで操作するシンプルな画像ギャラリーを作ってみました。 まずは動作サンプルから。 下記の画像をフリック/スワイプしてみてくだ

    jQueryでフリック/スワイプ動作の画像スライドギャラリーを作成する実験|BLACKFLAG
  • jQueryコーディングの基本的なことからプラグイン化までの注意書き(Webデザイン)

    jQuery でのプログラミングの、基的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前:CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery

  • Twitter BootstrapでさくさくWeb開発 : アシアルブログ

    新年度です! 新入学、新入社を迎えるみなさん、おめでとうございます。 エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか? カッコよくって統一的なデザインがほしい!でもデザインセンスないし…実は私もそうでした。 ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます! Twitter Bootstrapとはなにか Twitter Bootstrap CSSのフレームワークです。 Web上に使ってみた!スゲー!等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい(クラス名など結構ガラっと変わっています)。 今回ご説明しているのは、Twitter Bootstrap 2に

    Twitter BootstrapでさくさくWeb開発 : アシアルブログ
  • 美しいプログラムを書く(業務用Webアプリケーション保守編) | Webシステム開発/教育ソリューションのタイムインターメディア

    あらすじ あなたはとある業務用 Web アプリケーションの開発・保守を任されています。 このアプリケーションは ASP.NET を用いて作成されており、 クライアントサイドは一部 jQuery を利用してナウなヤングにバカウケの UI を実装しています。 さて、今回は 商品情報の変更履歴を一覧表示する。一覧から2つのバージョンを選んで差分を表示できるようにする。 という機能を実装することになりました。 これ自体はちゃちゃっと実装し、以下のようなHTMLが生成されるようにしました: ... <table> <tr> <th>A</th> <th>B</th> <th>変更日時</th> <th>変更者</th> </tr> <tr> <td><input type="radio" name="new_version" value="9"/></td> <td></td> <td>2012-0

    美しいプログラムを書く(業務用Webアプリケーション保守編) | Webシステム開発/教育ソリューションのタイムインターメディア
  • Animatable: One property, two values, endless possiblities

    box-shadow ◀ ▶ From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou Tweet

  • jQuery.autopager1.0.0をリリースしました - テクメモ

    スクロールで次ページを自動読み込みするjQueryプラグイン v1.0.0をリリースしました。 全バージョンから全面的に書き直し、クリック等をトリガーにした読込みにも対応させました。 デモ サンプル 自動ページング機能を有効にするには、次ページへのリンクが存在するページに以下のようなコードを追加します。 $.autopager({ link : '#next', // 次ページリンクのセレクタ content: '.content' // コンテンツ部分のセレクタ }); ページ区切りは、次ページのコンテンツ読み込み完了直後に発生するloadイベントのコールバック関数で挿入できます。 $.autopager({ load: function() { // "this"は読み込んだコンテンツ要素を指す $(this).before('<hr/>'); } }); 詳しくは、http://la

    jQuery.autopager1.0.0をリリースしました - テクメモ
  • jQuery++

    Hi, I’m jQuery++. I am a MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.8 and later. I’m not a UI project like jQuery UI or jQuery Tools. Instead, I’m all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, I am jQuery’s bald-spot covering toupee. Select the plugins you want and c