cssとjQuery

最近とってもcssな、まいちむ.jsです

☆でランクをつけるときのやり方を試行錯誤をめもめも


このサイトの☆ランクのやり方に感動したまいちむ
http://allabout.co.jp/gm/gc/24018/

このサイトのやり方するには19個の星がつながった画像が必要なわけですが、

でもデザイナーさんにもらってた画像が、
星フルのやつ、ハーフのやつ、空のやつ
のいっこずつだったので、

とりあえずもってる素材でやってみよーかなーって考え

いったん３つの星をそれぞれだすタグをかいて、
jsでクラス名に数字いれて、cssで星の数を調整してたんだけど、
うーんやっぱ19個の星のが明らかにスマート

星をcssでかいてもいいんだけど、うーんめんどくちゃ

だったのでデザイナーさんに19個の星かいてもらった




で、星ランクをつけるフォーム画面を作成

ほんとはマウスでなぞったら星が増えるやつやりたかったんだけども、
3.5とかの微妙なドラッグを座標でとるのはめんどくさい、いや、
美しくないと思い、

星５個の両端に矢印おいて、それ押したら0.5ずつ増減するというやつにしますと


で、まぁhtmlはこんな感じで

<span id="triangle" class="star-down">&#x25C0;</span>

<div id="starlevels" class="stars6"></div>

<span id="triangle" class="star-up">&#x25B6;</span>

<input type="hidden" id="form_rank_point" name="rank_point" value="3">

矢印めんどくさいから記号の三角に適当にcssで加工するとして

今デフォルトを星３つにしてる

で、jsは、少数の扱いがcssでできるのかわかんないけどややこしいから、
全部２倍にしてあつかってしまおう作戦

$('.star-up').click(function() {

var change = 0.5;

var stars = parseFloat($('input#form_rank_point').val());

if (stars < 5) {

$('input#form_rank_point').val(stars + change);

$('#starlevels').attr('class', 'stars' + ((stars + change)*2));

}

});

$('.star-down').click(function() {

var change = 0.5;

var stars = parseFloat($('input#form_rank_point').val());

if (stars > 0) {

$('input#form_rank_point').val(stars - change);

$('#starlevels').attr('class', 'stars' + ((stars - change)*2));

}

});

jsでの計算はパースしないとへんなことになるのが注意ですね





あときのう覚えたjQueryのattrとpropの違いをメモメモ
http://ginpen.com/2011/10/12/jquery-attr-prop/

こまったときのattrだったのにそんな落とし穴があったとわ・・・
気つけましょう

つまり、
jsで動く値をとるときはprop,
固定値をとるときはattrね




本日さいごに、なっかなか原因がわからなかった、
cssでもhtmlでも画像がでない件について

原因はなんとchromeの拡張機能である
adBlockでした。。

画像の名前に ad がついてたので広告と判断されて消されていたらしい

chromeのシークレットウィンドウ（←これ軽くて超いい）で開いてみたら
全然画像でてたからようやく気づいたという


それはそうとうちずっとadBlockいれてるから、
youtubeに広告がでるなんてことしらなかったわ
だいぶ困らせられたけど、優秀ねadBlock



ここらcssとhtmlとjsばっかさわっててphp忘れてしまいそう

てか我流でずっとかいてるからcssとjsだれかレビューしてくれないかしら




まいち解釈に基づく『Maichidia』より抜粋

----------------------------------

OGPP   ... on the ground party people (ホームパーリー、BBQ系のパーリーピーポー)
UGPP   ... under the ground party people (クラブ系のパーリーピーポー)

----------------------------------

本日のひとこと

『windowsそろそろIEから手ひかないかな』

参考URL：

http://allabout.co.jp/gm/gc/24018/
http://ginpen.com/2011/10/12/jquery-attr-prop/