'분류 전체보기'에 해당되는 글 223건
- 2014.04.29 네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기
- 2014.04.11 Oracle Client 다운로드 받기
- 2014.04.10 jQuery 로 탭메뉴 보였다 안보였다 맹글기 3
- 2014.04.09 Subsonic 안드로이드 클라이언트 : DSub 최신버전 apk 다운로드 받기
- 2014.04.09 Subsonic 또다른 Web UI : Perisonic
네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기
Javascript 예제 2014. 4. 29. 11:11
네이버 지도에 커스텀 버튼을 넣을라고 공식 API 문서를 디벼보면서 추가해 볼려고 했더니 생각대로 잘 넣어지지 않았다 -.-
구글님에게 이것저것 디벼보면서 커스텀 버튼을 뽓 넣었다. API 문서좀 잘 맹글어 주지하는 아쉬움은 있지만 뭐 어쩌나~~
버튼을 쪽바로 넣기 위해서는 <div style="position: absolute;"></div> 로 버튼을 한번 뽓 감싸줘야 된다.
솟스
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=KEY"></script>
<link rel="stylesheet" type="text/css" href="http://static.naver.com/openapi_map/maps_openapi.css?13916988001">
<style>
a.btn {
display:inline;padding:7px 12px;background-color:#5cb85c; color:#fff; border:solid 1px #1658a2;
font-weight:bold;text-decoration:none
}
a.btn:hover { color:#cce4ff; border:solid 1px #002651; }
</style>
</head>
<body>
<div id="maptest"></div>
<script>
var map = new nhn.api.map.Map(
document.getElementById('maptest'),
{
point : new nhn.api.map.LatLng(35.710659, 127.883093),
zoom : 2,
mapMode : 0,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(600, 700)
}
);
var btn = new nhn.api.map.CustomControl();
var html = '';
html += '<div style="position: absolute;">';
html += '<a class="btn" target="_blank" href="http://stove99.tistory.com">커스텀 버튼!!</a>';
html += '</div>';
btn.createControl(html, {position:{right:20,top:55}});
map.addControl(btn);
</script>
</body>
</html>
'Javascript 예제' 카테고리의 다른 글
| Javascript 로 초성검색하기 (0) | 2018.06.26 |
|---|---|
| jQuery 로 탭메뉴를 맹글어 보아요~ (8) | 2014.10.15 |
| jQuery 로 탭메뉴 보였다 안보였다 맹글기 (3) | 2014.04.10 |
| jQuery로 Outer HTML 가져오기 (2) | 2012.11.06 |
| jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
Oracle Client 다운로드 받기
쓸만한지식 2014. 4. 11. 15:33
토드는 다 좋은데 오라클 클라이언트가 설치되 있어야 디비에 접속을 할 수 있다는 살짝 후진점이 있다.
클라이언트 없어도 토드로 접속하는 방법을 찾아보는게 귀찮을까? 오라클 클라이언트를 설치하는게 귀찮을까?
쪼금 찾아보다 그냥 오라클 클라이언트를 설치하기로 했다.
근데 막상 클라이언트를 다운로드 받을려니 오라클 사이트에서 너무 꽁꽁 숨겨놓았는지 드럭게 찾기 힘들었다.
다운로드 받으러 고고씽
http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html
요기서 자신이 원하는 OS 버전옆의 See All 을 클릭해야 클라이언트를 다운받을 수 있는 페이지가 나타난다.
Oracle 12c 클라이언트 받을 사람들은 위쪽에 있는 See All 클릭하면 되겠다.
요기서 다운
'쓸만한지식' 카테고리의 다른 글
| 토드(Toad) 안쓰는 세션 목록 지우기 (1) | 2014.05.29 |
|---|---|
| Jetty 로 개발할때 org.eclipse.jetty.util.Utf8Appendable$NotUtf8Exception: Not valid UTF8! 익셉션 처리 (0) | 2014.05.14 |
| GitLab 아바타 이미지 안나올때 (0) | 2014.04.01 |
| 이클립스로 GitLab 연결하기 (egit 이용) (2) | 2014.03.31 |
| Ubuntu GitLab 설치하기 with apache, mysql (0) | 2014.03.27 |
jQuery 로 탭메뉴 보였다 안보였다 맹글기
Javascript 예제 2014. 4. 10. 17:11
탭을 클릭할때 탭메뉴 이미지가 on, off 되고 해당되는 서브메뉴 div 가 보였다 안보였다 하는 샘플을 맹글어 보았다.
주석을 싹 달아놨으니 응용하는데 큰 문제는 없을것이다.
※ 롤오버 이미지 이름은 프로그램 편의상 xxxxxx.png, xxxxxx_on.png 요렇게 해야 쪽바로 작동한다.
※ png 파일이 아니라 gif 나 뭐 다른 확장자면 소스중에 .toggle() 요부분에다 옵션으로 지정할 수는 있다. 고건 주석으로 설명되 있음.
html
<div id="wrap">
<div id="tabMenu">
<ul>
<li><a href="#" title="메뉴1"><img src="images/tab_01.png" alt="메뉴1" /></a></li>
<li><a href="#" title="메뉴2"><img src="images/tab_02.png" alt="메뉴1" /></a></li>
<li><a href="#" title="메뉴3"><img src="images/tab_03.png" alt="메뉴2" /></a></li>
<li><a href="#" title="메뉴4"><img src="images/tab_04.png" alt="메뉴3" /></a></li>
<li><a href="#" title="메뉴5"><img src="images/tab_05.png" alt="메뉴4" /></a></li>
<li><a href="#" title="메뉴6"><img src="images/tab_06.png" alt="메뉴5" /></a></li>
<li><a href="#" title="메뉴7"><img src="images/tab_07.png" alt="메뉴6" /></a></li>
</ul>
</div>
<div id="tabSubMenu">
<div>서브1<div>룰루랄라~</div></div>
<div>서브2</div>
<div>서브3</div>
<div>서브4</div>
<div>서브5</div>
<div>서브6</div>
<div>서브7</div>
</div>
</div>
javascript
var tabMenu = $("#tabMenu ul>li>a");
var tabSubMenu = $("#tabSubMenu>div");
// 모든 서브메뉴 안보이게
tabSubMenu.hide();
// 탭메뉴 a 를 클릭했을때
tabMenu.on("click", function(e){
// 클릭한 메뉴가 몇번째 메뉴인지 가져옴
var idx = tabMenu.index($(this));
// 모든 서브메뉴 안보이게
tabSubMenu.hide();
// 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
tabSubMenu.eq(idx).show();
// 현재 on 이미지를 off 이미지로 변경
tabMenu.find("img.on").removeClass("on").toggle();
// 클릭한 탭 이미지만 on 이미지로 변경
$(this).find("img").addClass("on").toggle({to:"on"});
});
/**
이미지 토클 훌러그인
$("img").toggle(); // on이면 off로, off면 on 이미지로
$("img").toggle({to:"on"}); // 무조건 on 이미지로
// on, off 이미지 패턴설정
$("img").toggle({to:"on", on:"_on.gif", ".gif"});
*/
$.fn.toggle = function(opt){
var base = {
to : null,
on : "_on.png",
off : ".png"
};
$.extend(base, opt);
this.each(function(){
var el = $(this);
if(!el.is("img")) return;
var src = conv = el.attr("src");
// to 옵션이 있을때
if( base.to ){
if( base.to=="on" && (src.indexOf(base.on)<0) ) conv = src.replace(base.off,base.on);
else if( base.to=="off" ) conv = src.replace(base.on,base.off);
}
// to 옵션이 없으면 토글 처리
else{
conv = (src.indexOf(base.on) < 0) ? src.replace(base.off,base.on) : src.replace(base.on,base.off);
}
el.attr("src", conv);
el.data("orgimg", conv);
});
return this;
};
// 페이지 로딩시 맨 첫번째 메뉴 튀어나와 있게 함.
tabMenu.eq(0).click();
전체소스
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="tabMenu">
<ul>
<li><a href="#" title="메뉴1"><img src="images/tab_01.png" alt="메뉴1" /></a></li>
<li><a href="#" title="메뉴2"><img src="images/tab_02.png" alt="메뉴1" /></a></li>
<li><a href="#" title="메뉴3"><img src="images/tab_03.png" alt="메뉴2" /></a></li>
<li><a href="#" title="메뉴4"><img src="images/tab_04.png" alt="메뉴3" /></a></li>
<li><a href="#" title="메뉴5"><img src="images/tab_05.png" alt="메뉴4" /></a></li>
<li><a href="#" title="메뉴6"><img src="images/tab_06.png" alt="메뉴5" /></a></li>
<li><a href="#" title="메뉴7"><img src="images/tab_07.png" alt="메뉴6" /></a></li>
</ul>
</div>
<div id="tabSubMenu">
<div>서브1<div>룰루랄라~</div></div>
<div>서브2</div>
<div>서브3</div>
<div>서브4</div>
<div>서브5</div>
<div>서브6</div>
<div>서브7</div>
</div>
</div>
<script>
var tabMenu = $("#tabMenu ul>li>a");
var tabSubMenu = $("#tabSubMenu>div");
// 모든 서브메뉴 안보이게
tabSubMenu.hide();
// 탭메뉴 a 를 클릭했을때
tabMenu.on("click", function(e){
// 클릭한 메뉴가 몇번째 메뉴인지 가져옴
var idx = tabMenu.index($(this));
// 모든 서브메뉴 안보이게
tabSubMenu.hide();
// 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
tabSubMenu.eq(idx).show();
// 현재 on 이미지를 off 이미지로 변경
tabMenu.find("img.on").removeClass("on").toggle();
// 클릭한 탭 이미지만 on 이미지로 변경
$(this).find("img").addClass("on").toggle({to:"on"});
});
/**
이미지 토클 훌러그인
$("img").toggle(); // on이면 off로, off면 on 이미지로
$("img").toggle({to:"on"}); // 무조건 on 이미지로
// on, off 이미지 패턴설정
$("img").toggle({to:"on", on:"_on.gif", ".gif"});
*/
$.fn.toggle = function(opt){
var base = {
to : null,
on : "_on.png",
off : ".png"
};
$.extend(base, opt);
this.each(function(){
var el = $(this);
if(!el.is("img")) return;
var src = conv = el.attr("src");
// to 옵션이 있을때
if( base.to ){
if( base.to=="on" && (src.indexOf(base.on)<0) ) conv = src.replace(base.off,base.on);
else if( base.to=="off" ) conv = src.replace(base.on,base.off);
}
// to 옵션이 없으면 토글 처리
else{
conv = (src.indexOf(base.on) < 0) ? src.replace(base.off,base.on) : src.replace(base.on,base.off);
}
el.attr("src", conv);
el.data("orgimg", conv);
});
return this;
};
// 페이지 로딩시 맨 첫번째 메뉴 튀어나와 있게 함.
tabMenu.eq(0).click();
</script>
</body>
</html>
※ 마우스 오버될때도 적용할려면~~?
// 탭메뉴 a 를 클릭했을때
tabMenu.on("click", function(e){
// 클릭한 메뉴가 몇번째 메뉴인지 가져옴
var idx = tabMenu.index($(this));
// 모든 서브메뉴 안보이게
tabSubMenu.hide();
// 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
tabSubMenu.eq(idx).show();
// 현재 on 이미지를 off 이미지로 변경
tabMenu.find("img.on").removeClass("on").toggle();
// 클릭한 탭 이미지만 on 이미지로 변경
$(this).find("img").addClass("on").toggle({to:"on"});
}).on("mouseover", function(){
// 마우스 오버됬을때 클릭한것처럼 동작
$(this).click();
});
메뉴 심플하기 그지 없다.
'Javascript 예제' 카테고리의 다른 글
| jQuery 로 탭메뉴를 맹글어 보아요~ (8) | 2014.10.15 |
|---|---|
| 네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기 (0) | 2014.04.29 |
| jQuery로 Outer HTML 가져오기 (2) | 2012.11.06 |
| jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
| jQuery 로 원하는 갯수만큼 checkbox 선택하기 (1) | 2011.11.24 |
Subsonic 안드로이드 클라이언트 : DSub 최신버전 apk 다운로드 받기
Ubuntu server/Music 2014. 4. 9. 17:17
안드로이드용 서브소닉 클라이언트 DSub 최신 버전 apk 다운로드 받기
개발자분이 GitHub 에 친절하게 apk 파일을 맹글어서 올려주신다.
https://github.com/daneren2005/Subsonic/releases
'Ubuntu server > Music' 카테고리의 다른 글
| Subsonic 또다른 Web UI : Perisonic (0) | 2014.04.09 |
|---|---|
| subsonic media scan 했을때 한글 태그정보가 깨질때 (0) | 2014.03.07 |
| subsonic 심플한 웹UI로 음악감상 즐기기 (1) | 2014.03.04 |
| subsonic 4.9 앨범이름 이상하게 나오는것 수정하기 (2) | 2014.02.25 |
Subsonic 또다른 Web UI : Perisonic
Ubuntu server/Music 2014. 4. 9. 16:45
웹서핑을 하다 문득 minisub 말고 서브소닉 웹UI 가 몇개 더 있다는걸 발견했다.
쭉 한번 훑어 봤는데 그 중에서 Perisonic 이라는게 겁내 심플하고 디쟈인도 쫌 좋아 보였다.
뭐 어차피 브라우져로 노래 틀어놓으면 그거 디쟈인 보고 있진 않지만 -_-
아무튼 요것의 특징은 그냥 무조건 랜덤 훌레이를 한다는것이다. 노래선택 기능 따윈 없다. 다음곡 이전곡 일시정시 기능 밖에 없다.
나같은 경우는 딱히 앨범지정해서 듣지 않고 랜덤하게 아무노래나 듣는걸 좋아한다. 그래서 요것이 딱인것 같기도 했다.
내서버에 설치할려고 쭉 검색해 봤는데 따로 GitHub 같은데 소스를 올려놓은것 같지는 않았다.
굳이 내서버에 설치하고 싶다면 HTTrack 같은 후로그램으로 html 소스를 싹 긁어다 내 서버 적당한데다 복사해 넣으면 된다.
굳이 설치를 하지 않고 간단히 http://www.robinbakker.nl/perisonic/ 요기에 접속해서 서브소닉 접속정보 입력하면 노래를 들을 수 있다.
디쟈인
마우스를 웹페이지 상단 부분으로 뽓 이동 시키면 살짝 메뉴도 튀어나온다. 설정할만한건 거의 없지만 -.-
'Ubuntu server > Music' 카테고리의 다른 글
| Subsonic 안드로이드 클라이언트 : DSub 최신버전 apk 다운로드 받기 (0) | 2014.04.09 |
|---|---|
| subsonic media scan 했을때 한글 태그정보가 깨질때 (0) | 2014.03.07 |
| subsonic 심플한 웹UI로 음악감상 즐기기 (1) | 2014.03.04 |
| subsonic 4.9 앨범이름 이상하게 나오는것 수정하기 (2) | 2014.02.25 |
