Play Ground

var url = window.location
// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
	 return this.href == url;
}).parent().addClass('active');

// for treeview
$('ul.treeview-menu a').filter(function() {
	 return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');

window.location을 이용하여 url을 가져오고,

메뉴의 링크와 비교하여 같다면 active class를 추가한다.

유튜브를 사이트에 붙이려면 원하는 동영상 가서 밑의 그림처럼 공유버튼 -> 소스코드에 있는 iframe 코드를 복사해서 사용하면 된다.

근데... 두둥

재생 일시정지 중지를 따로 버튼을 만들어 제어해야하는 일이 발생하였다고 한다!

그럴땐

1.

src에 마지막에 ?enablejsapi=1&version=3&playerapiid=ytplayer 를 붙인다.

위의 캡쳐된 소스코드로 보자면 <iframe width="560" height="315" src="https://www.youtube.com/embed/liGwFOQr45Q?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>

요런식으로 작성한 후에

2. 제어할 버튼에 이벤트 추가

$(".stop").on("click", function(){
	$("iframe")[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});

stopVideo, playVideo, pauseVideo를 저기 빨간부분에 알맞게 넣으면 된다.

네이버(http://m.naver.com) 이나 다음(http://m.daum.net)의 모바일버전을 보면

메인메뉴 영역을 스와이프해서 전체 메뉴를 훑을 수 있게 만들어졌다.

이 기능을 만들어 보고자 개발자 모드로 확인하였더니 css의 transform, transition 등을 이용해서 만든 것으로 보였다.

그래서 나는 trans관련 css와 함께 스와이프 동작을 인식해야하므로 jquery의 touchstart, touchmove, touchend를 이용해서 만들었다.

참고로 touchstart, touchmove, touchend는 마우스로는 작동이 안되고 핸드폰에서만 작동하는 것을 확인하였다.

처음 작성된 html코드는

$("#target").on("click", function(){
    이벤트
});

이런식으로 작성하면 이벤트가 잘 먹었다.

근데 append나 prepend, before, after로 생성한 태그에는 이벤트가 먹지 않았음! 주륵

열심히 구글링 한 결과 저 코드를 조금만 응용하면 된다고 함(참고로 1.7 이후버전)

$(document).on("click", "#target", function(){
    이벤트
});

대충 정리하면

$(document).on(1, 2, 3)

1 -> click, mouseover, keyup 등의 이벤트

2 -> 타겟태그(#은 id, .은 class)

3 -> 함수

1. AddyWaddy jQuery Tag Cloud

2. IndyArmy jQuery Awesome Cloud

3. Tag Clouds – Styling and Adding Sort Options

4. DynaCloud – dynamic tag cloud with jQuery

5. jQuery Rotating 3D Tag Cloud

6. jCloud Tag Cloud Plugin

7. jQCloud Word Clouds

8. Prataes jQuery Tag Cloud

9. jQuery Tag Cloud Plugin

10. TagCanvas – HTML5 Canvas Tag Cloud

참고 : http://www.websanova.com

각종 글자 애니메이션 jquery 소스모음

(http://www.giuliandrimba.com/labs/lettering-animate/)

jquery 소스천국 사이트

(http://www.htmldrive.net)

구글링하다가 찾은 퀵메뉴 소스인데

출처를 모르겠다ㅠㅠㅠ