ラジオボタンを画像に置き換える

ラジオボタンを画像に置き換えるのに苦労したのでメモ。

晴れ雨曇り

通常のラジオボタンだと上記のような感じ。

この◯部分をなくし、画像に置き換えたいという事で、試行錯誤。

参考にさせていただいたサイトは以下のところ。
http://ameblo.jp/daisuke-sole/entry-11541775812.html

まずはhtml。

<p>
<input type="radio" value="1" name="radio" id="hare" checked="checked">晴れ
<input type="radio" value="2" name="radio" id="ame">雨
<input type="radio" value="2" name="radio" id="kumori">曇り
</p>

次にcss

#hare {
    background: url(hare.png);
    background-size: 25px 25px;
}
#ame {
    background: url(ame.png);
    background-size: 25px 25px;
}
#kumori {
    background: url(kumori.png);
    background-size: 25px 25px;
}
input[type="radio"] {
	-webkit-appearance: none;
	position: relative;
	display: inline-block;
	width: 25px;
	height: 25px;
}
input[type="radio"]:checked:before{
	content:"";
	position: absolute;
	display: inline-block;
	width: 25px;
	height: 25px;
	box-shadow: 0px 0px 0px 1px red;　//チェック済画像を赤線で囲む
}

ちなみに値を取得する場合jqueryでやると

$('#:input:checked').val();

一応こんな感じで完成。無駄ありそうな気がするけど。

dashboard上のドラッグで移動

地図ウィジェットで悩みに悩んでた問題がたった一行で解決。

dashboard上でのドラッグはウインドウが移動してしまうので、
ドラッグで移動するのは無理なのかと諦めてたけど、10年以上前？にあった
googlemapのウィジェットいじってみたらなんとドラッグで移動できるという。
それならできない事はないとソースを読み解くも、よくわからない状態。

で、最終的に判明したのが、mapを表示するdivのcssに

• webkit-dashboard-region: dashboard-region(control rectangle);

この一行追加するだけっていう。これでドラッグでウインドウ全体が移動することなく、
ドラッグで地図上を移動できるという。

この問題が解決してだいぶdashboard完成に近付いた状態。

検索機能と、ウインドウの開閉、ルート検索（道順だけ）は完成したので、
残りはウインドウのリサイズ機能、ルート検索結果表示機能ぐらい。

デザインはどうしようか悩み中。デザイン未完成状態すぎてスクショも貼れない。

divの中のdiv

divの中の処理で悩みまくりだったのがようやく解決したのでメモ。
親要素をクリックしたときと、子要素をクリックしたときのイベントを別にしたく、
親要素クリック時は子要素以外の部分をクリックしたときにイベントを発生したくて奮闘。

<div id="one">
    <div id="two">
        <input type="text" id="searchText">
        <input type="button" id="search" value="検索">
    </div>
</div>

上記の状態でoneのクリックイベントを発生させると、
two以下の子要素をクリックしても発生したので、
試行錯誤した結果、event.targetの場合分けで解決。
jqueryでやったので、jqueryで記述。
:notやcontainsなどなど色々試してみたけど、うまくいかなかったので、
クリックイベント発生させて判断する方法でやってみた。

