이전
목록
다음
비

자바스크립트 게시판

비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 4년 전 · 4348 · 25

링크

http://www.mediaplayer.kr/main/tip (436)
1.jpg

자바스크립트 전용 게시판입니다.

 

988289629_1624021364.0529.jpg

 

1. html 체크를 해제합니다.

2. 자바스크립트사용에 체크합니다. 이렇게 설정하면 html+ccc+자바스크립트로 글쓰기가 가능해집니다.

3. 글쓰기 권한은 관리자모드에서 일정 수준 등급 이상의 회원에게만 부여해야겠죠.

#PC용 #모바일용

버전 정보

테스트한 버전 5.4.8
호환 가능 버전 아마도 모두

첨부파일

1.jpg (259.6 KB) 0회 2021-06-18 22:06
js.zip (62.4 KB) 74회 2021-06-18 22:06
|

댓글 25개

김철용
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
바둑에 후절수라는 것이 있는데요.
아마추어는 상상할 수 없는 수라고 프로들이 말합니다.
자바스크립트 게시판은 후절수에 비유하고 싶습니다.
귀한 스킨을 공개해주셔서 감사드립니다.
게시판에서 자바스크립트, css, html로 코드를 작성하면 그대로 적용이 되어 나오네요.
신기할 따름입니다.

게시판 글쓰기에서 직접 자바스크립트, css, html 코드를 입력하는데요.
이미지나 audio, video 를 넣을 때 경로 설정하기가 좀 햇갈릴 수 있는데요.
이 방법도 좋을 것 같습니다.
스킨을 다운받으면 js_pc/ js_mobile안에 다른 스킨과 같이 list.skin.php, view.skin.php, write.skin.php, style.css, view_comment.skin.php 파일이 나오는데요.
여기에 test.php파일을 하나 추가해서 이 파일에서 코드를 작성한 후에 복사해서 게시판 글쓰기에 붙여넣기하면 잘 됩니다. 같은 경로라서 그대로 됩니다.

그리고 css를 넣을때 <p>태그 등 같은 경우는 그누보드의 다른 css와 겹칠 수 있기때문에 <p class="p_k">, <p id="p_kims"> 등과 같이 클래스와 id값을 사용해서 넣으면 다른 그누보드와 겹치지 않아서 깔끔하게 나올겁니다.

http://pws.co.kr/bbs/board.php?bo_table=js_board&wr_id=3
[http://sir.kr/data/editor/2106/854120f2bf5b3e8a972a867f7a88a776_1624027744_1319.png]

사진은 w3schools.com의 컬랩서블을 붙여넣기 한것인데요.(https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible)
적용이 잘 됩니다.

<코드>
<h1>js, css, html로 만든 컬랩스블</h1>
<br>

<img src="../../../../../zz/images/motion.png">

<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}

.active, .collapsible:hover {
background-color: #555;
}

.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Collapsibles</h2>

<p>A Collapsible:</p>
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<p>Collapsible Set:</p>
<button type="button" class="collapsible">Open Section 1</button>
<div class="content"> <img src="../../../../../zz/images/kim_420_522.png">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type="button" class="collapsible">Open Section 2</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type="button" class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
html 과 head 와 title 와 body 는 안 적으셔도 됩니다.ㅋ
사실 미리보기 기능을 하나 넣을까 하다가 다음 업뎃시에 넣으려구요. 다음 업뎃에는 색상코드 찍는 에디터를 같이 넣어 볼까 합니다.
input color 타입으로 색상코드 추출하는 것은 아무래도 맘에 안 들어서요.
자바스크립트는 게시판에서 기본문서를 건드려주면 가능은 합니다만... 그냥 스킨 안에서 해결하는 것이 맘이 편하더라구요.
그리고 저는 취미와 재미로 이 짓(?)을 하고 있어요. 수익창출이나 제작요청 이런 건 관심이 없습니다.
레이아웃을 바꾸는 게시판보다는 여러가지 "기능성 게시판"을 만들고 싶거든요.
그누가 원체 능동성이 큰 게시판이라 여러가지 아이디어가 떠오르고 있습니다.ㅋ

그리고 이 게시판은 제가 필요에 의해 만들었어요. 공유하고 싶은 팁을 보여주기 위한 게시판이 필요할 것 같아서...
김철용
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
저는 게시판에 js, css, html로 글쓰기가 가능하게 할 수있다는 생각도 못했지만,그런 생각을 한다고 해도 그것을 실제로 구현하는 능력이 대단하십니다.
비단주머니에서 마술같은 스킨을 하나씩 꺼내는 것 같습니다.
다음에는 어떤 것이 나올지 많이 기다려집니다. ^^
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
저를 포함해서 모두는 언제나 상상은 자유롭고 경이롭지만 문제는 늘 코드풀이지요.
rrainbi
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
고수는 고수를 알아본다~^^;
윗 댓글의 대화를 본 느낌입니다.

구현하기 힘든 기능을 쓰기 편하게 스킨화해서 배포해주셔셔
정말정말 고맙습니다.

멋진 주말 되세요~
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
이걸 만든 동기는 좀 이기적인 거에요.
제가 공유한 팁을 립크로 쉽게 보여주려고 하다보니 제가 필요한 게시판이더라구요.
아직 생각 중 이기만 한데 약간 더 용을 쓰면 php 도 가능할 것 같은 느낌도 드네요. 흔적 주셔서 감사요.
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
예 저도감사합니다.
DawnDew
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
와 감사합니다 성경게시판도 잘 받았습니다~
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
흔적 주심 감사합니다
미키손
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
전부터 간절하게 필요했던 기능이었습니다
정말 요긴하게 잘쓰겠습니다
php도 가능하게 꼭부탁드립니다^^
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
예 감사드려요
홈피공장장
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
오... 코드잇 같은 것도 그냥 나오겠는데요? ^^
감사합니다.
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
이것은 한번 더 업뎃시켜야 합니다. 미리보기 기능을 넣어야 할 것 같아요.
흔적주심 감사요.
트트리플
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다.
사용해봐야겠네요.^^
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
어이쿠 트리플님 사용하시면 저도 기분 좋지요.
브브러운아이
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
공개해 주셔서 감사합니다.
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
저도 감사합니다
rlaeodn
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
훌륭한 게시판입니다. 동영상 게시판 이용하여 동영상 보여주기 하려고 했는데, 어느 게시판을
활용하여 사용해도 잘 안 됐는데 이 자바스크립트 게시판으로 문제를 한방에 해결했습니다. 감사합니다.
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
업뎃이 올라갈 거에요.
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사드려요
겨겨울이오기전
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
굿잡~
매우 좋은 스킨 입니다
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

태그 필터 (최대 3개) 전체 PC용 모바일용 반응형
+
이전 첫 페이지 다음