묻고답하기
순위 데이터 ol-li 랭킹 아이콘..
2014.06.26 19:48
ol-li 태그로
1~10까지 png 아이콘을 가지고 적용시키고 싶습니다.
<ol>
<li>
<a></a>
</li>
</ol>
이러케 만들었습니다. 네이버 실시간 검색 순위처럼 랭킹을
1. ##
2. #^
3. @@
4. $$
5. &&
6.**
7. !!
8. %#
9. #$
10. %!
이런식으로 출력하고
저 숫자 자리에 제가 css 에 지정한 이미지를 출력하게 하고싶은데.. 도무지모르겟습니다.
<ol>
<li></li>
<li></li> ~~
...</ol>
이런식으로 li를 따로 만들어서 png 스타일로 붙여주는거 말궁요
이럴땐 자바스크립트를 써야하나요? 초보라서 질문드립니다..
댓글 11
-
열혈개발
2014.06.26 20:57
1. 그 자동으로 숫자가 붙는것에 숫자를 지우고 아이콘을 백그라운드로 넣을순있습니다
2. ul 말고 ol 이요
3. li을 여러개 만들고 넣는거 말구요 list view? 인가 그런 방식이요 제이쿼리인가 자바스크립트로 구현가능하다던데.
제말은 li 여러개만들어서 이미지 때려넣는거말구요
게임 랭킹이나 실시간 검색순위 처럼 되는거 말한겁니다.
-
열혈개발
2014.06.26 21:00
갤러리htm 가보니까
<li<!--@if($_idx>0 && $_idx % $widget_info->cols_list_count==0)--> class="clearLeft"<!--@end--> style="<!--@if($_idx >= $widget_info->list_count)-->display:none;<!--@end-->width:{$widget_info->thumbnail_width}px;">
이러케되잇던데 좀 알려주세요..
-
열혈개발
2014.06.26 21:08
{@$_idx++}
이걸로 카운트 올리는건 보이는데 다른건 아무리 생각해봐도 사용법을 ...
-
루프로 목록 뽑는 코드 한번 적어 보세요.
-
열혈개발
2014.06.26 21:21
할줄몰라서 질문하는건데 ;;
-
열혈개발
2014.06.26 21:22
제가 하는건 단순히 루프로 1~10 각각 다른 아이콘 넣기에요 ㅠ;;;; 클라스명을 1~10 으로 나오게만하면댈거같은데여
-
{@$_idx=1}<!--@foreach($widget_info->content_items as $key => $item)--><li class="num{$_idx}">{@$_idx++}</li><!--@end-->이게 일반적으로 위젯에서 li에 클라스명을 넣는 방법입니다.
-
HSJI
2014.06.26 23:00
음.. 예를 들면
<ul>
<li loop="$lang_supported=>$key,$val" cond="$key!= $lang_type"><b class="ico_flag _{$lang_type}"></b>
<a href="#" onclick="doChangeLangType('{$key}');return false">{$val}</a>
</li>
</ul>css파일에.
.ico_flag{background-image:url(../img/flags.png);background-repeat:no-repeat}
.ico_flag._ko{background-position:0 -1778px}
.ico_flag._en{background-position:0 -3360px}
.ico_flag._jp{background-position:0 -1680px}다국어 선택할때 이렇게 하는데요. 이렇게 하면 클래스 별로
각 국기 아이콘 + 언어로 죽 나옵니다.
DoorWeb님께서 말씀하신 방법이 가장 일반적인데.. 꼭 ol을 써야할 이유가 있나요?
-
열혈개발
2014.06.26 23:12
아뇨 ㅋㅋ 꼭 써야할이유는없지만 ..
-
HSJI
2014.06.26 23:46
<ul>
{@ $i=1}
<!--@while($i<=10) --><li>
<b class="abc_{$i}"></b>
<a>내용</a></li>
{@ $i++}
<!--@end --></ul>
foreach문이나 while문으로 루프돌리고.. (실시간 검색처럼 뜨려면 배열로 받아올테니 loop문이나 php의 foreach가 좋겠네요.)
css에서
.acd_1{background-image:url(xxx.png)}
.acd_2{background-image:url(yyy.png)}
이러면 되겠네요.
ol 경우는 순서있는 목록이라 자동으로 숫자가 붙습니다.
숫자 없는 형태를 원하시면 ul로 하셔야 하고요.
숫자를 이미지로 바꾸고 싶으시면 li마다 각 클라스명을 넣으시고 그 클라스명 마다 배경이미지를 넣으시면 됩니다.
li에 순서에 맞게 클라스명 넣는 방법은
content위젯 gallery.html에서
{@$_idx=0} 사용법을 확인하시면 순서대로 클라스명 넣는데 문제가 없을겁니다.