082NeT

ajax spoiler를 응용한 이펙트 적용

effects.js스크립트를 블로그에 적용중이신 분이라면 블로그의 사이드바나 메뉴, 코멘트 등에 각종 효과를 적용하실 수 있습니다. 그 방법은 굉장히 다양하며, 직접 이펙트 스크립트를 추가해서 새로운 효과를 만들어 사용하실 수도 있습니다.

제가, 스크립트 언어에 대해서 그다지 잘 알지 못해 전반적인 기능이나 변형 적용에 대해서 설명 드리긴 힘들구요, 제 블로그에 적용한 방식을 정리해서 보여드리면 응용해서 적용하실 수 있을것 같네요.

이 글은 v0.9에 맞게 수정되었습니다.

1. 이펙트 적용 원리
  • 각 태그의 아이디(id)를 찾아서 그 아이디로 지정된 객체(element)를 숨기거나 보이게 합니다.
  • 간단한 예를 보여드리겠습니다. 이펙트 적용!(클릭하세요)
  • 위 예제의 코드를 살펴보겠습니다. 
    이펙트 적용!
  • Spoiler.Collapse(‘객체id’,’적용할이펙트’,this)가 주요 포인트입니다.
  • id가 ‘mycont’인 div태그가 나타났다가, 다시 클릭하면 사라집니다.
  • 사용할 수 있는 이펙트의 종류는 ajax-spoiler와 동일합니다.

2. 기본적인 적용법
  • 위 원리를 적용해서 사이드바에 이펙트를 넣어 보겠습니다.
    (이펙트 명령어는 항상 ‘Spoiler.Collapse‘를 사용합니다.)
  • 보통 일반적인 사이드바(sidebar.php)의 구성은 아래와 같습니다.(default테마)
  • ‘Categories’라는 메뉴에 이펙트를 적용해 보겠습니다. 기존의

    Categories

    를

    Categories

    로 바꿉니다.

  • 그 바로아래에 있는
      에 위에서 지정한id(sb-cat)와 같은 id를 지정합니다.

      


    • 주의하실점 :: 한 페이지에서 같은 id를 가진 객체는 단 하나 이어야 합니다. 
      • 

    • 끝입니다. 변경하신 사이드바 파일(sidebar.php)을 업로드해서 테스트해 보세요. 
      • 

    

    3. 응용하기
    

      

    • 기본으로 메뉴를 접혀있게 하고 싶을때는 
      

      의 class에 “collapsed”를 추가하시고, 
      

        에 style="display:none;"을 추가하면 됩니다.
        

        Categories
      

    • 	

    
	

    



  • anchor태그()를 이용해서 링크형태로 만들 수도 있습니다. 아래를 참고하세요.

    Comment List	

    
	

    

    

    • 


    4. 이펙트 버튼스타일
    


    아래 첨부된 파일은 Default테마에 위에 설명한 내용을 적용한 파일입니다. 참고하세요.
    

    download  default-example.zip(5.1 KB)
    








    

    


    082net
    


    


    , 
    








    



    


	
    
		10 responses to “ajax spoiler를 응용한 이펙트 적용”	
    

	
    
		
    
		
    
	
    

	
      
			
    1. 
			
		
      2. 
		
    2. 
			
      
				

				
      
					
      kayshini// 제가 kayshini님 블로그에서 확인해 봤는데 잘못된 collapseicon.gif파일이 보이네요. 아마 제가 잘못된 파일을 올렸을때 받으셨나봅니다. wp-aj-spoiler파일을 다시 받아서 collapseicon.gif만 교체해보세요. 괜한 수고 끼쳐드렸네요 ^^:
      
				
      

							
      
		
      3. 
		
    3. 
			
      
				

				
      
					
      사이트를 하나 만들고 있는데..blix 테마를 이용해서 사용중입니다..
      
다른건 다 잘되는데… 이상하게 css의 문제인지 +/- 마크가 안나오는군요..
      
css를 이리저리 만져봐도 마찬가지고…
      
무엇이 문제일까요.:oops:
      
				
      

							
      
		
      4. 
		
    4. 
			
      
				

				
      
					
      zenguy// zenguy님 블로그를 확인해보니 오타가 있네요. “effcollapse”라고 class를 지정하셔야 하는데 “effcolapse”라고 적으셨더라구요. 그부분을 고치면 될겁니다.:)
      

      커서변화는 제가 0.4버전 이후에 수정한 부분이라서 그렇습니다. aj-spoiler.css의 중간쯤에 .effcollapse 의 스타일정의 안에 “cursor: pointer;” 를 추가해주시면 됩니다.
      
				
      

							
      
		
      5. 
		
    5. 
			
      
				

				
      
					
      안녕하세요.:)
      
다름이 아니라, aj-spoiler plugin을 사용하려 위의 예제를 보고… 아래와 같이 입력을 하였습니다.
      

      그러나, -, +표시가 되질 않고 있습니다.
      
도무지 왜 그런것인지… 원인을 찾지 못하여, 이렇게 질문글 올립니다.
      

      더불어, 님과 같이 Related Entries – 에 커서를 갖다댈경우 포인터 변화도 일어 나지 않는군요. 어찌된 영문인지… 답변 주시면 감사하겠습니다. ^.^
      

      블로그를 멋지게~ 꾸미고픈 군발이가.. ^^
      
				
      

							
      
		
      6. 
		
    6. 
			
      
				

				
      
					
      […] 영팔님이 자세히 써놓은 대로,  wp-aj-spoiler.zip 파일을 다운로드해서 /wp-content/plugins/ 디렉토리에 올리고 관리화면 > 플러그인 > Ajax-Spoiler 활성화시킨후 “ajax spoiler를 응용한 이펙트 적용” 의 설명 대로 사이드바 편집 […]
      
				
      

							
      
		
      7. 
		
    7. 
			
      
				

				
      
					
      @Franky :: Hi Franky, that’s a cool idea, but  I can’t handle that… sorry^^;
      

      Thanks for your praise and suggestion.
      
				
      

							
      
		
      8. 
		
    8. 
			
      
				

				
      
					
      Hi, ajax spoiler is really a cool plugin, I installed it today and like it! 
      

      One suggestion, is it possible to add a feature to remember the show/hide choice? either using cookie or some other way. I think it will be more useful if u can remember the user’s choice. For example, when I read the blog, I hide the post I am not interestd, so next time when I read the same blogs again, it will remember what I did last time and only show the interesting post.
      

      Just a suggestion, thanks a lot for your effort.
      
Franky
      
				
      

							
      
		
      9. 
		
    9. 
			
      
				

				
      
					
      @bum :: k2를 변형한 테마중에 말씀하신것과 비슷한 테마가 있었던거 같네요. k2포럼이나 House of K2사이트에서 한번 뒤져보세요. 저도 욕심같아서는 k2제작자의 홈처럼 만들고 싶은데, 지금으로선 감도 안잡힙니다.
      

      이번주말에 변화된 bum님의 블로그 기대하겠습니다.. ;)
      
				
      

							
      
		
      10. 
		
    10. 
			
      
				

				
      
					
      유용한 팁이네요. 안그래도 사이드 바를 없애고 페이지 상하단에 네비게이션과 인포메이션 박스를 ajax spoiler로 만들어볼라고 하고 있습니다만, k2 테마를 최대한 손안대고 style만으로 처리 해볼라니 잘 안돼는군요. 시간도 없고 :cry:주말에 여친도 놀러가겠다 맘 먹고 제 k2 style 완성 예정입니다.. 언제까지나 예정:?
      
				
      

							
      
		
      11.