본문 바로가기

제이쿼리4

[tooltip] JQuery-ui.js, 요소 tooltip 생성부터 커스텀까지 특정요소 mouseover 이벤트를 감지하여 tooltip을 표출하는 작업을 진행하기에 앞서, 'tooltip관련 라이브러리가 없을리가 없는데?'하는 내면의 질문에서 출발하였다. 역시 직접 생성해내는 것 보다, 만들어진 라이브러리를 활용하는게 가장 빠르고 편한 것 같다. 관련 라이브러리는 Bootstrab, JQuery-ui로 두 개의 검색 결과가 있었으나, 본인의 경우 JQuery-ui를 활용하여 tooltip을 생성하고, 그에 대한 내용을 포스팅할 예정이다. https://jqueryui.com/tooltip/ Tooltip | jQuery UI Tooltip Customizable, themeable tooltips, replacing native tooltips. Hover the links ab.. 2023. 12. 7.

타임슬라이더 구현 input range를 활용하여 time slider를 구현하게 되어, 그에 대한 코드들을 아래 정리해보았다 Edge, chorme에서는 정상 작동 되었으나, IE에서는 일부 JS코드와 스타일이 비정상 작동하여, 추후 동기화 되도록 작업 후 코드와 게시글을 수정하였다. 작업 단계는 아래와 같이 분류하였다. 1. 레이아웃2. range 눈금 설정3. 조작버튼4. tooltip 생성5. 이벤트 1. 레이아웃 우선 조작을 위한 버튼과 input을 배치할 위치를 정하고, 그에 대한 레이아웃을 먼저 정의하였다. 가급적 내용은 생략하고 어떤 요소들을 가질 것이며 누구의 자식요소로 배치할지를 먼저 작성하였다. 구현 완료된 jsp페이지의 코드를 첨부하자면 아래와 같다. 각 목차별로 뜯어가며 자세히 설명.. 2022. 6. 24.

요소의 조작 : 제이쿼리 요소의 조작과 관련된 JQuery의 메서드에 대해 정리해보았다. 목차는 다음과 같다. 내용을 표로 간결히 확인할 수 있도록 하였기에 더 자세한 내용은 각 단락별로 첨부된 링크를 통해 확인할 수 있다. 각 메서드별 경계가 모호하다고 느껴질때는 특정 메서드들의 차이점을 검색하여 이해할 수 있다. 1. getter & setter 1) getter 2) setter 2. 요소(컨텐츠)의 추가 3. 요소(컨텐츠)의 복사 및 삭제 1) 복사 2) 삭제 1. getter & setter 1) getter 아래의 보기를 통해 표를 이해할 수 있다. 안녕하세요 메서드 내용 html() 선택요소 하위의 태그와 문자열을 전부 가져옴 ex) 안녕하세요 text() 선택요소 하위의 문자열만 가져옴 ex) 안녕하세요 val().. 2022. 5. 31.

jQuery의 사용(연결방법 포함) 해당 포스팅의 목차는 다음과 같다. 1. jQuery란? 2. jQuery라이브러리 연결 1) 파일 다운하여 연결하는 방법 2) CND활용 연결 방법 3. 문법과 선택자 1) 문법 2) 선택자 4. jQuery를 활용한 기능 구현 1) 무한 스크롤 2) 풀다운 3) 갤러리(배너) 5. 플러그인 1. jQuery란? 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리는 여러분의 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해줍니다. 또한, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다. 이러한 제이쿼리는 오늘날 가장 인기 있는 자바스크립트 라이브러리 중 하나입니다. 이런 제이쿼리의 장점은 다음과 같다. 제이쿼리는 주요.. 2022. 2. 22.

이전 1 다음

티스토리툴바