레이아웃
해당 스킨은 범용성 개발을 위해서 글을 내리려하였으나, 댓글이 10개이상 달려서 삭제가 되지않아 내용만 삭제하였습니다. 더이상 이 스킨은 제공되지 않습니다....
Datepicker 머티리얼 디자인 스타일
매번 질문게시판을 통해 많은 도움을 받고 있습니다.
저도 아주 조금이나마 도움이 되고자 이렇게 글을 남깁니다.
Datepicker 머티리얼 디자인 스타일 UI입니다.
만들게 된 계기는
그누보드5를 사용하다가 datepicker가 정상적으로 작동이 되지 않아
(jquery-ui 구버전으로 인한 오작동 추측)
최신버전 jquery-ui.min.js를 받고 적용하면서
심심풀이로 datepicker에 디자인을 입혀보았습니다.
1. Datepicker 디자인 적용방법
1) jquery-ui.zip 압축 해제
2) plugin/jquery-ui 폴더에 덮어쓰거나, 복사(기존 파일 백업 권장)
아래 볼드처리한 css, js, image 가 필요합니다.
그외에 datepicker, datepicker2는 그냥 샘플용입니다.
- plugin/jquery-ui/jquery-ui.css // 디자인 적용 css
- plugin/jquery-ui/jquery-ui.min.js // 최신버전 jquery-ui
- plugin/jquery-ui/images // 추가 이미지
- plugin/jquery-ui/datepicker.php
- plugin/jquery-ui/datepicker2.php
3) 사용하시는 datepicker.php에서 css 및 js파일 경로를 잡아줍니다.
<script type="text/javascript" src="<?php echo G5_PLUGIN_URL ?>/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="<?php echo G5_PLUGIN_URL ?>/jquery-ui/jquery-ui.css">
[code]
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<script type="text/javascript" src="<?php echo G5_PLUGIN_URL ?>/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="<?php echo G5_PLUGIN_URL ?>/jquery-ui/jquery-ui.css">
<script>
jQuery(function($){
[/code]
4) datepicker 나만의 색상 일괄 적용하기
샘플 디자인 뿐 만 아니라 내가 원하는 색상을 손쉽게 적용가능합니다.
jquery-ui.css
/* 해당 #3f51b5 색상코드 변경 시 디자인 일괄적용 */
#3f51b5 -> #777777(원하는 색상코드) 일괄변경!
[code]
/* 해당 #3f51b5 색상코드 변경 시 디자인 일괄적용 */
/* datepicker Style */
.ui-datepicker { width: 270px; padding: 0; display: none; border: 0; margin-top: 10px;}
.ui-widget.ui-widget-content { border: 0; border-radius: 3px; overflow: hidden; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.3) }
.ui-datepicker .ui-widget-header { position: relative; padding: 6px 0 36px 0; border: 0; background: #3f51b5; color: #fff; border-radius: 0; }
[/code]
--------------------------------------------------------------------------------------
datepicker.php는 샘플용으로 참고만 부탁드립니다.
자세한 내용은 아래 자세히 나와있어요^^
개발자가 아니라서 저도 잘은 몰라요..ㅎ
http://api.jqueryui.com/datepicker/
datepicker.php // 달력 기본형
datepicker2.php // 년월 셀렉트형
--------------------------------------------------------------------------------------
테스트는 크롬하고 ie9, 10, 11에서 해보았습니다.
모바일에서도 사용가능한 반응형입니다.(한줄 추가..ㅋ)
모바일은 480px 이하에서 좌우 중앙 정렬됩니다.
사용하시면서 css가 깨지거나 궁금한 부분이 있으시면
댓글 남겨주시면 아는 범위 내에서는 답변드리겠습니다^^
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
그누보드5 스킨
좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
게시판
그누보드 5.3.X 버전용 질문답변 게시판입니다. 첨부파일은 PC버전과 모바일 버전이 함께 압축되어 등록되어 있습니다. 스킨특징 게시판의 댓글 기능을 답변 기능으로 활용 등록된...
최신글
<?php echo latest('theme/slitslider2018', '게시판명', 게재글수, 제목글자수); ?> 내용글자수 변경은 latest.skin.php 에서 수정...
게시판
오류사항이 발견되어 당분간 배포를 중단합니다...
레이아웃
매번 질문게시판을 통해 많은 도움을 받고 있습니다. 저도 아주 조금이나마 도움이 되고자 이렇게 글을 남깁니다. Datepicker 머티리얼 디자인 스타일 UI입니다...
레이아웃
기존에 올린버전은 https://sir.kr/g5_skin/16743 에서 다운받으시면 됩니다 기존 버전과 달라진 가장큰 차이는 모바일버전 화면일때 팝업등록시 기재한 상단...
갤러리
기본 그누보드 5.3.1버전 모바일 갤러리 게시판에서 리스트부분만 수정되었습니다. 박스형 갤러리 게시판으로 다양한 갤러리 스킨 공유차원에서 등록합니다^^ 특이사항 되도록이면...
최신글
압축파일을 풀어서 그누보드5 / skin / latest / 에 폴더로 업로드 합니다. 적용하고자 하는 곳에 아래 코드를 삽입합니다. <?php echo latest("hp5...
댓글 31개
공유 감사합니다 ^^
감사합니다.
감사합니다.
그리고 오늘 날짜가 같은 배경색이 안나옵니다
어디를 수정하면 되는지요?
감사합니다
[http://sir.kr/data/editor/1805/ce11b9166efa3e23a8f973c02476ed5c_1526480523_7348.png]
또 감사,,,,,
저는 날짜 입력 팝업 달력이 않되어 날짜를 못입력 하면 다시 글쓰기 ....언제가는 되고.안되어.....
강제적으로 오늘날짜 넣고 저장// 팝업창이 뜨면 선택 수정......
...아하,,,,,,이제는 ,,,,짜증 해방,,,,
적용하니
너무 잘됩니다.
감사 합니다......
3개월 달력으로 보기시 월별 겹치는 문제 어디를 수정 하면 되나요
정의 값을 부탁 드립니다.
촌시러운 달력 극복 감사합니다.