1

주제: 카테고리를 드랍다운 메뉴로 만들기 질문

안녕하세요.
우선 php 든 jsp 든 전혀 모릅니다. -_-;

목적 : 카테고리를 드랍다운 메뉴로 만들기

해본 것?
1. 스킨 들여다보기 (사용중인 스킨 : http://fotowall.net/14)
2. 스킨 내 드랍다운 메뉴용 jsp 들여다보기
==> [##_category_##] 나 [##_category_list_##] 의 경우 단 하나의 치환자에 모든 내용이 가공되어 나오기 때문에 jsp 만으로 정보를 받아 가공하기 어렵다.

3. 도아님의 수평 카테고리 플러그인 들여다보기 (http://offree.net/467)
4. 태터툴스 1.1.0.2 내 카테고리 관련 함수 들여다보기 (getCategoriesView)
==> 1,2번 문제 때문인지 도아님도 직접 mysql 에 접속하는 방식을 택한 듯 하다.


결론 : 머리아프다. @.@
우선 php 나 jsp 에 대한 지식이 없어서 그런지 전혀 감이 안오네요.
그런다할지라도 기본적으로 sql 에서 정보를 받아 가공하는 부분이 있을 것이고, 그 부분(아마도 getCategoriesView)을 jsp 를 이용해 가로채거나 재현해서 제가 원하는 형태로 가공을 할 수도 있을 듯 한데.. (그도 안되면 무식하지만 [##_category_list_##] 값을 그대로 받아 html 소스를 날리고 재가공하는 방법도 있을 듯.. 쿨럭 ;;)

하고는 싶은데 이것때문에 php 나 jsp 를 배우자니 절대 안될 것 같고.. ㅡ.ㅡ;
그래서 여쭤봅니다. 가능은 한건지.. 영 불가한건지..


우선 스킨에서 사용하는 소스는 다음과 같습니다. (아카이브의 경우)


skin.html

<div class="archive_window" id="archive_window">
    <script>
        <s_archive_rep>
                                    write_convertArchive("[##_archive_rep_link_##]","[##_archive_rep_date_##]","[##_archive_rep_count_##]");
        </s_archive_rep>
    </script>
</div>    
<div class="archive" id="archive">
    <div class="archive_button"><img src="./images/archive_button.gif" border="0"></div>
        <div class="clear: both;"></div>
    </div>                        

    <script type="text/javascript">
        at_attach("archive", "archive_window", "click", "y", "pointer");
    </script>

fotowall.js

function write_convertArchive(link,date,cnt)
{
    var aa = date.split("/");
    var hdate = aa[0] + "년 " + aa[1] + "월";
    document.write(    "<div class='archive_window_data'><a href='"+link+"'>"+ hdate +" ("+ cnt + ")</a></div>" );
}

dropdown.js

function at_attach(parent, child, showtype, position, cursor)
{
  p = document.getElementById(parent);
  c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  if (cursor != undefined) p.style.cursor = cursor;

  switch (showtype)
  {
    case "click":
      p.onclick     = at_click;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
    case "hover":
      p.onmouseover = at_show;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
  }
}

Mr.Dust (2007-01-03 22:08:47)에 의해 마지막으로 수정

2

답글: 카테고리를 드랍다운 메뉴로 만들기 질문

문맥상으로 봐서 jsp가 아니라 javascript를 말씀하시는거 같은데 맞는지요?(jsp와 javascript는 전혀 다릅니다.; )

뭐 어쨌거나; 당연히 안될 이유는 없습니다.

아래에 다른 분이 플러그인을 뚝딱 만들어서 올려주실겁니다.(...)

3

답글: 카테고리를 드랍다운 메뉴로 만들기 질문

네 맞습니다. 무슨 생각으로 jsp 라고 했는지 저도 모르겠군요. ㅡ.ㅡ;
여튼.. 티스토리를 사용하다보니 플러그인을 추가 사용할 수가 없어 자바스크립트를 이용하려고 하는 지라..
플러그인을 만들어주셔도 orz

4

답글: 카테고리를 드랍다운 메뉴로 만들기 질문

티스토리에서 카테고리 드롭다운 형태로 변신 시키기

작업하기전, 카테고리는 리스트형으로 선택해야 함. [##_category_list_##] <-으로..(ul태그로 출력하는...)

첫째, 티스토리에서 사용하는 스킨의 편집모드에서 아래 스크립트를 <head>와</head>사이에 넣습니다.

<script type="text/javascript">
// 티스토리용 카테고리 -> 드롭다운 형태로 변신 시키기
function categoryConvert(id){
    var getHtml = '[##_category_list_##]';
    getHtml = getHtml.replace(new RegExp("<ul>", "gi"), "");
    getHtml = getHtml.replace(new RegExp("</ul>", "gi"), "");
    getHtml = getHtml.replace(new RegExp("</li>", "gi"), "");
    getHtml = getHtml.replace(new RegExp("</a>", "gi"), "");
    getHtml = getHtml.replace(new RegExp("<li class=\"(.*)\"><a(.*)", "gi"), "<li><a class=\"selected\""+"$2");

    var getSelect    = "";
    var tmpSplitA    = "";
    var tmpSplitB    = "";
    var subLine        = "";
    var getSelected = "";
    var regSplit    = getHtml.split("<li>");
    var regLink        = new RegExp('<a(.*)href="(.*)">(.*) <span.*', 'i');
    var regTitle    = new RegExp('<a[^>]*>(.*) <span .*?>', 'i');
    var regCnt        = new RegExp('<span class="c_cnt">(.*)</span>', 'i');
    var selectStart    = "<select id=\"s_Category\" onchange=\"location.href=''+this.value;\">\n";
    var selectEnd    = '</select>\n';

    for(var i=1; i<regSplit.length; i++){
        getLink        = regLink.exec(regSplit[i]);
        getTitle    = regTitle.exec(regSplit[i]);
        getCnt        = regCnt.exec(regSplit[i]);
        tmpSplitA    = regSplit[2].split("/");
        tmpSplitB    = regSplit[i].split("/");
        getSelected = getLink[1].replace(" ","").length;
        if(getSelected != 0) getSelected = " selected";
        if(tmpSplitA.length < tmpSplitB.length){subLine = " - ";}else{subLine=""};
        getSelect    = getSelect + '\t<option value="' + getLink[2] + '" '+getSelected+'>' + subLine + getTitle[1] + ' ' + getCnt[1] + '</option>\n';
    }
    return document.getElementById(id).innerHTML = selectStart + getSelect + selectEnd;
}
</script>

둘째, 편집중인 스킨에서 '[##_category_list_##]'과 아래 태그코드로 대체함.

<div id="CategorySelectbox"><script type="text/javascript">categoryConvert("CategorySelectbox");</script></div>

위 예제,

<s_sidebar_element>
<!-- 카테고리 모듈 -->
<div class="category">
    <h3>카테고리</h3>
    <!-- [# #_category_list_# #] -->
    <div id="CategorySelectbox"><script type="text/javascript">categoryConvert("CategorySelectbox");</script></div>
</div>
</s_sidebar_element>

- 예제 블로그 : http://www.jparker.co.kr/blog/
- 드롭다운 메뉴의 가로길이 또는 스타일을 조정하려면, 사용스킨의 css편집에서 아래와 같이 추가하여 조절하시면 됩니다.

#s_Category{
    width:180px;
    color:#777;
    font:9pt tahoma;
}

당신의 삶속에 매화꽃 향기처럼 늘 아름다운 향기로 가득하길...
# J.Parker