業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
![20160930 フロントエンド高速化 業務編 (社内勉強会)](https://cdn-ak-scissors.b.st-hatena.com/image/square/106054fad5c72b8092c604b4457d21e4a78e6bea/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2F20160930frontend-161003102113-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
Web2.0と言われ始めた時代に、Ajaxという手法が広まりました。今ではAjaxを使っていないウェブアプリケーションを探すのが難しいくらい、Web開発の現場には浸透していると思います。もちろん、Ajaxを知らなくてもウェブアプリケーションは作れますが、これは使い心地を意識すれば自然と必要になってくるものです。 この記事では、実際に簡素な掲示板アプリを作りながら、現在ほとんどのウェブアプリケーションで使われているAjaxという手法を紹介していきます。ちなみに、タイトルの「100行で」というのは今回書いたapp.rb、index.erb、schema.sqlの3つのファイルのトータルがおよそ100行だという意味です。数字をタイトルに入れると読んでもらいやすいという話をどこかで聞いたので入れてみました。 ソースコードはGithubにも置いておきました。 gaaamii/ajax_sample
jQueryでjsonデータを扱ってみる【入門編】 javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して(入門編しかない!)改めて基礎から勉強していけたらと思います。 投稿日2010年07月25日 更新日2016年04月26日 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:(コロン)」で区切ったキーと値を一組として、2組目を「,(コンマ)」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェクトとして扱い
createElementでscriptタグを作成してheadに入れる 一般的に広く使用されている方法。 var script = document.createElement("script"); script.setAttribute("src", "hoge.js"); document.getElementsByTagName("head")[0].appendChild(script); JQueryでscriptタグを作成してheadに入れる JQueryを使用した方法。チェーンメソッドで拡張可能。 $("<script>") .attr("src", "hoge.js") .appendTo("head"); JQueryの$.getScriptで読み込む 同じくJQueryを使用した方法だがコードは1行で済む。 $.getScript("hoge.js");
To get started, simply install jquery.dynatable.js (along with jQuery), and add the following in the document.ready or after the table: Read / Normalize The HTML table is scanned and normalized into an array of JSON objects (or collection) where each JSON object (or record) corresponds to a row in the table. Operate The JSON collection can be sorted, searched/filtered, and paginated/sliced. Write
ネタ元:mootoolsとjQueryを一緒に使う方法 | チバのブログ 以前から試してみよう、試してみよう!と何度も思ってやってこなかったことで、 jQueryとMootoolsを同時にしようしたい!という気持ちがあった。 jQueryとprototypeの同時使用は以前から知っていたのですが、 同じ方法でjQueryとMootoolsの同時使用ができるのですね! jQueryは指定とかが簡単なライブラリだけど、 いろいろな動作をさせるにはmootoolsの方が動きが綺麗だなと思っていた。 海外のサイトではjQueryも使われているが、 なんとなくMootoolsも多く使われている印象があったので、 今後の参考として、同時に使う方法をメモとして残しておきます。 ポイントは指定の順番らしい ライブラリを読み込む順番が重要で、 順番通りに書かないとエラーで動作しなくなるようだ。 指定の順番は
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
jQueryモーダルウィンドウプラグインで有名どころの「ThickBox」。 使い勝手がとても良く、さまざまな応用が効くプラグインで結構使う頻度が高かったりします。 ◆ThickBox ≫jQuery ThickBox 3.1 ですが、このプラグインでは残念な点としてThickBoxとして開いたウィンドウよりブラウザ枠を縮めると ThickBoxウィンドウの上下がブラウザから見切れてしまう現象に陥ってしまいます。 そんなThickBoxの使いづらい部分を何とか制御してみようと試した結果を ちょっと紹介してみます。(始めに言っておきますがIE6非対応です。。。) まずはThickBoxプラグインをそのまま使用した場合のサンプル。 ≫ThickBox Default 画面に表示されるサムネイルをクリックすることで、ThickBoxウィンドウが表示されます。 表示されるThickBoxウィンドウ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 先日、ブログパーツ作成フレームワーク 爆速JSONP をGitHubにて公開しました。2012年8月にYahoo! JAPANのソフトウェアガイドラインをライセンスとするバージョンを公開しましたが、オープンソース化に伴い、CDNで配布しているファイルもGitHub版に差し替えています。(インターフェースは互換性を保っています) yahoojapan/bakusoku-jsonp · GitHub CDN版: https://s.yimg.jp/images/yjdn/js/bakusoku-jsonp-v1.js CDN版(圧縮済み): https://s.yimg.jp/images/yjdn/js/bakusoku-jsonp
1行間隔で行の背景色を変える widgets プロパティに zebra を指定すると、1行間隔でテーブル行の背景色を入れ替わり表示できます。 jQuery(function($) { $('#r4').tablesorter({ widgets: ['zebra'] }); }); //jQuery tr 要素のクラスに even と odd が交互に付与されるので、スタイルシートを使って even と odd の背景色を指定します。 table.tablesorter tbody tr.odd td { background-color:#F0F0F6; } # 都道府県 フリガナ ふりがな ローマ字
Webアプリケーション開発をしていて、後からソート機能を追加しようと思うと、結構面倒なものですね。 その面倒をJavascriptで解決できないかと考えて探して見つけたのが、この「Table sorter」です。 この「Table sorter」を使えば、少しのコードを追加するだけで、簡単にテーブルにソート機能を付加できます。 使うか否より、まず デモ をご覧ください。 「Table sorter」のダウンロードDownload からFull releaseの物をダウンロードできます。 要らないものは、個々消してください。(私は実装時に殆ど消し、CSSの内容も位置も変えましたけど。) ダウンロードしたファイルは、今回はサンプルとして [site_root]/js/tablesorter/ に解凍するとします。 「Table sorter」の使い方このスクリプトは設置がとても簡単です。 ・T
目次 jQuery入門 jQueryのインストール・簡単な使い方 クイズゲームの作り方 秘密の暗号を作ってみよう(たぬき暗号) アクションゲームを作ってみよう(ぬりかべ) 画像を使ったジグソーパズルを作ってみよう もぐらたたきっぽいゲーム ドラッグ可能なポップアップウインドウを作ろう jQuery UI Sortableで1ラインオセロゲーム ブラウザ全体をブロックしてみる Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする 発生したイベントの状態を保持・保存する6つのパターン Ajaxを利用したシンプルなイメージギャラリーを作ってみる テーブルにページ送り(ページング)を実装してみる jQuery UI Draggableを使って付箋(sticky)を作ってみる カラムでソートできるテーブルを自作してみる テーブルを使ったシンプルなドット絵エディ
built by fresh tilled soil hello hola bon giorno ni hao guten tag namaste hello bonjour hola bon giorno ni hao chao guten tag namaste bonjour hola ni hao chao guten tag namaste hello bonjour hola bon giorno
Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. jQueryAutoHeight.js とは jQueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。高さのそろえ方は、次の2通りです。 セレクタで指定したすべての要素を、その中の最大値にそろえる セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる(1行ごとにそろえられる) サンプル 複数のボックスの高さを最大値にそろえるjQueryプラグイン ダウンロード Releases · tinybeans/jQueryAutoHeight ※jQuery 1.9 以降で利用する場合は v0.04 以降をお使いください。 使い方 ファイルの読み込み ダウンロードしたファ
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
tablesorter.com 2024 著作権. 不許複製 プライバシーポリシー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く