포럼
XE 1.5 UI Library 공유
2011.05.25 20:32
XE 1.5 관리자 모드에서 사용하기 위해 UI Library를 만들었습니다. 굳이 코어가 아니더라도 사용할 수 있기 때문에 여기 공개합니다. 모듈이나 위젯 스킨 만들 때 혹시 쓸만한게 있는지 한번 살펴보시구요. C&P 능력이 되시는 분들은 가져다 쓰세요. 뭔가 아쉬운 부분은 제안을 부탁드립니다.
이 글은 양쪽에 모두 유익할것 같아서 개발자 포럼에 게시하고 사용자 포럼에도 복사합니다.
댓글 29
-
fsfsdas
2011.05.25 20:39
좋은 예제군요. -
우진홈
2011.05.25 20:45
별 100개, 추천 100, 뭐 말로 다 할 수 없는 고마움을 표현할 방법이 없군요...^^ 항상 고맙고 감사하게 생각합니다... -
guny
2011.05.25 20:47
그거 있잖어요..
메시지 창...XE는 워낙 출력되는 메시지창이 많아서...있어야 할것 같습니다.. 이쁜걸로다... -
하하하 초보자는 갖다가 쓰라고 해도 못쓰겠네요~^^
당최 무슨 말인지 알 수 가 있나....ㅋㅋ -
ForHanbi
2011.05.25 21:50
하나씩 복사하셔서 지웠다 넣었다 하면서 익혀 보세요.
정말 많은 배움을 주는 예제들입니다.
저 예문들 다 이해는 못하더라도 지웠다 넣었다 할수만 있어도 XE 사이트 디자인하는데 큰 무리가 없을듯 합니다. -
Cody
2011.05.25 22:07
XE 1.5에서는 jquery-ui 가 퇴출될까요? -
ForHanbi
2011.05.25 22:20
퇴출되면 반갑기는 하지만...
jquery-ui가 사라지면 전 많은 레이아웃들을 다시 수정해야 함...
-
老姜君
2011.05.25 22:32
딱 봐도 좋아보이는데 사용할 능력이 안되네요. -
ForHanbi
2011.05.25 23:44
Vertical Navigation과 tree Navigation은 바로 로컬메뉴로 써먹을려고 두드리고 있는 중...
css를 손봐야하나 js를 손봐야하나... -
ForHanbi
2011.05.26 00:07
정찬명님께 질문좀...
위 Vertical Navigation과 tree Navigation을 보면 html이나 js가 <a href="#">를 주로 사용하는데... (tree Navigation도 js를 이용해 button을 생성시킨후 button을 사용은 하지만 <a href="#">를 병행해서 사용하고 있고)
이거 표준에 어긋나는일 아닌가요??
그리고 XE에서 사용하려면 링크가 안걸릴수 없는데 조금만더 눈높히 낮추셔서 다른분들이 쉽게 사용하도록 만드셨으면 더 좋지 않았을까 하는 생각이... -
#을 넣은것은 테스트를 할 때와 또는 실제로 링크가 걸리지 않은 상황에서도 동작하도록 하기 위함인데요. 말씀하신대로 실제 사용할 때에는 유효한 값을 넣으면 문제가 없습니다. 유효한 URL 넣지 않고 # 상태로 사용해도 동작하는게 문제라면 문제일 수 있겠군요.
-
ForHanbi
2011.05.26 02:13
jQuery(function($){
// List Tab Navigation
var tab_list = $('div.tab.list');
var tab_list_i = tab_list.find('>ul>li');
tab_list.removeClass('jx');
tab_list_i.find('>ul').hide();
tab_list.find('>ul>li[class=active]').find('>ul').show();
tab_list.css('height', tab_list.find('>ul>li.active>ul').height()+40);
function listTabMenuToggle(event){
var t = $(this);
tab_list_i.find('>ul').hide();
t.next('ul').show();
tab_list_i.removeClass('active');
t.parent('li').addClass('active');
tab_list.css('height', t.next('ul').height()+40);
return false;
}
tab_list_i.find('>a[href=#]').click(listTabMenuToggle).focus(listTabMenuToggle);
});
js가 a[href=#]일때 작동되도록 된게 아닌가요??
테스트할때 링크가 들어가 있으면 작동이 안되는거 같더군요.
굳이 테스트 안하더라도 link가 걸려 있으면 link로 펼치는것 이전에 클릭을 하면 link로 넘어갈 수 밖에 없는듯 합니다.
그런데 고니님이나 정찬명님이나 안주무세요???
늦은시간인데... -
링크를 클릭하면 페이지 이동을 해야하지 않아요? 그 외 다른 동작은 필요가 없을텐데요. ㅎㅎ
-
ForHanbi
2011.05.26 10:04
이게 제가 로컬메뉴로 옮기면서 생긴문제인데요.
위 js는 빈링크를 클릭할때 하위 메뉴가 펼쳐지게 되어 있습니다.
그런데 만약 빈링크에 주소가 들어가 버린다면 일단 하위메뉴가 펼쳐지지 않고요 '>a[href=#]' 로 되어 있는지라
만약 이걸 ">a"로 바꾼다 하더라도 클릭을 해 버리면 하위메뉴가 펼쳐 지는게 아니라 그냥 바로 링크로 넘어가 버리는 문제가...
제가 보기에는 '>a[href=#]' 을 '>a'로 바꾸고 .click을 .hover로 바꾼다거나 a[href=#] 옆에 버튼을 만들어서 버튼을 클릭할때 Effect되도록 하는게 옳은게 아닌가 해서요... -
a 요소에 유효한 링크가 걸리면 클릭시 페이지 이동을 하지요. 그런데 하위 메뉴가 펼쳐진다 한들 이미 페이지 이동을 한 다음이기 때문에 의미 없는 동작 아닌가요? 그리고 클릭을 hover로 변경하는 것은 불편한 UI라고 생각합니다.
-
ForHanbi
2011.05.26 10:36
네.. 그게 문제인거 같습니다.
저도 hover가 불편하다는걸 느끼고 있어서...
문제는 하위메뉴가 닫혀있기에...
a요소를 클릭해야만 하위메뉴가 열리도록 만들어진 js라... -
ForHanbi
2011.05.26 10:42
- 상위메뉴1
- 상위메뉴2
- 활성화 하위 메뉴1
- 활성화 하위 메뉴2
- 활성화 하위 메뉴1
- 상위메뉴3
- 상위메뉴4
- 비활성화 하위 메뉴1
- 비활성화 하위 메뉴2
- 비활성화 하위 메뉴1
- 상위메뉴1
-
사용하실 때 빈 # 링크를 되도록 사용하지 않아야 합니다. 링크 왼쪽에 있는 +- 버튼이 토글 역할을 하기 때문에 문제가 없지 않나요?
-
ForHanbi
2011.05.26 11:23
네 트리메뉴는 그나마 + -가 있는데 Vertical Navigation 메뉴는 그것도 없어어요.
트리메뉴처럼 옆에 버튼을 생성해야 하나 아니면 hover로 처리해야하나... 솔직히 뭐가 더 옳을지 저도 모르겠더군요. -
우진홈
2011.05.26 09:12
XE SCHOOL 추천 사이트에 바로가기 링크를 추가하였습니다. 고맙습니다...^^
-
SMaker
2011.05.27 23:20
XE 1.5에서 새롭게 바뀔 관리자 페이지가 기대됩니다 ^^ -
토깽이2
2011.06.01 00:09
관리자 페이지 기대중입니당 ㅠㅠ -
tree 메뉴를 적용해 봤습니다. 그런데 한가지가 안됩니다. '+' 아이콘이 표시되지가 않습니다. 데모에서는 잘 되는데 레이아웃에 적용하니 처음 보여질 때 리스트가 있는 메뉴에 '+' 아이콘이 표시되지 않습니다. 무엇이 문제일까요?
선택된 메뉴에 '-' 아이콘은 잘 나옵니다. css, js 는 클래스명만 변경해서 똑같이 사용했습니다.
적용 페이지 : http://xdom.com/xe/xd_mart<block cond="$layout_info->side_menu_type=='3' && $menu_1st">
<div class="treeNav">
<ul loop="$main_menu->list=>$key,$val" cond="$val['selected'] && $val['list']">
<li loop="$val['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['+ 'href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
<ul cond="$val2['list'] && $val2['selected']">
<li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']"><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a>
<ul cond="$val3['list'] && $val3['selected']">
<li loop="$val3['list']=>$key4,$val4" class="active"|cond="$val4['selected']"><a href="{$val4['href'+ ']}" target="_blank"|cond="$val4['open_window']=='Y'">{$val4['link']}</a>
<ul cond="$val4['list'] && $val4['selected']">
<li loop="$val4['list']=>$key5,$val5" class="active"|cond="$val5['selected'+ ']"><a href="{$val5['href']}" target="_blank"|cond="$val5['open_window']=='Y'">{$val5['link']}</a>
<ul cond="$val5['list'] && $val5['selected']">
<li loop="$val5['list']=>$key6,$val6" class="active"|cond="$val6['selected']"><a href="{$val6['href']}" target="_blank"|cond="$val6['open_window']=='Y'">{$val6['link']}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</block> -
ForHanbi
2011.06.03 11:59
아마... class="active"|cond=" " 와 충돌해서 그럴겁니다.
버튼을 js에서 생성시키는데 그런 방식이 class="active"를 생성시키는 문구와 충돌이 일어나는것 같더군요.
안그래도 이 부분에 대해 개발팀에게 문의드릴 생각이었는데...
지금으로서는 active 클라스를 생성하는 부분을 지워서 avtive를 포기하는 것 말고는 다른 방법이 없을듯 합니다.
현 상황에서는 js를 이용해 클라스나 그 무엇을 추가하는 방식이 active가 일어나는 li안에서는 작동안되고 있습니다. -
ForHanbi
2011.06.03 13:44
적고나니 불확실한 부분이 있는거 같아서....
tNav.find('li.active').addClass('open').parents('li').addClass('open');
위 부분에 문제가 있는거 같습니다.
제가 어제 다른이유로 addclass를 사용하고 있었는데 그게 class="active"|cond=" " 로 인해 .active가 된 상황에서는 addclass가 작동을 안하더군요. 그리 본다면
위에 open이라는 addclass가 작동이 안될 확율이 높은거 같습니다.
굳이 사용하고 싶다면 open을 다른방식으로 작동하게 하든가...
아니면 layout.html에서 .active를 생성시키지 말고 일단 .avtive 가 없는 상황으로 시작해서 js를 이용해 클릭할때 active가 붙도록 하는 방식을... -
tNav.find('li.active').addClass('open').parents('li').addClass('+ 'open');
위 부분은 잘 되는 것으로 보입니다. active 클래스가 적용된 곳은 '-' 아이콘 표시되고 메뉴도 펼쳐진 상태로 됩니다. 다만 active 가 적용되지 않으면서 리스트가 있는 메뉴가 '+' 아이콘이 표시되지 않는다는 겁니다. 이것도 마우스로 한번 클릭하고 나면 다시 정상적으로 '+' 아이콘이 표시됩니다. -
ForHanbi
2011.06.04 10:31
아~~ 전 active 때문에 고생을 해서... 그것때문인줄 알았습니다. -
어려워-초보에겐 그림의떡 이네요 모가뭔지통~~~
알수있는건 한가지 좋을거라는~~~~
줘도못먹는 바부~~~ -
hika1
2011.08.09 19:47
코드 하나마다 고심한 흔적이 느껴지네요 ^^
이런 소스를 미리 공개해주시다니 정말 감사드립니다~
너무 좋은 보기들이구요, 이런 소스들이 사용되어 xe에 활용될 것을 생각하니 너무 기쁩니다. 1.5가 기대되는 이유 중에 하나에요.
ps. 이번에 게시판, 레이아웃 스킨 업글하면서 여기 소스 마구 갖다 썼습니다~ ^^;
