본문 바로가기

IT tech Coding/jquery22

부드러운 스크롤 이동, jQuery로 쉽게 구현하기 웹사이트를 만들다 보면 특정 버튼을 클릭했을 때, 해당하는 섹션으로 부드럽게 이동하는 기능이 필요할 때가 많습니다. 예를 들어, 네비게이션 메뉴에서 '서비스 소개' 버튼을 클릭하면 해당 섹션으로 자연스럽게 스크롤되도록 만드는 기능이죠.이러한 기능을 구현하는 방법은 여러 가지가 있지만, jQuery를 활용하면 간단하게 처리할 수 있습니다. 오늘은 jQuery를 이용해 부드러운 스크롤 이동 기능을 구현하는 방법을 자세히 설명해 보겠습니다. jQuery를 활용한 부드러운 스크롤 이동 기능아래의 코드를 보면 특정 버튼을 클릭하면 해당하는 영역으로 부드럽게 이동하는 기능을 구현할 수 있습니다.1. 기본적인 jQuery 코드function fnMove(seq) { var offset = $("#div" + s.. 2025. 2. 19.
제이쿼리 DataTables 사용법: 초보자를 위한 상세 가이드 웹 개발을 하다 보면 많은 양의 데이터를 깔끔하고 효율적으로 표시해야 할 때가 있습니다. 이럴 때 많이 활용되는 도구 중 하나가 바로 DataTables입니다. 오늘은 제이쿼리와 DataTables를 이용해 HTML 테이블에 다양한 기능(페이징, 정렬, 검색 등)을 추가하는 방법을 알아보려고 합니다.먼저 아래와 같이 DataTables를 초기화하는 코드를 보겠습니다.// DataTables 초기 설정dataTable = $('#myTable').DataTable({ "paging": true, "ordering": true, "searching": true, "pageLength": 50, "lengthMenu": [25, 50, 100, 200, 500, 1000], ".. 2025. 2. 11.
대량 데이터도 빠르게! DataTables 서버사이드 처리와 모듈화로 최적화하기 GPT를 통해 최대한 좋은 코드를 뽑아보려고 테스트한 내용입니다.제이쿼리 datatable에 대해서 공부해서 프로그램에 적용해 보려고 한다.jQuery DataTable은 강력하고 유연한 테이블 플러그인으로, 데이터 정렬, 검색, 페이징, 필터링 등을 간단히 구현할 수 있습니다. 프로그램에 적용할 때 필요한 예제를 제공하거나, 구체적인 사용 시나리오를 알려주시면 맞춤형 가이드를 드릴 수 있습니다!코드를 제공해 봤습니다.보통 mytable이라고 테이블을 만들고, 아래와 같은 코드를 사용하고 있다. 일단 이 내용을 학습해줘.var dataTable; // DataTables 인스턴스 전역 변수var annualleavepageNumber; // 현재 페이지 번호 저장을 위한 전역 변수$(document).r.. 2024. 12. 21.
HTML 폼 요소에 Readonly 효과 적용하기: jQuery를 활용한 코드 작성법 폼 요소를 다루다 보면 select와 checkbox 요소에 readonly 속성을 적용해야 할 때가 있습니다. HTML 표준에서는 input 요소와 달리 select나 checkbox에 직접적으로 readonly 속성을 적용할 수 없기 때문에 JavaScript 또는 jQuery를 사용해 간접적으로 처리해야 합니다. 이번 글에서는 이를 효율적으로 구현하는 방법을 알려드리겠습니다. select 요소에 Readonly 효과 적용하기select 요소는 기본적으로 값을 선택할 수 있도록 드롭다운 메뉴가 열립니다. 하지만 readonly 속성을 적용해야 할 경우, JavaScript를 활용해 사용자가 메뉴를 열지 못하게 설정할 수 있습니다.jQuery 코드 예제$('select[data-readonly="tru.. 2024. 11. 24.
jquery ajax 중복호출 벗어나자, 진짜 이것때문에 개고생함 처음에 이런 생각을 했다. 왜 ajax로 호출하면... 당연히 한번만 하는 건데, 중복호출?? 이게 말이되나? 단순하게 처음 생각이 들었던 것이.. 당연히 a= a+1 이러면 한번만 실행되지.. 저것이 두번실행되고 세번?? 이건 말이 안되는 것 같아서 감이 더 안왔다. $.ajax({ enctype: 'multipart/form-data', // file을 서버에 전송하려면 이렇게 해야 함 주의 processData: false, contentType: false, cache: false, timeout: 600000, url: "process.php", type: "post", data: data, // dataType:"text", // text형태로 보냄 success : function(data).. 2023. 3. 24.
[jquery] 웹에서 특정 버튼이나 문구 등 마우스 오른쪽 버튼 누를때 메뉴보이게 만들기 우리가 웹사이트에서 특정 버튼이나 문구 등에 마우스 오른쪽을 누르면 어떤 메뉴를 구현하고 싶을때 유용한 정보입니다. 활용방법은 너무 다양하겠지요. 오른쪽 버튼을 누르면 메뉴가 뜨게 만들어서 뭔가 연관된 일을 처리할때... 웹상에서 어떻게 구현할지 고민이라면 이 코드가 필요할거에요~ 이 코드로 구현이 가능한데, 디자인은 좀 신경써야 좋겠어요~ 결과물은 위와 같이 되는거죠~ 메뉴 항목 1 메뉴 항목 2 메뉴 항목 3 오른쪽 버튼으로 메뉴 보기 메뉴 이외의 다른 곳을 누르면 메뉴가 사라지는 것까지 구현된 상태입니다. 제이쿼리로 비교적 간단히 만들 수 있다는 것을 기억해 주세요~ 2023. 3. 2.
반응형