개발공작소
728x90
반응형
[JQuery] 제이쿼리의 mCustomScrollbar에서 <thead>를 고정시키는 방법
FrontEnd/JQuery 2023. 7. 21. 12:40

디자인 업체가 이번에 단순 목록 퍼블을 줬는데 아래와 같은 구조로 줬다. 근데 이 코드로 목록을 표출하면 스크롤을 내릴 때, 헤더까지 같이 내려간다. 감리요청 사항이 헤더는 고정되게 해달라는 요청사항이 있었는데.. 일반 태그면 문제가 없었겠지만, 나 태그에는 제이쿼리로 각각 스크롤을 줄 수 없다고 해서 와 를 태그로 감싸서 필요한 부분에 스크롤바를 주었다. 코드는 아래와 같다. 수정전 코드 $(".table_wrapper").mCustomScrollbar({ theme: "minimal-dark", }); 헤더1 헤더2 헤더3 바디1 바디2 바디3 수정후 코드 $(".body_wrapper").mCustomScrollbar({ theme: "minimal-dark", }); 헤더1 헤더2 헤더3 바디1 ..

article thumbnail
[JQuery] 제이쿼리로 드래그 앤 드롭 기능을 구현 :: sortable 함수
FrontEnd/JQuery 2022. 8. 6. 14:32

이번에 동기가 드래그 앤 드롭 기능을 구현하는 것을 보았는데, 생각해보니 나도 드래그 앤 드롭으로 뭘 만들어 본 적이 없어서 이번에 그냥 재미삼아 만들어 보려고 한다. 실제 이것저것 만드는 기능은 바닐라js로 만들 생각이지만, 제이쿼리에 sortable 함수도 있길래 그냥 간단히 정리만 해보려고 한다. 아래와 같은 목차로 진행되니 보도록 하자. 기본문법 예제 그외 sortable의 편리한 속성들 제이쿼리의 sortable 함수를 활용한 드래그 앤 드롭 구현 당연하지만 제이쿼리의 함수를 사용하는 것이기 때문에, 제이쿼리 라이브러리를 추가해줘야 한다. cdn을 남겨놓을테니 필요한 사람은 가져다 쓰도록 하자. 제이쿼리 cdn코드 기본문법 $([열에 해당하는 컬럼]).sortable({ items : $([행에..

728x90
반응형