Style7 자바스크립트를 이용해서 링크 클릭시 테이블 보이기 숨기기 style display 활용 고객센터 질문과답변 페이지를 보여 줄때 답변 내용이 길게 나올 경우 페이지가 쭉 늘어나 정작 필요한 답변을 찾기가 쉽지가 않습니다. 이럴때 답변은 숨겨 놓고 질문 제목을 클릭하면 답변이 보이며 좀전 열었던 답변은 숨기는 기능을 자바스크립트와 style display을 이용해서 적용해 보겠습니다. 1. 자바스크립트 소스 2. 테이블 소스 질문1 답변1 질문2 답변2 질문3 답변3 3. 소스 설명 : 제목을 클릭시 자바스크립트 QnaShow() 함수를 호출합니다. 이때 함께 전달한 qna 값으로 어떤 질문을 클릭했는지 구분합니다. 먼저 모든 질문을 숨기기 처리합니다. 1번 질문을 본뒤에 2번 질문을 클릭시 1번 질문을 숨기고 2번 질문의 답변을 보여주기 위한 처리인데 일괄적으로 모든 질문의 답변을 숨긴뒤에 .. 2010. 12. 22. input 박스에 입력시 영문으로만 입력 되도록 하거나 한글로 선택 되도록 설정 ime-mode style 로그인 또는 회원가입 할때 사용자로 부터 정보를 입력 받을 때, input 입력 박스를 활용하는데, 이때 사용자 키보드 설정 상태가 한글 또는 영문 상태에 따라 잘못된 값을 입력할 수 있어서 이를 방지 하기 위해 style의 ime-mode를 이용해서 제어 할 수 있습니다. 아이디 : 위 예제는 아이디를 입력 받는 input 박스로써 style속성에 때문에 한글이 입력이 안되며 영문만 입력이 됩니다. 보통 자바스크립트로도 구현 가능하지만 이처럼 스타일을 이용해서 손쉽게 제어 할 수 있습니다. 다음은 ime-mode 옵션에 대한 설명 입니다. style="ime-mode:auto" - 현재 선택되어 있는 상태로 한/영중 선택 style="ime-mode:active" - Default로 한글 선택 되는 모.. 2010. 11. 1. input 박스에 입력시 영문으로만 입력 되도록 하거나 한글로 선택 되도록 설정 ime-mode style 로그인 또는 회원가입 할때 사용자로 부터 정보를 입력 받을 때, input 입력 박스를 활용하는데, 이때 사용자 키보드 설정 상태가 한글 또는 영문 상태에 따라 잘못된 값을 입력할 수 있어서 이를 방지 하기 위해 style의 ime-mode를 이용해서 제어 할 수 있습니다. 아이디 : 위 예제는 아이디를 입력 받는 input 박스로써 style속성에 때문에 한글이 입력이 안되며 영문만 입력이 됩니다. 보통 자바스크립트로도 구현 가능하지만 이처럼 스타일을 이용해서 손쉽게 제어 할 수 있습니다. 다음은 ime-mode 옵션에 대한 설명 입니다. style="ime-mode:auto" - 현재 선택되어 있는 상태로 한/영중 선택 style="ime-mode:active" - Default로 한글 선택 되는 모.. 2010. 10. 29. text-overflow 이용한 텍스트 길이 제한하기 게시판 리스트의 경우 제목이 길어지는 경우 특정 길이 이상은 자르고 "..." 붙이는거 많이 보셨을겁니다. 보통 php의 경우 substr() 함수를 이용하거나 left() 함수등 언어에 따라 다양하게 활용하는데 style로 간단하게 적용할 수 있습니다. text-overflow 옵션을 활용하는 것입니다. ellipsis 내용 ellipsis-word 내용 clip 내용 inherit 내용 링크에적용1 내용 링크에적용2 내용 테이블에 적용 내용 ------------------------------------------------------------------------------------ #example1 {text-overflow-mode: clip; width: 200px; overflow:hi.. 2009. 10. 31. 이전 1 2 다음