実践、jQuery 第1回 .on()と.off()を使いこなす 1 jQuery 1.7から実装された.on()と.off()メソッドを取り上げます。jQueryオブジェクトに対してイベントの定義を行う機能をきちんと理解して、イベントを自在にコントロールできるようになりましょう。 はじめに この『実践、jQuery』シリーズは、jQueryを使った実装がある程度できるようになったエンジニアが、さらにjQueryへの理解を深めていくためのシリーズです。 今回は、jQuery 1.7*から実装された.on()と.off()という2つのメソッドを取り上げます。これらのメソッドが担う、jQueryオブジェクトに対してイベントの定義を行うための機能をきちんと理解することで、イベントを自在にコントロールできるようになることを目的としています。 *注：jQuery 1.7 jQuery 1.7は201
PHPでプログラムをバリバリ書いている方なら御存知かもしれませんが、あるPHPファイルのプログラムを眺めていたら見なれない一文がありました。そのソースはこれ。 $hoge = file_get_contents( 'php://input' ); 「php://input」って何じゃ？ 上記プログラムについてちょっと調べました。私のように知らない方のために明記しておきますが、もし、知っている方はスルーしてください。間違っても悪口を書かないように(^^ゞ 早々に調べてみると、まずはfile_get_contents()関数です。これはすぐに見つかりました。PHPのドキュメントを見るとこちらに ファイルの内容を全て文字列に読み込む と、書かれています。ドキュメント内にも「file()関数と似ている」と書かれていますが、file()関数よりも取得する内容などを細かく設定できます。 さて、問題は「
Toast.js is an ultra-light and easy to use jQuery plugin to show Android style toast messages with support for auto position, custom dismiss timeout and message queue. How to use it: 1. Place jQuery JavaScript library and the jQuery toast.js script at the end of the document. <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="toast.js"></script> 2. Initialize the toast plu
jQueryはとても便利なプラグインです。 JavaScriptの普及を助けたといっても過言ではありません。 jQueryのおかげで煩雑なコードをかかずに綺麗なコードで色々なものが作れるようになりました。 今回は少し忘れやすい、jQueryでフォームから値を取得する方法をまとめていきます。 テキスト よく使われる1行のテキストボックスです。 これはとても簡単でform要素に .val() で値を取得することが出来ます。 HTML <form id="test-form"> <input type="text" name="test-form" value="56"> </form> JavaScript var formValue = $('#test-form [name=test-form]').val(); var val = Number(formValue) || 0; // N
jQueryを使ってWebページ上で何かアクションを実装する際、 リンク＜a＞タグをクリックすることでエフェクトを実行させることはよくあること。 その際、別ページへ遷移するわけでも、ページ内リンクを使うわけでもない場合に リンク＜a＞タグの属性「href」の飛び先の指定に困ることがあることも。 結局「href=”#”」でごまかしたり、「href=”javascript:void(0);”」としたり。 その様な場合に使えそうな、 クリックされたリンク＜a＞タグの「href」を無効にする方法があったのでメモ書き程度に紹介してみます。 サンプルでは、リンク用の＜a＞タグの「href」属性が 以下の様な「href=”#”」の場合とします。 ◆HTML <a href="#">アクション実行用リンク</a> このソースの場合の、リンクテキストをクリック後に 「href」属性を無効にするスクリプトは以
以前配列にある値が存在するかどうかをfor文を使わずに調べる方法を考えてみたという記事を書きました。この記事は「やろうと思えばこういう方法でもできるなぁ」というアイデアについて書いた記事だったのですが、Javascriptで配列にある値が存在するかどうかを確認する一般的な方法を探して当該記事を訪問していただくことが多いので改めてこの方法について書いてみたいと思います。 といってもJavascriptには"Array.contain"のような「まさにそのためにある」というメソッドが用意されているわけではないのでいずれにしろ方法の紹介ということになってしまいますが。 次の3つのパターンに分けて書きたいと思います。 ECMAScript 5が使える場合 jQueryが使える場合 上記のどちらも使わない場合 1.ECMAScript 5が使える場合 ECMAScript 5では配列に"indexO
ウェブサーバーにあるCSVの内容をクライアントで見るため、jQueryを使い、 $.get('data.csv', function(data) { var csv = $.csv()(data); $(csv).each(function(index) { // 読み込んだデータを処理 // ： }); }); のようなことをしています。 最近CSVファイルの容量が大きくなってきて、 ウェブサーバーにCSVをFTPアップロードするのに時間がかかるようになったため、 CSVをZIP圧縮して上げることとなりました。 そこでクライアント側でも、 $.get('data.csv', function(data) { の部分のファイル名をZIPファイルのものにして、 $.get('data.zip', function(data) { として、ZIPファイルを読み込むように修正しました。
Please follow the naming convention below. 増減させる対象のエリア、追加ボタン、削除ボタンのCSSクラス名は、 命名規則に従うことでプラグインに渡すオプションの数を減らすことができます。 HTML <ol id="list"> <li class="list_var"> <input type="text" size="40" name="list_0" id="list_0"> <button class="list_del">Delete</button> </li> </ol> <input type="button" value="Add" class="list_add"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="jq
Bootstrapは、便利なWebライブラリだ。 Bootstrap · The world's most popular mobile-first and responsive front-end framework. via kwout PC/スマートフォン解像度に合わせて自動的にレイアウトを変えてくれるし、いまどきなフラットデザインな整ったボタンとかフォーム系・ナビゲーションバー・グラフィコン等々がすぐ使える。 Bootstrap3からはOff Canvasにも対応していて、描画領域が狭い時はスマートフォンアプリにありがちなメニューが横から出すことも可能になった。 そこで、Off CanvasメニューなPC/スマートフォンにも両対応させたいWebアプリでBootstrap3を使いたいと組んでいます。 Bootstrapでoffcanvasメニューを作る方法 | Designup vi
索引 └ サンプル目次 1章：短編集 ├ スイッチの作成 ├ キャプションの表示 ├ スムーススクロール(1) ├ スムーススクロール(2) ├ タブメニュー(1) ├ タブメニュー(2) ├ タブメニュー(3) ├ タブメニュー(4) ├ カテゴリ切替(1) ├ カテゴリ切替(2) └ カテゴリ切替(3) 2章：診断系コンテンツ ├ 選択肢の作成(1) ├ 選択肢の作成(2) ├ 選択肢の作成(3) ├ 質問の切替(1) ├ 質問の切替(2) ├ 点数計算 ├ 結果の表示 ├ 外部テキストの読込 └ もう一度ボタン 3章：製品抽出系コンテンツ ├ 構成の確認 ├ 回答の確認 ├ 点数表の作成 ├ 得点の集計(1) ├ 得点の集計(2) ├ 結果画面の作成(1) └ 結果画面の作成(2) 番外：Simulation Game ├ 地形データの読込 ├ ユニットの移動 ├ 敵ユニットの扱い
どうもこんばんは！Toshikuraです。今回のtipsは【簡単！RSSを取得&表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法】です。最近ちょくちょく使ったのでメモしておこうかと思いました。 RSSの取得&表示について 一例ですがこの「RSSの取得&表示」は、書いているブログと異なったサイトに記事一覧を表示させる際に便利な方法です。通常ですとクロスドメインの制限で記事一覧を表示させるのは若干手間ですが【Google Feed API】を使う事で簡単にこの問題を回避できます。 前置きが長くなりましたがコード例は以下になります。 ・JS <script src="js/jquery-1.X.X.min.js"></script> <script type="text/javascript" src="https://www.google.
Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ブラウザ内のDOMに５０万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM構造を50万件作るのではなく、スクロールに応じてDOM内を書き換えているのがその仕組のようです。 大量のデータをブラウザ上で一気に表示したい場合に便利そうです 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 レスポンシブに要素を消さずに変形するテーブル
Webベースの業務システムを作っていると度々データを一覧で表示する機会があります。そんな中で度々あがってくるのが一覧の時点でデータ編集したいという要望です。 In place editのような仕組みを使って作り込んでも良いですが、専用の仕組みを使った方がユーザビリティ高くできるはずです。そこで使ってみたいのがjQuery editTableになります。 最初の表示です。適当にセルをクリックします。 そうするとその場で編集可能になります。 行の追加もできます。 ポストすると各行ごとにデータが入ってくるのが分かります。 Ajaxの場合もJSONの配列で受け取れます。 日付選択に際してカレンダーピッカーを使うこともできます。 行の追加できる数を制限した場合。3行追加した時点でボタンが押せなくなります。 jQuery editTableの使い方は以下のようになります。 var mytable =
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.
AmazonのWebAPI（Product Advertising API）を利用して書籍を検索して結果を表示するだけの単純なプログラムをPHPとjQueryで作成したときのメモです。 Amazon Product Advertising APIのサンプルコード Webサービス：Product Advertising API データ形式：XML 利用ガイド：ライセンス契約 利用時の登録：必要 AmazonのWebAPI（Product Advertising API）を利用する場合、アクセスするためにいくつか方法があるようですが、下のリンク先のサイトにあるPHPコードを利用するとAPIにアクセスできて利用できます。 Sign Amazon Product Advertising API REST Requests with PHP and Python 上記リンク先にあるPHPプログラムを
Gridmanager Demos 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」。 次のようにカラムごとにツールを付与して、コンテンツを追加したり消したり、移動できたり、幅を調整したりとかなり高度な事が誰でも簡単にできるUIが実現可能です。 jQueryプラグインの形で誰でも簡単に実現できるところがすごい。複雑なレイアウトのサイトであっても見たまま編集ができるというのはよさそうですね。 ライブプレビューも可能 レスポンシブにも対応 関連エントリ 軽量でシンプルデザインなWYSIWYGエディタ実装ができる「Trumbowyg」 Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」 オンラインで使えるWYSIWYGなCSS3コードジェネレーター「Enj
郵便番号から住所を自動補完してくれるライブラリのご紹介。他にもいくつかありますけど使いやすかったので備忘録として。 よくあるやつ。メンテも不要との事なので助かります。 <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script> <script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script> ライブラリはgooglecode.comにホストされているものを直接読み込みます。 $('#postcode1').jpostal({ postcode : [ '#postcode1', '#postcode2' ], address : { '#a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
