タグ

jQueryとJQueryに関するreponのブックマーク (123)

  • http://lagoscript.org/jquery/autopager/demo

    See related links to what you are looking for.

    repon
    repon 2013/07/16
  • スクロールするだけでコンテンツを読み込むプラグイン「jQuery.autopager」 | SHINGO IRIE

    よく見かけるページングの処理で、下の方にスクロールすると自動的に次ページを読み込ませる処理をかんたんに実現してくれるjQuery.autopagerが便利でした。jQueryプラグインです。 導入がかんたんで分かりやすく、オプションも必要最低限のものがバッチリ揃っています。例えば、スクロールで下部までいったら自動的に次コンテンツを表示させるか、それともボタンをクリックして読み込むか、読み込み後にコールバックで関数を読み込ませるか、などなど。 jQuery.autopagerの導入方法まず、jQuery体とダウンロードしたjQuery.autopagerを読み込んでおきます。 そして、スクロールで自動表示させるなら下記だけでOK。 <script type="text/javascript"> $(function() { $.autopager(); }); </script> <div

    スクロールするだけでコンテンツを読み込むプラグイン「jQuery.autopager」 | SHINGO IRIE
    repon
    repon 2013/07/16
  • 橋本商会 » Sinatra+Haml+jQuery入門

    研究室の後輩にSinatraとhamlとjQueryを教えるために作ったテンプレートについて、ここにも書いておく ソースコード https://github.com/shokai/sinatra-template 実際動いているもの http://masui.sfc.keio.ac.jp/sinatra-template/ git clone git://github.com/shokai/sinatra-template.git ■Sinatraを何に使うか Sinatra+haml+jQueryが便利。 Railsと似てるけど、ちょっと違う。 個人的には RailsHTMLのページをいっぱい作るのに便利 Sinatra → 画面遷移あまりしなくて、同じURLのままjsonのAPIをjQueryのajaxで取得して動的に表示を変えるwebページを作るのには便利 に感じる。 でもSi

  • GitHub - erosb/jquery.observable: A plugin that changes a data structure built from plain JS objects into an observable structure with jQuery-style accessors and event listeners.

  • GitHub - BorisMoore/jsviews: Interactive data-driven views, MVVM and MVP, built on top of JsRender templates

    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 - BorisMoore/jsviews: Interactive data-driven views, MVVM and MVP, built on top of JsRender templates
  • jquery.cookie.jsが便利 | NeGiMeMo.net

    bell賞味期限切れコンテンツ この記事は公開または最終更新から1067日くらい経過しています。 このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。 公官庁のウェブサイトなどでよく見かける、文字サイズを変更するスクリプト。 コード自体は昔それっぽい記事を書きましたのでその時に使ったのと似たような方法で実装する予定ですが、そのスクリプトだけだとページを遷移した場合、設定が初期状態に戻ってしまいます。 大抵の場合文字サイズを大きくして読み始めた人は他のページでも大きな文字で読むでしょうから、これでは不便ですよね。 そこで、cookie等を利用してブラウザごとに文字サイズの設定を記憶させる必要があります。 cookieを利用する方法はいくつかあるようなのですが、今回は jquery.cookie.js というjQueryから操作できる

    jquery.cookie.jsが便利 | NeGiMeMo.net
  • jQuery.ajax()のまとめ

    jQuery.ajax()について逆引きリファレンスっぽくまとめてみました。 まとめた理由は、ネットで「jQuery.ajax」や「jQuery.ajax サンプル」などで調べても、いい感じの内容がなかなかヒットしないことと、よくヒットするサイトの情報が古かったりする(1.4で止まっているとか)ためです。 ということで、2012年10月現在2014年10月現在の「jQuery.ajax()」などをざっと調べて作ってみました。 初心者向けの内容です。すべてのオプションは網羅できていません。とりあえずサンプルコードがほしい方は15項をご覧ください。 若番から必要と思われるものを順番に並べているつもりですが、後半は適当です。また、各項のサンプルはなんとなく積み上げていく感じにしています。 調べている間にも3つくらい新しい発見(といっても古い情報ですが…)があり、jQueryが日々進化していること

  • CoffeeScriptでjQuery使うときのメモ

    CoffeeScriptでjQuery使うときのメモ CoffeeScriptでjQuery使おうと思ったらいろいろと戸惑ってしまったのでメモです。 投稿日2012年11月19日 更新日2012年12月24日 とりあえずCoffeeScriptでjQuery使えるようにする JSでjQueryのコードを書き始めるとき「$(document).ready」を省略した形で下記のように書くことが多いと思います。 JavaScript $(function() { // jQueryスクリプト }); これをCoffeeScriptにするとこうなります。 CoffeeScript $ -> # jQueryスクリプト これでjQueryがいつものように使用できますので、あとはさくさく書けると思います。 試しに「p」のテキストカラーを赤にしてみます。 CoffeeScript $ -> $('p')

    CoffeeScriptでjQuery使うときのメモ
  • 【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ

    【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ このブログでは、HTML5+CSS3+Javascriptなどの情報を定期的に提供していきます。 運営企業:株式会社ニーロク(http://i26.jp/)

  • テーブルをソートできるようにするjsライブラリ-table sorting

    テーブルをソートできるようにするjsライブラリ-table sorting Check Tweet 配布元:Table sorting JavaScript ライセンス:MIT license バグ修正&日語対応版 配布元:to-R[とあるWebクリエイターのblog] table sortingはテーブルをソートできるようにするjsライブラリです。 テーブルの内容でソートしたり、奇数行、偶数行にそれぞれ異なるclassをつけたりが可能です。 設置方法 ダウンロードしたsortable.jsをhead要素内なので読み込みます。 <script type="text/javascript" src="sortable.js"></script> ソートの対象のtable要素のclass属性をsortableに設定して、任意のID名をid属性につけます。 <table class="sort

  • jQuery UI の Slider による、数値範囲をGUIで設定するスライダー

    jQuery UI の Slider プラグインを使い、数値の範囲をGUIで設定するスライダーを作る方法。数値の範囲をGUIで設定するスライダーを作るには、values、min、max、range オプションなどを使う。 実装例(サンプル) 範囲: 実装例(サンプル)について 初期値、最小値、最大値に下の値を設定してある。 初期値: 1001 ~ 3000 最小値: 0 最大値: 10000 実装例(サンプル)の動作について スライダーの2つの四角のハンドルをドラックして、トラック上を移動させることができる。 左のハンドルで、範囲の小さい値の方を指定。右ののハンドルで、範囲の大きい値の方を指定。 トラック上をクリックすると、ハンドルを、その場所へ、移動させることができる。 スライダーに合わせて、「範囲:」の右横の数値が変化する。 実装例(サンプル)のソースコード 読み込み パスは、それぞれ

    repon
    repon 2013/03/25
    スライダー
  • jQuery UI 1.10 日本語リファレンス | js STUDIO

    このサイトについて jQuery UIの日語リファレンスです。 jQuery UI家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 このリファレンスではjQuery UIのバージョンは1.8以上を対象としていますので、それ以前のバージョンについては当てはまらない 箇所もあると思いますので注意してください。 また、1.8以降のバージョンによる違いについて、なるべく記述しているようにはしていますが、内部処理やclass名の変更等、全ては書ききれてはいないので、 詳細について知りたい場合は公式サイトでの確認をお願いします。 jQuery UI 1.9アップグレードガイド(英文) jQuery UI 1.10アップグレードガイド(英文)

  • jQuery 1.9 で変わったところを調べてみる。 | バシャログ。

    引越しの準備がままならないminamiです。 jQuery1.9 が正式にリリースされました。すでにベータ版として発表されているjQuery 2.0 はIE6/7/8に対応しないことを謳っているため、これらのブラウザ対応をする場合は1.9 を使っていくことになりますね。 jQuery1.9 で変更があった機能を見ていきたいと思います。 どう変わったの? jQuery 1.9でアップグレードされた機能は下記ページにまとまっています。 jQuery Core 1.9 Upgrade Guide 主要なところを抜粋してみます。 toggle(function,function,...) の廃止 間違えそうですが、表示/非表示のtoggle()は使えます。 jQuery.browser() の廃止 だいぶ前からなくなるよ、と言われていましたが、とうとう廃止に。jQuery.supportや、Mod

    jQuery 1.9 で変わったところを調べてみる。 | バシャログ。
    repon
    repon 2013/01/22
  • これは超使いやすいページネーションの次世代UI:phpspot開発日誌

    Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ&ドロップでページ指定が簡単に出来ます。 30までドラッグ&ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合

  • iPhoneやiPadでドラッグやリサイズ可能なコンテンツを容易に実装出来る・jQuery.ui.touch-punch.js - かちびと.net

    iPhoneiPadのタッチイベントに 対応させるjQueryプラグインです。 軽量なんですが、jQueryUI併用な ので一応軽量とは謳わないように しておきます。導入も結構簡単 なので覚えておいて損は無いかも。 iPhoneiPadでドラッグやリサイズを可能にするライブラリです。もちろんiPhoneだけでなく、PC側でも動かせます。 ただ、要素をドラッグしたりリサイズしたり、だけではなくドラッグ可能なコンテンツをネストしたりドラッグコンテンツ内にスライダー入れたりとかも出来る。 試しにjQueryMobileと併用しました。サンプルどうぞ。QRコードも用意しときました。 sample 使い方 <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script> <script src="http://code.jque

    iPhoneやiPadでドラッグやリサイズ可能なコンテンツを容易に実装出来る・jQuery.ui.touch-punch.js - かちびと.net
  • Youtubeの動画を背景に

    Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp

    Youtubeの動画を背景に
  • jQueryコーディングの基本的なことからプラグイン化までの注意書き(Webデザイン)

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

  • [JS]jQueryのプラグイン33+1選 -2012年4月

    紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Wookmark コンテンツをレンガ状に配置するだけのシンプルなスクリプト。 jmpress.js スライドをダイナミックなアニメー

  • かわいらしいツールチップ

    デモページ:Big Yellow Sweet Tooltipの使い方 外部ファイル スタイルシートをhead内に、スクリプトをページの下部に外部ファイルとして記述します。 <link rel="stylesheet" href="sweet-tooltip.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sweet-tooltip.js"></script> HTML ツールチップはa要素を使用して実装します。 <a href="#" class="sweet-tooltip" data-style-tooltip="style name" data-text-tooltip="Tooltip's text to be disaplayed"

  • ドラッグ&ドロップで並べ替えた順番を送信

    jQuery UI の Sortable プラグインを使い、ドラッグ&ドロップで並べ替えた順番を、送信する方法。 「この並び順を送信」ボタンを押すと、「この順番でよろしいですか?」という確認ダイアログが出現し、「OK」を選択した場合、項目IDを送信する。 実装例(サンプル) 項目名 A (項目ID:1) 項目名 B (項目ID:2) 項目名 C (項目ID:3) 項目名 D (項目ID:4) 項目名 E (項目ID:5) 実装例の動作について 「項目名 A」をドラッグして、下へ動かし、「項目名 B」の上に持ってくると、「項目名 B」が上へ移動し、「項目名 B」と「項目名 C」の間にスペースができる。そのスペースへドロップすると、「項目名 A」と「項目名 B」が入れ替わり、「項目名 B」「項目名 A」「項目名 C」…の順番になる。 「この並び順を送信」ボタンを押すと、 項目名 B (項目ID

    repon
    repon 2012/11/05