タグ

Javascriptとwebに関するbaba_jdlのブックマーク (25)

  • コンテンツを自動的に読み込んで無限スクロールさせる方法【jQuery連載13】 | HTML5でサイトをつくろう

    フォトギャラリーなどでページをスクロールして、次の写真を見る際などに、クリックで続きを見るなどもあるが、ここでは特定の枚数を読み込んでスクロールした際に次の読み込みたい内容を自動的に読み込む形を作成してみます。 こうすることによってクリックすることなくサイト全体の写真を見ることなども可能となります。 ウェブページを下にスクロールし続けていくと、ページを遷移せずに次に来るべきコンテンツを自動で読み込んで同じページに表示し続け、あたかも無限にスクロールし続けるような仕組みは一般的に「無限スクロール」と呼ばれ、Twitterをはじめ、SNSのFacebookやGoogle+、画像共有サービスのPinterestなど大手ウェブサービスで導入されている。 今回はこの「無限スクロール」の仕組みを、その手軽さから多くのサイトで導入されているInfinite Scrollプラグインで実装してみよう。 今回

    コンテンツを自動的に読み込んで無限スクロールさせる方法【jQuery連載13】 | HTML5でサイトをつくろう
  • suggest.js - 入力補完ライブラリ

    Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (【お知らせ】ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES

    baba_jdl
    baba_jdl 2016/06/14
    予測変換
  • JSONとJSONPの違い - あと味

    解説は他にもたくさんありますが、私自身も使いはじめの頃、違いがよくわからなかったので。 JSONとは? 汎用的なデータ記述方法です。こんな感じで書きます。 { 'blog' : 'あと味', 'author' : 'jdg' } まさにJavaScriptのオブジェクトですね。*1 JSONPとは? JSONを以下のように変えたもの。 callback({ 'blog' : 'あと味', 'author' : 'jdg' }); 関数呼び出しっぽいですね。まぁ、関数呼び出しなんですけど。 どゆこと?となるポイント 見た目が関数っぽくなる意外に変更点はないように見えますが、クロスドメインでJSONを読み込む時は、なぜかJSONではなく、JSONPが使われます。(WebAPI等) また、アクセスしたらJSON形式のデータを返す単純なCGIを自分で作りたいと思った場合でも、JSONを返しても、J

    JSONとJSONPの違い - あと味
  • HTTPサーバーとWeb開発

    最近では、Webアプリケーションの開発を行う上で、Ajaxはあたりまえのように使用される クライアントサイドの技術になった。 この技術により、次のようなことが実現することができ、今までにないリッチなWebアプリケーションを 開発することが可能になった。 動的なWeb画面の表現 パフォーマンスの向上 Web画面のユーザビリティー しかし、Ajaxを使用する上で必ず考慮すべき点がある。それがクロスドメインの制約である。 クロスドメインとは、下記のようにAサーバーから既に読み込んだWebページ上より、 異なるドメインのサーバー(Bサーバー)に Ajax(XMLHttpRequest)を用いてデータアクセスを行なうと、 ブラウザーのセキリュティーエラーが発生しAjax通信を行なうことができないという問題がある。

    HTTPサーバーとWeb開発
  • ノンプログラマーのためのjQuery入門

    kanazawa.js v1.0 〜JavaScriptコトハジメ〜(2011年2月5日開催)で使用したスライドです。Read less

    ノンプログラマーのためのjQuery入門