FC2ブログ

検索結果をきれいに表示する

検索結果をきれいに表示する

li要素が追加できたので
次にソートする

jQuery のget オプションにわたす場合は
エンコーディングしてくれる
つまり、encordeURIComponent()
してしまうと2重エンコードになってしまうため
その場合、意図しない動きになる

"q": encodeURIComponent($('#q').val()),

"q": $('#q').val(),
にする

そして縦にならんでいるので
これを変える

あと、新しいものを検索したら、どんどん追加されるので
一度クリアすることも実装していく

このクリア方法は
$('#list').empty();
とすればOK

これを for のループ処理前に追記する

empty() は中身を消去する

で、取得できたリストを縦から横並びへ変更するには
CSSで設定を行う
これはHTMLファイルならstyle タグで行う

ソースにすると
ul{
list-style-type:none;
padding:0;
margin:0;
}


list-style-type:none;
を設定することで
・という印を消すことができる

padding:0;
margin:0;
は余白をなくす設定

そして、検索結果を横並びにするソースが
li.movie{
float;left;
width:120px;
padding:10px;
}

li.movie
これは、
li class="movie"
という意味
CSS では .はクラス名という意味なので
要素名.クラス名
というかき方をする
なので
li 要素の movie クラスという意味になる

float;left;
これで、左寄せになり、続く要素がその右側にくるようになる
通常は、下にどんどん追加されるけど
これを指定すれば、右側にどんどん追加されていく
http://hac-design.com/css/float.html
を参考にしました

width:120px;
padding:10px;
これは幅と余白の設定

画像の幅=120px
余白=10px
ということ

スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック