タグ

jQueryに関するhisasannのブックマーク (627)

  • Introducing jQuery

    jQueryって何 JavaScriptのフレームワーク みんな超使ってる ややこしいことが超簡単にできる John Resigってすげー人が作ってる とにかくイケてる なぜjQueryはイケてるのか 超短く書ける。そう作られてる。 Write Less, Do More. たくさんプラグインがある。使うの簡単。 DOM操作周りにめちゃ強い。 JavaScript始めるのにもオススメ。 ブラウザごとの差異も吸収してくれちゃう ブラウザ上でなんかするのに必要な機能が詰まってる プログラム書く流れ JavaScriptに限らず、大体こんな感じ。 こんなん作りたい APIを調べる それをどーやって使うのか調べる なんか難しそうだったらフレームワークとか調べる 文法を知る(大体どれも大きくは変わらない) 書いてみる APIとかフレームワークとか知らん 大丈夫です。 そんなん普通、調べないと知りませ

  • jQueryを使ったプレゼンテーションツールjQuery-Presentationの使い方 - 小さい頃はエラ呼吸

    MOONGIFTさんのエントリで紹介されていたjQueryで作られたプレゼンテーションツールjQuery-Presentationを実際に使ってみました。 MOONGIFT: » jQuery製のプレゼンテーション「jQuery Presentation」:オープンソースを毎日紹介 jquery-presentationのダウンロード 1.以下のサイトにアクセスします。 davist11's jQuery-Presentation at master - GitHub 2.右上にあるDownload Sourceから必要なファイルを一式ダウンロードします。 3.ダウンロードする形式を選択します。(zipかtarが選択できます。) jquery-presentationの使い方 ダウンロードしたファイルを解凍して、index.htmをブラウザで見るとすぐに動きます。スライドを作成するには、i

    jQueryを使ったプレゼンテーションツールjQuery-Presentationの使い方 - 小さい頃はエラ呼吸
  • jQuery 1.4 の互換性について

    ping による疎通は確認できるのに、いざ ssh などで繋ごうとすると No route to host というエラーで即座に接続失敗し途方に暮れる場合、おそらく原因は接続先のホストiptables によりパケットがブロックされ、到達不能を意味する ICMP パケットが返ってきたことによります。 以下のコマンドで INPUT ポリシーをチェックします。上から順にマッチさせていき、マッチし次第ジャンプして終わるので、デフォルト条件の設定されていそうな一番下の行が肝心です。 # /sbin/iptables -L --verbose を追加してブロックしているポリシーのカウンタを見ながらブロック状況を観察できます。 # /sbin/iptables -L --verbose おそらく問題となっているのは INPUT ポリシー最下行で全てのパケットにマッチするこういう行です ... -j

    hisasann
    hisasann 2010/06/25
    「$() (引数なし) を$(document)と解釈するのを止めた。」
  • HTML5とjQueryで作られたビデオプレイヤー「jMediaelement」 | Web活メモ帳

    「jMediaelement」はHTML5とjQueryで作られたビデオプレイヤーです。 カスタマイズを前程に作られているようで、各ボタンを操作した際のイベントの設定など細かくできるようになっていました。 Youtubeの動画も再生できるようです。 デモ 対応動画形式 ogg (theora/vorbis), mp4/mov (H.264), WebM (VP8/vorbis), FLV 複数対応しているようで、movやflvなど再生できるようです。 デザインにはjQuery UIを使用しているようですので、テーマの変更など簡単にできそうですね。 興味のある方はぜひダウンロードしてみてください!

    HTML5とjQueryで作られたビデオプレイヤー「jMediaelement」 | Web活メモ帳
  • 画像や動画を綺麗に回転/拡大するjQueryプラグイン

    画像や動画を綺麗に回転/拡大するjQueryプラグイン:CSSの書き方も分かるjQueryプラグイン実践活用法(5)(1/3 ページ) jQueryと、そのプラグインの使い方を、UI効果(エフェクト)のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。

    画像や動画を綺麗に回転/拡大するjQueryプラグイン
    hisasann
    hisasann 2010/06/18
    カルーセル
  • DOM Ready前にイベントを設定する方法(jQuery.liveの紹介) - KAYAC engineers' blog

    健康診断で身長伸びてました。agoです。 今開発中のサイトで$().liveを中心にした実装を行っているので簡単にまとめてみました。 $().liveって? jQuery 1.3系からサポートされた、イベントハンドラの設定用methodです。 $().bindとどこが違うの? $().bindは指定されたhtml elementsに対して直接ブラウザの機能を使ってイベントを設定しますが、$(selector).liveは一旦document objectでイベントをキャッチした後、jQueryが発生元の要素とselectorをつきあわせて一致した場合イベントハンドラを呼び出します。 何がいいの? 以下のような利点があります。 DOM Readyを待たずにイベントを設定できる。 通常jQueryでは$(function () {});(DOM Ready)内で初期化を行いますが、htmlの量

    DOM Ready前にイベントを設定する方法(jQuery.liveの紹介) - KAYAC engineers' blog
    hisasann
    hisasann 2010/06/16
    FireQuery入れてたけど全然使ってなかった
  • スムーズにスクロールしないjQueryプラグイン「jDTScroll」 - Rewish

    ページ内リンクでスクロールをスムースにするスクリプトは良くありますが、アレってもっとスムーズにスクロール出来ないのかなーとか思いますよね。僕は思います。 もっとスムーズにするのは僕には難しいので、普通のスムーススクロールがスムーズに感じられるように、スムーズにスクロールしないjQueryプラグインを作りました。 ダウンロードとデモ jdtscroll.js デモを見る 導入方法 1. jQueryとjDTScrollを読み込む <script src="jquery.js"></script> <script src="jdtscroll.js"></script> 2. 実行する $() で対象にする要素を指定します。ページ内リンクなのでフラグメント識別子が付いてるっぽいアンカーを指定するのがいいですね。 jQuery(function($) { $('a[href^="#"]').jd

    スムーズにスクロールしないjQueryプラグイン「jDTScroll」 - Rewish
    hisasann
    hisasann 2010/06/11
    了解です
  • 右クリックどころかクリックすらも禁止するjQueryプラグイン jDTNeverClick :: 5509

    右クリックを禁止してるサイトありますよね?あれのうざさは僕が言うまでもないと思いますが、クリック・ダブルクリックまで禁止されてたらどうでしょう。考えただけで陶しいですね。 ユーザーのうざがってる顔が見たいという鬼畜なあなたのために、右クリックどころかクリック・ダブルクリックすら禁止するjQueryプラグイン作りました。 導入方法 1. jQueryとjDTNeverClickを読み込む 2. 実行する $()で対象にする要素を指定します。 jQuery(function($) { $(document).jdtNeverClick(); }); オプション オプションを使えば、割り当てるlistenerとアラートの表示非表示・文章を変更できます。 オプション項目 内容

    hisasann
    hisasann 2010/06/11
    え〜と、うん、はいw
  • Jquery Labs | jQuery Plugins, Menus, Tutorials, Tools

    jQuery Plugins

    hisasann
    hisasann 2010/06/09
    プラグイン一覧
  • jQueryでは「クラス」ではなく「プラグイン」を作成するらしい

    javascriptをmootoolsからjQueryに書き換えるときにちょっと迷ったのでメモ。WordPressだと標準でjQueryが入っているようなので、jQueryに統一しようと思ったのですが、実際、書換の際に非常に困ったのがクラス定義。jQueryではあんまりクラスを使わない? というか、WordPressに、とあるプラグイン入れたらjQueryが読み込まれて、「似たような機能のmootoolsとjQuery、両方読み込んでるのってなんか気持ち悪くね?」と思ったのがmootoolsからjQueryに書き換えようっと持ったきっかけだったりします。 ただ、prototype.jsやmootoolsでは、クラス定義のためのフレームワークが用意されていますが、jQueryではそれに該当するようなものがありません。「jQuery クラス」というようなキーワードで検索しても、ぴんと来るものは

    jQueryでは「クラス」ではなく「プラグイン」を作成するらしい
    hisasann
    hisasann 2010/06/01
    prototypeを意識するならクラス使いますよ。http://hisasann.com/housetect/2009/11/jquery_plugin_-_makeclass.html
  • プログラマ視点でみたjQueryの魅力 - EC studio 技術ブログ

    jQueryは、リッチなUIを簡単な記述で実装できます。 デザイナーにも理解しやすい仕様(そこも魅力の一つ!)なので、 いまやデザイナー向けにjQueryを説明するブログもたくさんありますね。 ただ、完全にデザイナー向けのライブラリなのか?というと、そうでもなく デザイナーだけではなくプログラマ視点から見ても魅力があるライブラリだと 言えるでしょう。 今回はプログラマ視点でみたjQueryの魅力と感じた点を簡単にまとめてみます。 コードがスマートになる なんといってもココに魅力を感じます! 細かく言うと以下のものがあげられます。 ・要素の操作もシンプル簡単! jQueryはセレクタを利用して要素を簡単に取得し、 エフェクトの追加やDOMの操作ができます。 (CSSとほぼ同様のセレクタを指定して 簡単にDOMの操作ができるところがデザイナーにも優しいですね!) これは、記述方法をみていただけ

  • Flashのような8種のエフェクトを選べる汎用的なjQueryギャラリー・AviaSlider

    Flash製のギャラリーなどでよく 見かけるようなエフェクトが8種 用意されているjQueryを使った スライドギャラリーのAviaSlider をご紹介します。

    Flashのような8種のエフェクトを選べる汎用的なjQueryギャラリー・AviaSlider
  • JSONをjQueryで扱う方法 : ずっと工事中

    ブログネタ:JavaScript に参加中! XMLに続いてJSONの扱い方のメモです。 概要は以下の通り。 ・JSONの取得 JSONの取得はajaxメソッドやgetメソッドでもできますが、getJSONを使った方がシンプルです。 ・エンコード指定 呼び出す側と呼び出される側でエンコードが異なる場合はスクリプトのcharsetの指定が必須です(特にIE)。 ・取得したJSONの取り扱い JSONはeachメソッドやfor文で扱うことができます。 Google Ajax Feed APIを使って任意のフィードからJSONを取得し、タイトル5件を表示する例です。 ソース とりあえずエラー処理は入れていないです。 $(function() { $.ajaxSetup({scriptCharset:'utf-8'}); //charsetの指定(デフォルトの書き換え) $('#get_feed'

    hisasann
    hisasann 2010/05/28
    エンコードがUTF-8以外の場合はレスポンスヘッダのcontent-typeのcharsetも必要だったりもします
  • jQueryにおける:first-childと:firstの違い

    jQueryにおける:first-childと:firstの違い jQueryには「:first-child」というセレクタと「:first」というセレクタが存在しており、混同されがちですが異なる意味を持っております。 例えば、次のようなHTMLがあるとします。 <ul> <li>list1-1</li> <li>list1-2</li> <li>list1-3</li> <li>list1-4</li> </ul> <ul> <li>list2-1</li> <li>list2-2</li> <li>list2-3</li> <li>list2-4</li> </ul> :first-childで指定できるのは「<li>list1-1</li>」と「<li>list2-1</li>」です。 $("li:first-child").css("color","red"); サンプル 一方:f

    jQueryにおける:first-childと:firstの違い
  • QUnit

    The powerful, easy-to-use JavaScript testing framework.Get Started View the Docs Easy Easy, zero configuration setup for any Node.js project and minimal configuration for Browser-based projects. Universal Tests can be run anywhere; Node, your browser, even inside a Web Worker. Test your code where it runs.

  • jQueryテンプレートとデータ・リンキング(そしてjQueryへのMicrosoftの貢献) - @IT

    記事は、Microsoft社副社長であり、ASP.NETやSilverlightなどの開発チームを率いるScott Guthrie氏のブログを翻訳したものです。氏の許可を得て転載しています。 jQueryライブラリは情熱的な開発者のコミュニティを持っています。そしてそれは今日、Web上で最も広く使用されているJavaScriptライブラリです。 2年前、MicrosoftがjQueryの製品サポートの提供を開始すること、および今後Visual Studioの新バージョンに含めていくことについて発表しました。デフォルトでは、新しいASP.NET WebフォームまたはASP.NET MVCのプロジェクトをVS 2010で作成すると、プロジェクトに自動的にjQueryが追加されていることが確認できます。 数週間前、MIX 2010カンファレンスでの2回目の基調講演中に、Microsoft

    hisasann
    hisasann 2010/05/13
    HTMLテンプレート、これは使いやすそうだ
  • JQuery Narrative Select Plugin by gdakram

    JQuery Narrative Select Plugin by gdakram From If this is , then you are . Date: To If this is , then you are . Date: Why, When Make your drop-down list look uniform cross-platform. Enables you to include a drop-down list as part of a 'narrative' form, where your user input fields look uniform. How <!-- CSS --> <style type="text/css"> @import url("/path/to/jquery.narrativeselect/jquery.narrativese

    hisasann
    hisasann 2010/05/12
    かっこいいプルダウンという感じ
  • jQuery vs MooTools(和訳) | 高橋文樹.com | プログラミング

    jquery.com、mootools.netwikipedia.comからの情報による モットーがすべてを語る jQueryサイトに行けば、ページのトップ付近にjQueryとはなんであるかが述べられている: jQueryは高速で簡潔なJavaScriptライブラリです。HTML文書の走査、イベント操作、アニメーション、Ajaxインタラクションをシンプルにして、Webサイト開発を高速にします。jQueryはJavaScriptの書き方を変えるために設計されました。 …そしてMooToolsに行けば、このような文言が見つかるだろう: MooToolsは中級から上級のJavaScript開発者のために設計された軽量で、モジュール化された、オブジェクト志向のJavaScriptフレームワークです。これを使えば、エレガントで、きちんとした裏付けのある、一貫したAPIにより、パワフルに、柔軟に、そ

    jQuery vs MooTools(和訳) | 高橋文樹.com | プログラミング
    hisasann
    hisasann 2010/05/11
    なかなかな長文だけど、面白いな〜
  • Zoomooz.js

    Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Download ZIP File Download TAR Ball Fork On GitHub Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Quirky

    hisasann
    hisasann 2010/05/11
    クリックされたElementをセンタリング系プラグイン?
  • jQuery Circulate

    Prereqs Requires the jQuery Library as well as the Easing plugin. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <script type='text/javascript' src='js/jquery.easing.1.2.js'></script> <script type='text/javascript' src='js/jquery.circulate.js'></script> Usage / Options / Defaults $("#anything).circulate({ speed: 400, // Speed of each qu

    hisasann
    hisasann 2010/05/11
    カルーセル、くるくる