Archive / Javascript / DefinitionListToggle

Javascript.DefinitionListToggle History

Hide minor edits - Show changes to markup

September 19, 2006, at 07:45 PM by 218.36.49.101 -
Changed lines 1-2 from:

기능을 개선하면서 삭제된 내용입니다.

to:

기능을 개선과 함께 삭제된 내용입니다.

Restore
September 19, 2006, at 07:44 PM by 218.36.49.101 -
Changed lines 1-2 from:

삭제된 내용입니다.

to:

기능을 개선하면서 삭제된 내용입니다.

Restore
September 19, 2006, at 07:40 PM by 218.36.49.101 -
Changed lines 1-2 from:

삭제된 내용입닌다.

to:

삭제된 내용입니다.

Restore
September 19, 2006, at 07:40 PM by 218.36.49.101 -
Changed lines 1-79 from:

FAQ 리스트 같은 곳에 사용하기 편한 toggle list 이다.Definition List 에 style 을 적용한 후 initToggleDefList(elementId); 로 활성화만 시켜주면 간단히 사용할 수 있게 수정했다. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Definition List Toggle</title>
<script type="text/javascript">
/* definition list toggle */
function initToggleDefList(listEl) {
	listEl.currentItem = false;
	listEl.dtList = listEl.getElementsByTagName("dt");
	listEl.ddList = listEl.getElementsByTagName("dd");

	for (i=0; i<listEl.getElementsByTagName("dt").length; i++) {
		listEl.dtList.item(i).dlEl = listEl;
		listEl.dtList.item(i).listNum = i;
		listEl.dtList.item(i).onclick = toggleDefinitionList;
	}
}
function toggleDefinitionList() {
	if (this.dlEl.dtList.item(this.dlEl.currentItem) && this.dlEl.ddList.item(this.dlEl.currentItem) && this.dlEl.currentItem != this.listNum) {
		this.dlEl.dtList.item(this.dlEl.currentItem).className = null;
		this.dlEl.ddList.item(this.dlEl.currentItem).className = null;
	}

	if (this.dlEl.ddList.item(this.listNum).className == "on") {
		this.dlEl.dtList.item(this.listNum).className = null;
		this.dlEl.ddList.item(this.listNum).className = null;
	} else {
		this.dlEl.dtList.item(this.listNum).className = "on";
		this.dlEl.ddList.item(this.listNum).className = "on";
	}

	this.dlEl.currentItem = this.listNum;
}
</script>
<style type="text/css">
#faq-list {
	width: 500px;
}
#faq-list dt {
	border-bottom: 1px solid #ccc;
	padding: 0.5em;
	cursor: pointer;
}
#faq-list dt:hover {
	background: #fafafa;
}
#faq-list dd {
	border: 1px solid #ccc;
	padding: 0.5em;
	margin: 1em;
	display: none;
}
#faq-list dd.on {
	display: block;
}
</style>
</head>

<body>
<h1>Faq For Publish</h1>
<dl id="faq-list">
	<dt>HTML 은 무엇인가요?</dt>
	<dd>HTML 은 <a href="http://w3c.org/MarkUp/">HyperText Mark up Language</a> 로서 구조적은 문서를 제작할때 사용하는 markup 언어 입니다.</dd>
	<dt>CSS 는 무엇인가요?</dt>
	<dd><a href="http://w3c.org/Style/CSS/">Cascading Style Sheet</a> 의 약자로서 HTML, XHTML, XML 등과 같은 구조를 나타낸 문서의 표현 형태를 정의하는 방법입니다.</dd>
	<dt>W3C 는 무엇인가요?</dt>
	<dd><a href="http://w3c.org">World Wide Web Consrotium</a> 이라는 비 영리 단체로서 인터넷을 발명한 <a href="http://en.wikipedia.org/wiki/Tim_Berners-Lee">Tim Berners-Lee</a> 가 만든 단체 입니다. HTML, CSS, XHTML, XML 등 많은 웹표준을 만들었고 W3C 산하의 많은 단체에서 웹의 보편성을 위해서 많은 노력을 하고 있습니다.</dd>
	<dt>XHTML 은 무엇인가요?</dt>
	<dd>웹이 XML 로 넘어가는 과도기적인 형태의 문서 입니다. 간단하게 말하면, HTML 의 DTD 를 많이 따르면서 XML 의 문법에 기초한 Mark up 언어 입니다.</dd>
	<dt>ECMA Script 는 무엇인가요?</dt>
	<dd><a href="http://www.ecma-international.org">ECMA International</a> 에서 만은 <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Script Language 표준</a>입니다. 쉽게 생각해서 Javascript 표준이라고 생각 하면 됩니다. MS Internet Explorer, Mozilla, Mozilla Firefox, Opera 등 거의 대부분의 브라우져에서 채택하고 있는 Script 언어 표준 입니다.</dd>
