스크롤바 꾸미기 툴 - 제너레이터

인터넷관련 2008. 1. 29. 10:37


http://oxtag.com/html/ex/scbg_tool/scrollbar_color_tool.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>iweb - Scrollbar Color Tool</title>
<style type="text/css">

body {
 border:  0;
 background: ButtonFace;
 margin:  0;
 overflow: auto;
}

#demoContainer {
 overflow: scroll;
 width:  205px;
 height:  105px;
 border:  2px inset;
 background: Window;
 color:  WindowText;
 font:  Icon;
 padding: 5px;
 font-size: 15px !important;
}

#filler {
 position: relative;
 width:  500px;
 height:  500px;
}

#colorPicker {
 width:  205px;
 height:  105px;
}

#restoreButton {
 width:  205px;
}

select {
 width:   205px;
 margin-bottom: 5px;
}

pre {
 background: Window;
 color:  WindowText;
 border:  2px inset;
 font-size: 12px;
 width:  320;
 height:  260px;
 overflow: auto;
}

pre a {
 color: blue;
}

</style>
<script type="text/javascript">

/*
var cssProperties = {
 "scrollbar-3dlight-color" : "",
 "scrollbar-arrow-color"  : "",
 "scrollbar-base-color"  : "",
 "scrollbar-darkshadow-color": "",
 "scrollbar-face-color"  : "",
 "scrollbar-highlight-color" : "",
 "scrollbar-shadow-color" : ""
};
*/

var codeTimer;
var bDontUpdateDemo = true;

var cssProperties = {
 "scrollbar3dLightColor"  : "scrollbar-3dlight-color",
 "scrollbarArrowColor"  : "scrollbar-arrow-color",
 "scrollbarBaseColor"  : "scrollbar-base-color",
 "scrollbarDarkShadowColor" : "scrollbar-darkshadow-color",
 "scrollbarFaceColor"  : "scrollbar-face-color",
 "scrollbarHighlightColor" : "scrollbar-highlight-color",
 "scrollbarShadowColor"  : "scrollbar-shadow-color",
 "scrollbarTrackColor"  : "scrollbar-track-color"
};

var currentProperty = cssProperties[0];

function handleCPChange() {}

function handleSelectChange() {
 var demoContainer = document.getElementById("demoContainer");
 var propertySelect = document.getElementById("propertySelect");
 var colorPicker = document.getElementById("colorPicker");
 
 var sProperty = propertySelect.options[propertySelect.selectedIndex].value;
 var currentValue = demoContainer.currentStyle[sProperty];
 //alert(currentValue);
 if (currentValue != "") {
  var rgb = colorToRgb(currentValue);
  function inspect(obj) {
   var str = "";
   for (var k in obj)
    str += "obj." + k + " = " + obj[k] + "\n";
   window.alert(str);
  }
  //inspect(rgb)
  bDontUpdateDemo = true;
  colorPicker.setColor(rgb.r / 255, rgb.g / 255, rgb.b / 255);
  bDontUpdateDemo = false;
 }
}

