[스크립트] [펌] 체크박스형으로 디자인 된 멀티 select
인터넷정보2008. 2. 4. 11:11
저작권은 명시가 안되어 있네요, 알아서 쓰삼;;;
이거 너무 퍼 날르는 거 아니삼? (혼자 보기엔 아까워서);;;;
----------=----------------
/**
* 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) return;
var i=0;
var len= selectObjects.length; // 무한루프 방지용
while (i<len) {
if (selectObjects[i].getAttribute("MULTICHECK") == null) { // 기존 multiple 살림
++i;
continue;
}
--len;
var ms = selectObjects[i];
var disabled = ms.disabled ? true : false;
var width = ms.style.width; // offsetWidth;
var height = ms.style.height; //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);
} // while
}
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 multicheck 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 multiple<br>
<select name="foo3[]" style="width: 200px; height: 100px" size=5 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>
<select name="foo2[]" style="width: 200px; height:110px" multicheck>
<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>
출처:PHPSCHOOL 까칠한고민남님
이거 너무 퍼 날르는 거 아니삼? (혼자 보기엔 아까워서);;;;
----------=----------------
/**
* 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) return;
var i=0;
var len= selectObjects.length; // 무한루프 방지용
while (i<len) {
if (selectObjects[i].getAttribute("MULTICHECK") == null) { // 기존 multiple 살림
++i;
continue;
}
--len;
var ms = selectObjects[i];
var disabled = ms.disabled ? true : false;
var width = ms.style.width; // offsetWidth;
var height = ms.style.height; //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);
} // while
}
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 multicheck 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 multiple<br>
<select name="foo3[]" style="width: 200px; height: 100px" size=5 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>
<select name="foo2[]" style="width: 200px; height:110px" multicheck>
<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>
출처:PHPSCHOOL 까칠한고민남님
'인터넷정보' 카테고리의 다른 글
| [보안] php 보안관련 켑챠 (0) | 2008.02.14 |
|---|---|
| [스크립트] 화면상의 객체 위치,크기 (0) | 2008.02.14 |
| [스크립트] 간단한 날짜입력용 자바스크립트 달력입니다. (0) | 2008.02.14 |
| 유용한 온라인 툴(online tool)들 (0) | 2008.02.14 |
| 손상된 DLL파일 구하기 (0) | 2008.02.04 |
| [스크립트] css 로 선언한 값을 객체에서 알아오기 (0) | 2008.02.04 |
| [보안] 중국아이피 80번포트 막기..페도라코어6버전 iptables 설정 (0) | 2008.02.04 |
| 동적인 다중 select처럼 => 다중 radio 버턴 (라디오버튼) (0) | 2008.02.04 |
| MS MVP의 IE7 완벽 단축키 63개 (0) | 2008.02.03 |
| 알아두면 편리한 자판 단축키들(웹서핑용) (0) | 2008.01.05 |