</dl><!-- end of #faq-list -->
<script type="text/javascript">
initToggleDefList(document.getElementById("faq-list"));
</script>
</body>
</html>
to:

삭제된 내용입닌다.

관련링크
Toggle List
Restore
February 08, 2006, at 11:05 PM by 59.10.230.179 -
Added lines 1-79:

FAQ 리스트 같은 곳에 사용하기 편한 toggle list 이다.Definition List 에 style 을 적용한 후 initToggleDefList(elementId); 로 활성화만 시켜주면 간단히 사용할 수 있게 수정했다. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Definition List Toggle</title>
<script type="text/javascript">
/* definition list toggle */
function initToggleDefList(listEl) {
	listEl.currentItem = false;
	listEl.dtList = listEl.getElementsByTagName("dt");
	listEl.ddList = listEl.getElementsByTagName("dd");

	for (i=0; i<listEl.getElementsByTagName("dt").length; i++) {
		listEl.dtList.item(i).dlEl = listEl;
		listEl.dtList.item(i).listNum = i;
		listEl.dtList.item(i).onclick = toggleDefinitionList;
	}
}
function toggleDefinitionList() {
	if (this.dlEl.dtList.item(this.dlEl.currentItem) && this.dlEl.ddList.item(this.dlEl.currentItem) && this.dlEl.currentItem != this.listNum) {
		this.dlEl.dtList.item(this.dlEl.currentItem).className = null;
		this.dlEl.ddList.item(this.dlEl.currentItem).className = null;
	}

	if (this.dlEl.ddList.item(this.listNum).className == "on") {
		this.dlEl.dtList.item(this.listNum).className = null;
		this.dlEl.ddList.item(this.listNum).className = null;
	} else {
		this.dlEl.dtList.item(this.listNum).className = "on";
		this.dlEl.ddList.item(this.listNum).className = "on";
	}

	this.dlEl.currentItem = this.listNum;
}
</script>
<style type="text/css">
#faq-list {
	width: 500px;
}
#faq-list dt {
	border-bottom: 1px solid #ccc;
	padding: 0.5em;
	cursor: pointer;
}
#faq-list dt:hover {
	background: #fafafa;
}
#faq-list dd {
	border: 1px solid #ccc;
	padding: 0.5em;
	margin: 1em;
	display: none;
}
#faq-list dd.on {
	display: block;
}
</style>
</head>

<body>
<h1>Faq For Publish</h1>
<dl id="faq-list">
	<dt>HTML 은 무엇인가요?</dt>
	<dd>HTML 은 <a href="http://w3c.org/MarkUp/">HyperText Mark up Language</a> 로서 구조적은 문서를 제작할때 사용하는 markup 언어 입니다.</dd>
	<dt>CSS 는 무엇인가요?</dt>
	<dd><a href="http://w3c.org/Style/CSS/">Cascading Style Sheet</a> 의 약자로서 HTML, XHTML, XML 등과 같은 구조를 나타낸 문서의 표현 형태를 정의하는 방법입니다.</dd>
	<dt>W3C 는 무엇인가요?</dt>
	<dd><a href="http://w3c.org">World Wide Web Consrotium</a> 이라는 비 영리 단체로서 인터넷을 발명한 <a href="http://en.wikipedia.org/wiki/Tim_Berners-Lee">Tim Berners-Lee</a> 가 만든 단체 입니다. HTML, CSS, XHTML, XML 등 많은 웹표준을 만들었고 W3C 산하의 많은 단체에서 웹의 보편성을 위해서 많은 노력을 하고 있습니다.</dd>
	<dt>XHTML 은 무엇인가요?</dt>
	<dd>웹이 XML 로 넘어가는 과도기적인 형태의 문서 입니다. 간단하게 말하면, HTML 의 DTD 를 많이 따르면서 XML 의 문법에 기초한 Mark up 언어 입니다.</dd>
	<dt>ECMA Script 는 무엇인가요?</dt>
	<dd><a href="http://www.ecma-international.org">ECMA International</a> 에서 만은 <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Script Language 표준</a>입니다. 쉽게 생각해서 Javascript 표준이라고 생각 하면 됩니다. MS Internet Explorer, Mozilla, Mozilla Firefox, Opera 등 거의 대부분의 브라우져에서 채택하고 있는 Script 언어 표준 입니다.</dd>
</dl><!-- end of #faq-list -->
<script type="text/javascript">
initToggleDefList(document.getElementById("faq-list"));
</script>
</body>
</html>
Restore
Edit - History - Recent Changes - Search
Page last modified on September 19, 2006, at 07:45 PM
Powered by PmWiki