게시판 등의 리스트 화면에서 제목 등을 클릭하면 아래 쪽에 내용이 슬라이딩 되면서 보이는 기능을 구현한 코드이다. HTML 코드는 아래와 같이 구성되어 있다. <li class=”list”> <div class=”no”><?php echo $no; ?></div> <div class=”content_wrap”> <div class=”name”><span><?php echo $name; ?></span></div> <div class=”phone”><?php echo $phone; ?></div> <div class=”email”><?php echo $email; ?></div> <div class=”content”><?php echo $content; ?></div> …
위 이미지와 같은 개럴리 스라이더를 구현하기 위해 어제 많은 시간을.. 황금같은 금요일에 밤 11시까지 사무실에서 작업을 했으니 내가 미친 것이 아닌가 싶다. ㅋ 이렇게까지 복잡한 기능을 만들려고 한 것은 아닌데.. 자꾸 요구사항을 듣고 기능을 추가하다 보니 대략 난감. ㅎㅎ 동적으로 DB에서 데이터를 불러와서 슬라이드 기능을 구현하는 것이라 상당히 머리를 많이 썼다. 기존에 구현된 것을 찾아서 …
제목을 쓰고 보니 조금 거시기 한데.. 뭘 말하는 것이냐면 어떤 사이트에서 클릭하거나 하면 화면이 반투명의 화면으로 바뀌는 것을 볼 수 있는데 그걸 구현하는 방법이다. 다른 방법도 많이 있겠지만 난 그냥 jQuery를 이용해 반투명의 PNG 이미지를 화면 전체에 보이도록 하는 방법을 선택했다. 그게 처음에 떠오른 방법이었기 때문이다. 우선 아래는 CSS 코드이다. #overlap { display: none; position: …
작업 중인 쇼핑몰 통계부분에서 요일별 방문자수를 구해야할 일이 생겼다. MySQL에 DATE_FORMAT 을 이용하면 나름 쉽게 처리할 수 있을 것 같아 간단하게 코드를 작성해봤다. 생각대로 원하는 결과가 나와서 아주 만족했다는.. 위 이미지처럼 그래프까지 표시를 해야하는데.. 이렇게 표시하는 건 어려운게 아닌데 그래프가 위로 솟아오르는 것과 같은 애니메이션을 요구해서 결국은 jQuery의 animate() 까지 이용을 하게 됐다. 기본 작동원리는 …
이미지와 같은 부분을 jQuery를 이용해서 작업했다. 번호 입력 후 추가 버튼을 클릭하면 아래 리스트에 추가되고 리스트의 X 버튼을 클릭하면 추가된 번호가 삭제된다. 말로하면 별 것도 아닌 기능인데 이걸 구현한다는 것은.. 근본 바탕이 없는 나에게는 쉬운 일은 아니었다. 번호 추가를 하는 것은 쉽다. after()를 이용하면 되니까.. 근데 문제는 리스트가 세로로 추가된다는 것이다. 01 아래에 02 이런 …