Gallery lumber-mill - 連動するセレクトボックス
一方の選択状態に応じて、もう一方の選択内容が変化するセレクトボックスをJavaScriptで実装した例です。全て場合の選択肢を配列で保持しています。選択肢が非常に多くなる場合は、サーバとの非同期通信も必要になるでしょう。 動作例 コード 関数定義(JavaScript): function updateCombo(){ var combo1 = document.getElementById("combo1"); var combo2 = document.getElementById("combo2"); // combo2.removeAttribute("disabled"); // didn't work combo2.disabled = false; for(i = combo2.childNodes.length-1;i >= 0;i--){ combo2
prototype.js を使ったスターレイティング（JavaScript 星評価）
YouTube や Amazon、livedoor Reader でコンテンツの評価に使われているスターレイティングを prototype.js を使って割と汎用的に実装してみました。 http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/ などには高機能なライブラリがあるようですが、とっつきにくいので自作しました。順を追って説明していきます。 準備と前提条件： prototype.js（今回は ver1.6）を使用します。 http://prototypejs.org/ からソースをダウンロードしておきましょう。5段階の星を表現するために、未選択のものを含めて 6つの画像が必要です。私は http://iconlet.com/ から素材を入手してペイントで加工しました。（サンプル：、使った
利用サンプル - JSONP入門
そもそもJSONPとは、javascriptからHTTPを通じてリクエストを投げ、データ受け取るための仕組みです。 これを使う事により、javascriptのみでデータをやり取りすることが出来るので、TAGGYなどが公開しているAPIを使えば、簡単にWEBアプリケーションを作成することが出来るようになります。 具体的に説明するとJSON(JavaScript Object Notation)を用いた関数呼び出しの仕組みのことです。 ※JSONはCSVのような軽量なデータ記述形式の一種です。 このような仕組みとしては他にXMLHttpRequestがありますが、XMLHttpRequestは、異なるドメイン間でデータのやり取りをすることが出来ません。 １．まずは、JSON形式とは具体的にどのようなものか見てみましょう。 以下のように最もシンプルな例は、プロパティ名とその値をコロン(:)で
JavaScript のチートシートいろいろ:phpspot開発日誌
JavaScript のチートシートいろいろ。 JavaScript Cheat Sheet Addison-Wesley's JavaScript Reference Card JavaScript Quick Reference JavaScript and Browser Objects Quick Reference JavaScript in 10 Minutes 以前に紹介したものもふくまれていますが、他にもいろいろあるようです。 印刷しておくと便利そうですね。
郵便番号から住所をセット - satake7’s memo
郵便番号を入力して『住所検索』ボタンを押したら Ajaxでサーバに問合せにいって、コントローラで郵便番号辞書から住所を引っ張って返すというのを作ろうと思って、「待てよ、そういうのって巷に溢れてるんじゃないか？」と思ってググったら、すごくいい JavaScriptのライブラリが見つかったので、これを使わせていただくことにしました。 AjaxZip2のインストール こちら(→ AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版） )がそのライブラリです。onKeyUpイベントに仕込むようになっているので、『住所検索』ボタンみたいなものは必要ありません。 インストールといっても特別難しいことはなにもなく、一括アーカイブファイルをダウンロードして、適当に展開するだけですが、一応、Railsに組み込む場合の構成を書いておきます。(この通りにすべきというわけではありません
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
郵便番号から住所を検索する #1 - with jQuery - Postal Search Ajax API サンプル - Postal Search APIs & Solutions
jQuery lookup プラグイン を使って、指定した郵便番号の住所を検索し、その結果をリスト表示します。 <script type="text/javascript"> //<![CDATA[ jQuery(function($) { jQuery(document.f) .submit(function() { jQuery('#r') .empty() .lookup(document.f.c.value, function(response) { jQuery.each(response, function() { jQuery('<li>') .text(this.a + ' (' + this.k + ')') .appendTo('#r'); }); }); return false; }); }); //]]> </script> <form name="f"> <in
tableのヘッダ固定やソートとかのAjax系ライブラリまとめ - Cyokodog :: Diary
１週間かけて食中毒もなんとか直ったのでブログ再開します。（もうこりごりです....） 例のごとくはてブをすっきりさせたいのでtable関連のリンクをこちらにまとめてく予定です。まだまだありそうですが、おいおい追加してきます。 コアライブラリ非依存系 Table Sorter ソート | MOONGIFT | demo table sorting ソート | to-R | demo OrderByColumn ソート | PHPSPOT | demo sorttable ソート | MOONGIFT | demo SortedTable ソート | demo TableKit ソート、編集 | PHPSPOT | demo Tiny Table ソート、縞々、ページング | coliss | demo Scrollable HTML table ヘッダ固定 | PHPSPOT | demo
Flexigridのサイトを見つけられない人へ
► 2018 (1) ► 1月 (1) ► 2017 (4) ► 6月 (3) ► 5月 (1) ► 2016 (15) ► 12月 (4) ► 11月 (1) ► 10月 (2) ► 7月 (3) ► 6月 (1) ► 5月 (3) ► 1月 (1) ► 2015 (13) ► 12月 (1) ► 10月 (1) ► 9月 (1) ► 6月 (1) ► 5月 (1) ► 3月 (2) ► 2月 (3) ► 1月 (3) ► 2014 (11) ► 12月 (1) ► 9月 (2) ► 8月 (2) ► 6月 (1) ► 4月 (4) ► 2月 (1) ► 2013 (15) ► 12月 (3) ► 11月 (3) ► 8月 (2) ► 7月 (4) ► 5月 (1) ► 4月 (2) ► 2012 (7) ► 10月 (1) ► 7月 (1) ► 4月 (3) ► 1月 (2) ► 20
テーブルの表を伸縮させるjavascript「ElasticTable」
テーブルで多くの項目を作りたいけどスペースが・・・ という悩みは、このjavascriptで解消されそうです。 ElasticTableはテーブルで作成した各項目を自在に伸縮してくれます。 使用方法 ElasticTableからelastictable.jsとelastictable.cssをmootoolsからmootools.jsをダウンロードします。 <script src="http://yourdomain/mootools.js" type="text/javascript"></script> <script src="http://yourdomain/elastictable.js" type="text/javascript"></script> <link rel="stylesheet" href="http://yourdomain/elastictable.cs
[JS]設置も簡単なテーブルのデータをソートする超軽量のスクリプト | コリス
leigeberから、既存のテーブルにも簡単に設置できる、データをソートする超軽量（1.7KB）のスクリプトを紹介します。 jQueryやPrototypeなど他のスクリプトは必要ありません。 JavaScript Table Sorter demo 動作確認ブラウザは、IE 6/7/8, Fx2/3, Op, Safari, Chromeとなっています。 設置方法は簡単で、既存のものにも簡単に組み込めます。 「script.js」と「style.css」を外部ファイルとして記述します。 tableに「class="sortable" id="sorter"」を記述します。 テーブルの下に下記のスクリプトを記述します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript">
AjaxZip 2.0
Kawa.netxp AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版） AjaxZip2は、昨年公開した 『ajaxな住所入力フォーム』 の新バージョンです。 郵便番号を入力すると、該当する都道府県名・住所が自動的に入力されます。 Ajaxと JSON フォーマットを利用するJavaScriptライブラリとして公開しました。 JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。 郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行います。 既存 HTML の住所入力フォームをたった3行書き換えるだけで利用できます。 簡単に設置できるため、プログラムに詳しくない方でも導入していただけると思います。 以下の住所入力フォームに、7桁の郵便番号を入力してみてください。 【2007/12/09 追記】 jQ
Super Tables - HTML Tables with Fixed Headers and More - Matt's 411 - Javascript, CSS, HTML and more
某所を参考にgetElementsByClassメソッドとか作ってみた。 - すけすけ。
getElementsByClass（IE,Firefox対応版） - 技術情報メモをパク...参考に、getElementsByClassとか書いてみた。 （仕事であると楽だと思ったので） function getElementsByClass(searchClass){ if(document.all){ var allElements=document.all; }else if(document.getElementsByTagName){ var allElements=document.getElementsByTagName("*"); }else{ return null; } var classElements=new Array(); re=new RegExp("(^|\ +)"+searchClass+"(\ +|$)"); for(i=0,j=0; i<allEl
Javascriptで表示切替 html内の一部をjavascriptで表示、非表示の切り替えをしたいと思います。…
Javascriptで表示切替 html内の一部をjavascriptで表示、非表示の切り替えをしたいと思います。 その際に、消した部分は上に詰め、戻したら、また広がるものとします。 この場合、どの表示記述すればいいのでしょうか？ prototype.jsとか使ったら楽でしょうか？ <div id="display_area_1"> あいうえお<br /><br /><br /><br /><br /><br /><br /><br />わおん </div> このような場合で考えています
Slider Gallery | jQuery for Designers - Tutorials and screencasts
Posted on 18th February 2008 — Michiel Kenis requested a tutorial explaining how to create a similar effect used to showcase the products on the Apple web site. Earlier: Image Loading Next: Coda Popup Bubbles This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery alr
ヘッダー固定のスクロール可能なテーブルを作成する。（javascript + CSS） | (株)クラブエナー 滋賀・大阪・京都のホームページ制作会社 （CMS構築など）
当社はAnother HTML-lint gateway,及びW3C Markup Validation Service にてソースのチェックを行い、最高レベルの構築を行っています。 ある案件で使えるかな、と思って探していて、実際、思う動作は実現できたのですが、結局この話は没になってしまいました。 ということで、もったいないのでメモ代わりに公開しておきます。 <やりたいこと> ・テーブルの上と左にヘッダーがある。 ・表の中身はかなり縦にも横にも長くなる可能性があり、スクロールできるようにしたい。 ・ただし、ヘッダーは常に表示させておきたい。 要はエクセルの「ウィンドウ枠の固定」のようなことです。 これをどうやって実現させようか、ということで色々探していたのですが、なかなかうまい情報に当たらず・・・。 最終的にたどり着いたのが、 http://hikazoh.tdia
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Groups
Loading...
Kayla McGuire - Private Site Access