336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=59180&page=1
저작권은 명시가 안되어 있네요, 알아서 쓰삼;;;
이거 너무 퍼 날르는 거 아니삼? (혼자 보기엔 아까워서);;;;
----------=----------------
/**
* multiSelect.js
*
* Converts multiple select form inputs into a DHTML
* version which uses checkboxes instead. This is more
* usable, due to people not knowing how to use a multiple
* select.
*
* The custom selects should end up the same width and height
* more or less as your existing select, so control that with
* css width and height, or the HTML "size" attribute.
*
* Coded by Kae - kae@verens.com
* I'd appreciate any feedback.
* You have the right to include this in your sites.
* Please retain this notice.
*
* Refactored into nice, pretty code by Richard Heyes (http://www.phpguru.org)
*/
var isMsie = document.all ? true : false;
/**
* Adds buildMultipleSelects() to the onload event.
*/
function addEvent(element, event, func)
{
if (isMsie) {
element.attachEvent(event, func);
} else if (element.addEventListener) {
element.addEventListener(event, func, false);
}
}
/**
* Handles the conversion of multiple selects
*/
function buildMultipleSelects()
{
var selectObjects = document.getElementsByTagName('select');
if (selectObjects) {
while (selectObjects.length) {
if (!selectObjects[0].multiple) {
continue;
}
var ms = selectObjects[0];
var disabled = ms.disabled ? true : false;
var width = ms.offsetWidth;
var height = ms.offsetHeight;
var divElement = document.createElement('div');
divElement.style.overflow = 'auto';
divElement.style.width = width + "px";
divElement.style.height = height + "px";
divElement.style.border = "2px inset white";
divElement.style.font = "10pt Arial";
divElement.className = 'customMultipleSelect';
optionObjects = ms.getElementsByTagName('option');
for (var j=0; j<optionObjects.length; ++j) {
var spanElement = document.createElement('div');
spanElement.style.paddingLeft = "20px";
spanElement.style.cursor = "default";
spanElement.className = 'customMultipleSelect_option';
addEvent(spanElement, 'onmousedown', function () {if (isMsie && event.srcElement.tagName.toLowerCase() == 'div' && !event.srcElement.firstChild.disabled) {event.srcElement.childNodes[0].checked = !event.srcElement.childNodes[0].checked;}})
var inputElement = document.createElement('input');
inputElement.type = "checkbox";
if (optionObjects[j].selected) {
inputElement.checked = true;
inputElement.defaultChecked = true;
}
if (disabled) {
inputElement.disabled = true;
}
inputElement.value = optionObjects[j].value;
inputElement.style.marginLeft = "-16px";
inputElement.style.marginTop = "-2px";
inputElement.name = ms.name;
var textLabel = document.createTextNode(optionObjects[j].text);
spanElement.appendChild(inputElement);
spanElement.appendChild(textLabel);
divElement.appendChild(spanElement);
}
ms.parentNode.insertBefore(divElement, ms);
ms.parentNode.removeChild(ms);
}
}
}
addEvent(window, isMsie ? 'onload' : 'load', buildMultipleSelects);
--------------=----------multiSelect.js 끝 -----------
<html>
<head>
<script src="multiSelect.js" type="text/javascript"></script>
<style type="text/css">
<!--
.customMultipleSelect {
overflow: auto;
border: 2px inset white;
}
.customMultipleSelect_option {
border-bottom: 1px solid #eeeeee;
font: 10pt Tahoma;
padding: 1px;
padding-left: 20px;
width: 100%;
}
// -->
</style>
</head>
<body>
<select multiple name="foo[]" style="width: 200px; height: 100px">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
</select>
<br>
<select name="foo2[]" style="width: 200px; height: 100px" multiple>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
<option value="7">G</option>
</select>
</body>
</html>
저작권은 명시가 안되어 있네요, 알아서 쓰삼;;;
이거 너무 퍼 날르는 거 아니삼? (혼자 보기엔 아까워서);;;;
----------=----------------
/**
* multiSelect.js
*
* Converts multiple select form inputs into a DHTML
* version which uses checkboxes instead. This is more
* usable, due to people not knowing how to use a multiple
* select.
*
* The custom selects should end up the same width and height
* more or less as your existing select, so control that with
* css width and height, or the HTML "size" attribute.
*
* Coded by Kae - kae@verens.com
* I'd appreciate any feedback.
* You have the right to include this in your sites.
* Please retain this notice.
*
* Refactored into nice, pretty code by Richard Heyes (http://www.phpguru.org)
*/
var isMsie = document.all ? true : false;
/**
* Adds buildMultipleSelects() to the onload event.
*/
function addEvent(element, event, func)
{
if (isMsie) {
element.attachEvent(event, func);
} else if (element.addEventListener) {
element.addEventListener(event, func, false);
}
}
/**
* Handles the conversion of multiple selects
*/
function buildMultipleSelects()
{
var selectObjects = document.getElementsByTagName('select');
if (selectObjects) {
while (selectObjects.length) {
if (!selectObjects[0].multiple) {
continue;
}
var ms = selectObjects[0];
var disabled = ms.disabled ? true : false;
var width = ms.offsetWidth;
var height = ms.offsetHeight;
var divElement = document.createElement('div');
divElement.style.overflow = 'auto';
divElement.style.width = width + "px";
divElement.style.height = height + "px";
divElement.style.border = "2px inset white";
divElement.style.font = "10pt Arial";
divElement.className = 'customMultipleSelect';
optionObjects = ms.getElementsByTagName('option');
for (var j=0; j<optionObjects.length; ++j) {
var spanElement = document.createElement('div');
spanElement.style.paddingLeft = "20px";
spanElement.style.cursor = "default";
spanElement.className = 'customMultipleSelect_option';
addEvent(spanElement, 'onmousedown', function () {if (isMsie && event.srcElement.tagName.toLowerCase() == 'div' && !event.srcElement.firstChild.disabled) {event.srcElement.childNodes[0].checked = !event.srcElement.childNodes[0].checked;}})
var inputElement = document.createElement('input');
inputElement.type = "checkbox";
if (optionObjects[j].selected) {
inputElement.checked = true;
inputElement.defaultChecked = true;
}
if (disabled) {
inputElement.disabled = true;
}
inputElement.value = optionObjects[j].value;
inputElement.style.marginLeft = "-16px";
inputElement.style.marginTop = "-2px";
inputElement.name = ms.name;
var textLabel = document.createTextNode(optionObjects[j].text);
spanElement.appendChild(inputElement);
spanElement.appendChild(textLabel);
divElement.appendChild(spanElement);
}
ms.parentNode.insertBefore(divElement, ms);
ms.parentNode.removeChild(ms);
}
}
}
addEvent(window, isMsie ? 'onload' : 'load', buildMultipleSelects);
--------------=----------multiSelect.js 끝 -----------
<html>
<head>
<script src="multiSelect.js" type="text/javascript"></script>
<style type="text/css">
<!--
.customMultipleSelect {
overflow: auto;
border: 2px inset white;
}
.customMultipleSelect_option {
border-bottom: 1px solid #eeeeee;
font: 10pt Tahoma;
padding: 1px;
padding-left: 20px;
width: 100%;
}
// -->
</style>
</head>
<body>
<select multiple name="foo[]" style="width: 200px; height: 100px">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
</select>
<br>
<select name="foo2[]" style="width: 200px; height: 100px" multiple>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
<option value="7">G</option>
</select>
</body>
</html>
'컴터 > Javascript / html' 카테고리의 다른 글
| 스크립트로 이미지 불러오기 (0) | 2008.03.04 |
|---|---|
| 셀렉트 옵션을 그룹화 (0) | 2008.02.26 |
| 입력폼에 한글과 숫자만 (0) | 2008.01.23 |
| [펌]우측에 따라다니는 이미지 소스 (0) | 2008.01.17 |