$('div').click(function(){
    if(event.target == $('#search')[0]) {
        〜検索処理〜
    else if(event.target == $('#one')[0]) {
        〜別の処理〜
    }
});   

event.targetとevent.currentTargetの違いは
デバッグすればわかりやすい。
上記ifでevent.currentTarget使ったらdiv#oneになると思われる。

すごい参考になったサイト
http://www.jquerystudy.info/reference/events/currentTarget.html

javascript：document.getElementById('id')
jquery：$('#id')[0]
id取得時の書き方を忘れないようメモ。

とりあえず、これでwidgetの作成が一歩前進。

dashboard作成その２

天気と地図のdashboardはデザイン気にしない超簡易的なのが一応完成。
っとは言ってもデータ取得しただけっていう。
地図はgoogleapiを利用して、検索機能も追加。
天気は最新、３時間毎、長期予報の３種類の情報を取得して表示しただけ。

問題点は山積みなのと、デザイン作りこんでいかなきゃなので、まだまだ完成には程遠い。

地図はウィジェット全体が動いてしまい、ドラッグで移動ができない問題がまだ未解決。
追加したい機能としてはリサイズ機能。これはなんとかなりそう。たぶん。
移動問題が調べてもまったくわからない状態。

天気はOpenWeatherMapのJSONデータを使って表示できるようになったけど、
スクロールバーの上をドラッグで移動できるけど、テーブル全体でのドラッグ移動ができない。

ブラウザ上とdashboard上での挙動が違うから難しい。

dashboard作成中

macのdashboardを頑張って作成中。

どうやらyosemiteではdashcodeなるツールが使えないらしく、無理かっと思ってたら

html、css、javascriptでできるという事を知り、挑戦中。

よくブラウザで開く天気と地図のウィジェット作成に取り掛かっているけど、

googlemap apiが使えないのかなっかなかうまく表示できないで苦戦。

表示できなかった原因の最後がcssのid名間違いっていう。

天気のほうはとりあえず最新の天気を表示するところでストップ中。

地図のほうがウィジェットだと全体が動いてしまい、ドラッグで地図内部を移動っというのができず、現在悩み中。

なんとかしてドラッグでウィジェットが移動しないように制御できるようにしたいところ。

大きさ変えたりの機能も追加したいので、まずは移動の制御できるようにするのが目標。

意味不明なバグ

<input type="button" id="test" value="検索" onclick="alert()"> 

なぜかonclickが効かないという不具合で数時間無駄に過ごすという。

最初はjavascriptのメソッド呼び出していたけど、最後はalertを呼び出すように。

にも関わらず反応なしっていう。原因は未だに不明。

ソースを見て、デバッグして、調べて・・・。

最終的に解決したけど、解決方法が、

まったく同じid名違いのボタンを記述し、そのボタンを押下するとonclickが効いたっていう。

スペルミスかと思って見比べてもid名以外同じだし。

片方効いて、片方は反応なしっていうわけわからん状態。

反応ないほうの記述を削除し、id名を反応ないものに変更。

そうしたら動いたっていう。id名が原因でもないみたいだし。

キャッシュが残っていたのか、よくわからないけど、よくわからない不具合に振り回された日でした。

AjaxとjQueryとJSON（レベル１脱出しレベル２ぐらい。）

Javaの環境構築は一応できたので、とりあえず後回し。たぶん作り直し予定。

で、AjaxとjQueryとJSONについて勉強してました。
JSONがすごい便利だなーと思いました。
ネストしまくり状態で取得するのは少し悩んだけど、
簡単な形式で情報が取得できるってすごい便利すぎるなーと。

{
　"会社":[
　　　　　"会社名":"株式会社AAA",
　　　　　"会社情報": {
　　　　　　　　　　　"社員数":"1,000名",
　　　　　　　　　　　"資本金":"1,000万円"
　　　　　　　　　　　}
　　　　]
}

↑こんな感じでもJSON書けるから便利。書き方間違ってないはず...。
順番も取得時に並び替えればいいだけなので、気にしないで記述できるし、
使いこなしたいところ。

jQueryについてはclickイベントの後にtriggerで呼び出せば、
初期表示時でもclickイベントが呼び出されるようにできたのはいいけど、
その後の処理でselectボックスのchangeイベントが呼び出されず、悩みまくり状態で、
処理順変えて解決したけど、なんかモヤモヤ。

test1が更新ボタン、test2がセレクトボックスっていう流れ。

$('#test1').click(function(){

     ajaxでjson呼び出す処理〜

}).click();
★★★★
$('#test2').change(function(){

    〜略〜

}).change();
♢♢♢♢

上記だとchangeイベント発生せず。
っというか★★★★以降の処理が一切行われず。
たぶんreturnされてるのかな？っと。
triggerについてしっかり理解できていないので理解したいところ。
triggerとtriggerHandler、bindがまだよくわかっていない。

とりあえずの解決策として、
★★★★の前にあるclick()をなくし、
♢♢♢♢のところに

    $('#test2').trigger('click');

として解決。

changeのトリガーは後述処理OKなのに、clickのトリガーは後続処理がダメっていうのが
よく理解できない状態。
まぁダメなら最後に書いておけばいいっか！的な。

手を動かして解決するのが一番実になるなぁーと実感。