2007年11月09日の日記 Javascript 非適用の状態 大カテ 中カテ 小カテ Javascript を適用した状態 大カテ 中カテ 小カテ
2007年11月09日の日記 Javascript 非適用の状態 大カテ 中カテ 小カテ Javascript を適用した状態 大カテ 中カテ 小カテ
よく見かけるアレです。例えば不動産系のサイトで、沿線を選択すると駅が選択可能になる、みたいなやつです。 今回はアレをJavaScriptで作ってみました。なお、配列の代わりにJSONを、ライブラリはprototype.jsとcommon.jsを使ってます。 そして、完成してから気がついたんですが、これってPearのHTML_QuickFormのhierselectを使うと一瞬で作れるんですね。 phpをお使いなら断然そっちを薦めます。自分も結局JavaScriptのはやめてhireselectのにしましたから。。 一応、作ったものをアップしときます。 まだJavaScriptにあまり慣れてないので、かなり手間取ってしまいました。 <html> <head> <title>JavaScriptで連動する2つのセレクトメニューを作る</title> <script type="text/jav
ジャーン(A-JAXのステージ開始時のオケヒっぽく) 職場で稼働中のWebシステムの調査をしている時に、とある画面がIISのリモートスクリプティングを利用して『コンボボックスAで指定された条件を元にコンボボックスBの選択肢を動的に変更させる』という処理を行っているのを発見したのですが、これって今なら Ajax で実装した方が簡単じゃね? と思い至ったため、せっかくなのでこの機能を Ajax で置き換える実験をしてみることにしました。はじめての Ajax。 Ajax する場合、今はprototype.jsという大変にありがたいフレームワークが存在しているので、それを使ってみました。 サーバ側がコンボボックスの内容(<option>~</option>で括った文字列のリスト)をいきなり出力して、クライアントはそれを Ajax.Updater を使って貼り付ければ良いじゃん? と思って作ったのが
new optionで作る、というのが具体的にどういうコードで作っているかわかりませんが、 optgroupとoptionは別種のエレメントですから、作ったものを変化させる事はできません。 http://www.doraneko.org/misc/dom10/19981001/level-one-html.html#ID-94282980 createElementとかでoptgroupを作ってはどうでしょうか。 http://www.doraneko.org/misc/dom10/19981001/level-one-core.html#method-createElement お世話になります。 コードは以下です。 <script type="text/javascript"> function aaa(){ var oGroup = document.createElement('o
prototype.jsに「Event.observe」というものがある。 ボタンなどエレメントに対してイベントを設定するもので、 こまごまとした処理は他にもあるが、内部的にはこうなってる。 // addEventListenerが存在するか判別if (エレメント.addEventListener) { // あれば使う エレメント.addEventListener("アクション", "イベント", false);} else { // なければattachEventを使う エレメント.attachEvent("アクション", "イベント");} ようはIEだけattachEventを使い、 それ以外のブラウザはaddEventListenerでイベントを設定しているわけだ。 何が言いたいかっていうと 「Event.observe」でイベントを2つ追加してい
prototype.jsを使ってみる 2-Event.observe 今回はEvent.observeを使ってイベントを追加する方法です。 onloadイベントを記述する際にbody要素に <body onload="hogehoge" > と記述したりスクリプト内に window.onload = function(){ hogehoge } と記述します。 onloadイベントは1ページに1度の記述しか認められておらず複数のonloadイベントを記述したい場合はonload用の関数を別途作成する必要があります。 prototype.jsのEvent.observeを使えばイベントを追加する事ができスクリプトの保守性が著しく向上します。 Event.observe(追加する要素,イベント,関数,段階) 追加する要素にはオブジェクトかIDを記述します。 イベントにはloadやclickなど
<select id="select_id> <option value="テスト">テスト</option> <option value="ペスト">ペスト</option> <option value="ネスト">ネスト</option> <option value="レスト">レスト</option> </select> 値の取得 selectでは、 var strName = $F(’select_id’); と var strName = $(’select_id’).value; は問題なく動きます。また、 var strName = $(’select_id’).getAttribute(’value’); はIEでは動くのですがfirefoxでは動かないので避けた方がいいです。 当然といえば当然なのですが strName = $(’select_id’).innerHTML
平素より「PHPプロ!」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ!」ですが、サービスの利用状況を鑑みまして、2018年9月25日(火曜日)をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日(火曜日)を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
この機能を実行するにはprototype.jsが必要です 構文 Event.observe(element, name, observer, useCapture) 引数: element=監視したいエレメント, name=イベント名, observer=イベント時関数 「イベントを監視」サンプルコード <html> <head> <title>Event.observe - イベントを監視</title> </head> <!--イベントを監視のサンプル--> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> <!-- window.onload = function() { Event.observe('sample', 'click', han
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers YSlow, Stoyan Stefanov氏によればWebページに採用する画像の種類は写真データにはJPEGを採用し、それ以外にはPNG8にするのが妥当だとされている。しかしPNG8に透過データを含める場合には注意が必要だ。Net Applicationsの報告によれば2008年11月現在でIE6のシェアは22%弱はある。純減を続けているとはいえ、それでもなお第2シェアのFirefoxの合計シェア21%弱よりも多い。このIE6はPNG8の透過情報をうまく扱えない。 IE6で透過データを含んだPNG8を表示すると、GIFと同じように透過かそうでないかまで透過表現が低下してしまう。このため透過情報を含んだPNG8をIE6で表示する場合には何らかの追
IE PNG Fix 2.0 Alpha 4 This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! Full CSS background positioning and repeat are supporting (including CSS sprites). It requires only one line in your CSS file, and no changes to your website HTML. <IMG> tags and background images are both supported. Script License Ag
関係する製品 Mac Pro, Mac mini, MacBook, MacBook Pro, iMac (24-inch Late 2006), iMac (Early 2006 17-inch), iMac (Early 2006 20-inch), iMac (Mid 2006 17-inch), iMac (24-inch Mid 2007), iMac (20-inch Mid 2007), iMac (17-inch Late 2006), iMac (17-inch Late 2006 CD), iMac (20-inch Late 2006), Mac Pro (Early 2008), MacBook Air
海外に見る最近のWebサイト(特にトップページ)のデザインは、縦に何段かに分かれたデザインが多い。一番上は大きな画像とともに二段構成、その下が2×2のテーブル組みなどでサービスの特徴を書き、次に横並びの3段で利用者の声といった具合だ。 今時のWebサイトっぽいデザインが簡単に まぁテーブルで組めばできないことはない。だがそれはださい、ださすぎる。CSSだけでどうにかしたい所だが、ブラウザの互換性も含めて考えるとプログラマにはとても無理だ。Firefoxで見られるように何とか組んで、IEで見たら吹き飛んでいた…なんてなったらもうやる気がなくなる。そんなことになる前に使いたいのがMaloだ。 MaloはGoogle Code上で公開されているCSSフレームワークで、GPLの下に公開されている。 Maloが実現するのは複雑な、それでいて簡単に設定できるCSSデザインだ。ヘッダとフッターを設けた上
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く