function colorToRgb(sColor) {
 if (typeof sColor != "string")
  sColor = String(sColor);
 
 if (sColor.charAt(0) == "#") {
  return {
   r : Number("0x" + sColor.substring(1,3)),
   g : Number("0x" + sColor.substring(3,5)),
   b : Number("0x" + sColor.substring(5,7))
  };
 }
 else if (/rgb\(/i.test(sColor)) {
  var parts = sColor.split(",");
  var re = /[^0123456789]/g;
  return {
   r : Number(parts[0].replace(re, "")),
   g : Number(parts[1].replace(re, "")),
   b : Number(parts[2].replace(re, ""))
  };
 }
 else {
  return {r : 0, g : 0, b : 0};
 }
}

function updateDemoContainer(sColor) {
 if (!bDontUpdateDemo) {
  var demoContainer = document.getElementById("demoContainer");
  var propertySelect = document.getElementById("propertySelect");
 
  var sProperty = propertySelect.options[propertySelect.selectedIndex].value;
  demoContainer.style[sProperty] = sColor;
  propertySelect.style[sProperty] = sColor;
 }
}

function makeSpacing(s) {
 var max = 26;
 var spaces = max - s.length;
 var res = new Array(spaces);
 for (var i = 0; i < spaces; i++)
  res[i] = "&nbsp;";
 return res.join("");
}

function generateCode() {
 var demoContainer = document.getElementById("demoContainer");
 var propertySelect = document.getElementById("propertySelect");
 var codeArea = document.getElementById("codeArea");
 
 var sProperty, sValue;
 var str = "body {<br>";
 for (var i = 0; i < propertySelect.options.length; i++) {
  sProperty = propertySelect.options[i].value;
  sValue = demoContainer.style[sProperty];
  if (sValue != "") {
   str += "&nbsp;&nbsp;&nbsp;<a href='#' onclick='document.getElementById(\"propertySelect\").selectedIndex = " + i + "; handleSelectChange(); return false;'>" + cssProperties[sProperty] + "</a>:&nbsp;" + makeSpacing(cssProperties[sProperty]) + sValue + ";<br>"
  }
 }
 str += "}";
 
// return str;
 
 codeArea.innerHTML = str;
}

window.onload = function () {
 propertySelect.onchange = handleSelectChange;
 propertySelect.options[4].selected = true;
 bDontUpdateDemo = false;
 handleSelectChange();
 
 var codeArea = document.getElementById("codeArea");
 var td = document.getElementsByTagName("TD")[0];
 codeArea.style.height = td.scrollHeight;
};

</script>
<script language="JScript" for="colorPicker" event="onscriptletevent(name, eventData)">
<!--

if (name == "oncolorchange") {
 var sColor =
  "rgb(" + Math.round(255*eventData.r) +
  "," + Math.round(255*eventData.g) +
  "," + Math.round(255*eventData.b) + ")";
 updateDemoContainer(sColor);
 window.clearTimeout(codeTimer);
 codeTimer = window.setTimeout(generateCode, 100);
}

//-->
</script>
</head>
<body>

<table style="width: 100%; height: 100%" cellspacing="5" cellpadding="0">
<tr>
<td style="width: 1px;" valign="top">

<select id="propertySelect">
<script>
for (var sProp in cssProperties)
 document.write("<option value='" + sProp + "'>" + cssProperties[sProp] + "</option>");
</script>
</select>

<div id="demoContainer">
 <div id="filler"><br><br>iweb<br>Scroll Color Editer
 
 
 </div>
</div>

<object id="colorPicker" type="text/x-scriptlet" data="colorpicker1.html"></object>

<button id="restoreButton" onclick="updateDemoContainer(''); generateCode()">적용 색상 초기화</button><br>


</td>

<td valign="top">

<pre id="codeArea"></pre>
<!--
scrollbar-shadow  [바의 오른쪽과 밑쪽 그림자색]
scrollbar-highlight [바의 왼쪽과 위쪽의 얇은 선색]
scrollbar-3dlight   [바의 왼쪽위쪽에 진하게 들어가는 선]    
scrollbar-darkshadow [바의 오른쪽과 밑쪽에 들어가는 얇은 색]
scrollbar-track [바가 없는 아래부분의 색]
scrollbar-arrow [위 아래 화살표 색]
 -->
</td>
</tr>
</table>

</body>
</html>

'인터넷관련' 카테고리의 다른 글

원 클릭으로 클립보드에 복사하기(우측 태그피아 배너)  (0) 2008.01.29
textarea 늘리기/줄이기  (0) 2008.01.29
페이지 로딩될때 준비한 메시지 로딩시까지 보여주기 - 로딩바  (0) 2008.01.29
keystroke - 지정한 텍스트 타이핑시 연결된 URL로 이동  (0) 2008.01.29
스크롤바를 이미지로 바꿔보세요.(공지용)  (0) 2008.01.29
fade in/out  (0) 2008.01.29
평범한 사이트맵은 싫다!!! (플래시 같은 사이트맵 꾸미기)  (0) 2008.01.29
특정 날짜로부터 현째 날짜까지 일수 구하기  (0) 2008.01.29
Posted by 알 수 없는 사용자
,

티스토리툴바