자바스크립트로 구현한 md4,md5,sha-1
http://pajhome.org.uk/crypt/md5/
md4 관련 소스
http://pajhome.org.uk/crypt/md5/md4src.html
md4 관련 다운로드
http://pajhome.org.uk/crypt/md5/md4.js
md5 관련 소스
http://pajhome.org.uk/crypt/md5/md5src.html
md5 관련 다운로드
http://pajhome.org.uk/crypt/md5/md5.js
SHA-1 관련 소스
http://pajhome.org.uk/crypt/md5/sha1src.html
SHA-1 관련 다운로드
http://pajhome.org.uk/crypt/md5/sha1.js
RSA
http://www.ohdave.com/rsa/
md5 알고리즘
http://www.ietf.org/rfc/rfc1321.txt
actionscript md5 sha 입니다.
http://pajhome.org.uk/crypt/md5/
요 사이트를 참고로 제작
http://gsolofp.blogspot.com/2006/01/actionscript-3-md5-and-sha1.html
[추가] 어디서 퍼온 VBScript용 MD5 두둥~ (ASP 할때 퍼왔슴다 ㅡㅡ)
------------------------------------------------------------------------------------------------------------------
<%
Private Const BITS_TO_A_BYTE = 8
Private Const BYTES_TO_A_WORD = 4
Private Const BITS_TO_A_WORD = 32
Private m_lOnBits(30)
Private m_l2Power(30)
m_lOnBits(0) = CLng(1)
m_lOnBits(1) = CLng(3)
m_lOnBits(2) = CLng(7)
m_lOnBits(3) = CLng(15)
m_lOnBits(4) = CLng(31)
m_lOnBits(5) = CLng(63)
m_lOnBits(6) = CLng(127)
m_lOnBits(7) = CLng(255)
m_lOnBits(8) = CLng(511)
m_lOnBits(9) = CLng(1023)
m_lOnBits(10) = CLng(2047)
m_lOnBits(11) = CLng(4095)
m_lOnBits(12) = CLng(8191)
m_lOnBits(13) = CLng(16383)
m_lOnBits(14) = CLng(32767)
m_lOnBits(15) = CLng(65535)
m_lOnBits(16) = CLng(131071)
m_lOnBits(17) = CLng(262143)
m_lOnBits(18) = CLng(524287)
m_lOnBits(19) = CLng(1048575)
m_lOnBits(20) = CLng(2097151)
m_lOnBits(21) = CLng(4194303)
m_lOnBits(22) = CLng(8388607)
m_lOnBits(23) = CLng(16777215)
m_lOnBits(24) = CLng(33554431)
m_lOnBits(25) = CLng(67108863)
m_lOnBits(26) = CLng(134217727)
m_lOnBits(27) = CLng(268435455)
m_lOnBits(28) = CLng(536870911)
m_lOnBits(29) = CLng(1073741823)
m_lOnBits(30) = CLng(2147483647)
m_l2Power(0) = CLng(1)
m_l2Power(1) = CLng(2)
m_l2Power(2) = CLng(4)
m_l2Power(3) = CLng(8)
m_l2Power(4) = CLng(16)
m_l2Power(5) = CLng(32)
m_l2Power(6) = CLng(64)
m_l2Power(7) = CLng(128)
m_l2Power(8) = CLng(256)
m_l2Power(9) = CLng(512)
m_l2Power(10) = CLng(1024)
m_l2Power(11) = CLng(2048)
m_l2Power(12) = CLng(4096)
m_l2Power(13) = CLng(8192)
m_l2Power(14) = CLng(16384)
m_l2Power(15) = CLng(32768)
m_l2Power(16) = CLng(65536)
m_l2Power(17) = CLng(131072)
m_l2Power(18) = CLng(262144)
m_l2Power(19) = CLng(524288)
m_l2Power(20) = CLng(1048576)
m_l2Power(21) = CLng(2097152)
m_l2Power(22) = CLng(4194304)
m_l2Power(23) = CLng(8388608)
m_l2Power(24) = CLng(16777216)
m_l2Power(25) = CLng(33554432)
m_l2Power(26) = CLng(67108864)
m_l2Power(27) = CLng(134217728)
m_l2Power(28) = CLng(268435456)
m_l2Power(29) = CLng(536870912)
m_l2Power(30) = CLng(1073741824)
Private Function LShift(lValue, iShiftBits)
If iShiftBits = 0 Then
LShift = lValue
Exit Function
ElseIf iShiftBits = 31 Then
If lValue And 1 Then
LShift = &H80000000
Else
LShift = 0
End If
Exit Function
ElseIf iShiftBits < 0 Or iShiftBits > 31 Then
Err.Raise 6
End If
If (lValue And m_l2Power(31 - iShiftBits)) Then
LShift = ((lValue And m_lOnBits(31 - (iShiftBits + 1))) * m_l2Power(iShiftBits)) Or &H80000000
Else
LShift = ((lValue And m_lOnBits(31 - iShiftBits)) * m_l2Power(iShiftBits))
End If
End Function
Private Function RShift(lValue, iShiftBits)
If iShiftBits = 0 Then
RShift = lValue
Exit Function
ElseIf iShiftBits = 31 Then
If lValue And &H80000000 Then
RShift = 1
Else
RShift = 0
End If
Exit Function
ElseIf iShiftBits < 0 Or iShiftBits > 31 Then
Err.Raise 6
End If
RShift = (lValue And &H7FFFFFFE) \ m_l2Power(iShiftBits)
If (lValue And &H80000000) Then
RShift = (RShift Or (&H40000000 \ m_l2Power(iShiftBits - 1)))
End If
End Function
Private Function RotateLeft(lValue, iShiftBits)
RotateLeft = LShift(lValue, iShiftBits) Or RShift(lValue, (32 - iShiftBits))
End Function
Private Function AddUnsigned(lX, lY)
Dim lX4
Dim lY4
Dim lX8
Dim lY8
Dim lResult
lX8 = lX And &H80000000
lY8 = lY And &H80000000
lX4 = lX And &H40000000
lY4 = lY And &H40000000
lResult = (lX And &H3FFFFFFF) + (lY And &H3FFFFFFF)
If lX4 And lY4 Then
lResult = lResult Xor &H80000000 Xor lX8 Xor lY8
ElseIf lX4 Or lY4 Then
If lResult And &H40000000 Then
lResult = lResult Xor &HC0000000 Xor lX8 Xor lY8
Else
lResult = lResult Xor &H40000000 Xor lX8 Xor lY8
End If
Else
lResult = lResult Xor lX8 Xor lY8
End If
AddUnsigned = lResult
End Function
Private Function F(x, y, z)
F = (x And y) Or ((Not x) And z)
End Function
Private Function G(x, y, z)
G = (x And z) Or (y And (Not z))
End Function
Private Function H(x, y, z)
H = (x Xor y Xor z)
End Function
Private Function I(x, y, z)
I = (y Xor (x Or (Not z)))
End Function
Private Sub FF(a, b, c, d, x, s, ac)
a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac))
a = RotateLeft(a, s)
a = AddUnsigned(a, b)
End Sub
Private Sub GG(a, b, c, d, x, s, ac)
a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac))
a = RotateLeft(a, s)
a = AddUnsigned(a, b)
End Sub
Private Sub HH(a, b, c, d, x, s, ac)
a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac))
a = RotateLeft(a, s)
a = AddUnsigned(a, b)
End Sub
Private Sub II(a, b, c, d, x, s, ac)
a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac))
a = RotateLeft(a, s)
a = AddUnsigned(a, b)
End Sub
Private Function ConvertToWordArray(sMessage)
Dim lMessageLength
Dim lNumberOfWords
Dim lWordArray()
Dim lBytePosition
Dim lByteCount
Dim lWordCount
Const MODULUS_BITS = 512
Const CONGRUENT_BITS = 448
lMessageLength = Len(sMessage)
lNumberOfWords = (((lMessageLength + ((MODULUS_BITS - CONGRUENT_BITS) \ BITS_TO_A_BYTE)) \ (MODULUS_BITS \ BITS_TO_A_BYTE)) + 1) * (MODULUS_BITS \ BITS_TO_A_WORD)
ReDim lWordArray(lNumberOfWords - 1)
lBytePosition = 0
lByteCount = 0
Do Until lByteCount >= lMessageLength
lWordCount = lByteCount \ BYTES_TO_A_WORD
lBytePosition = (lByteCount Mod BYTES_TO_A_WORD) * BITS_TO_A_BYTE
lWordArray(lWordCount) = lWordArray(lWordCount) Or LShift(Asc(Mid(sMessage, lByteCount + 1, 1)), lBytePosition)
lByteCount = lByteCount + 1
Loop
lWordCount = lByteCount \ BYTES_TO_A_WORD
lBytePosition = (lByteCount Mod BYTES_TO_A_WORD) * BITS_TO_A_BYTE
lWordArray(lWordCount) = lWordArray(lWordCount) Or LShift(&H80, lBytePosition)
lWordArray(lNumberOfWords - 2) = LShift(lMessageLength, 3)
lWordArray(lNumberOfWords - 1) = RShift(lMessageLength, 29)
ConvertToWordArray = lWordArray
End Function
Private Function WordToHex(lValue)
Dim lByte
Dim lCount
For lCount = 0 To 3
lByte = RShift(lValue, lCount * BITS_TO_A_BYTE) And m_lOnBits(BITS_TO_A_BYTE - 1)
WordToHex = WordToHex & Right("0" & Hex(lByte), 2)
Next
End Function
Public Function MD5(sMessage)
Dim x
Dim k
Dim AA
Dim BB
Dim CC
Dim DD
Dim a
Dim b
Dim c
Dim d
Const S11 = 7
Const S12 = 12
Const S13 = 17
Const S14 = 22
Const S21 = 5
Const S22 = 9
Const S23 = 14
Const S24 = 20
Const S31 = 4
Const S32 = 11
Const S33 = 16
Const S34 = 23
Const S41 = 6
Const S42 = 10
Const S43 = 15
Const S44 = 21
x = ConvertToWordArray(sMessage)
a = &H67452301
b = &HEFCDAB89
c = &H98BADCFE
d = &H10325476
For k = 0 To UBound(x) Step 16
AA = a
BB = b
CC = c
DD = d
FF a, b, c, d, x(k + 0), S11, &HD76AA478
FF d, a, b, c, x(k + 1), S12, &HE8C7B756
FF c, d, a, b, x(k + 2), S13, &H242070DB
FF b, c, d, a, x(k + 3), S14, &HC1BDCEEE
FF a, b, c, d, x(k + 4), S11, &HF57C0FAF
FF d, a, b, c, x(k + 5), S12, &H4787C62A
FF c, d, a, b, x(k + 6), S13, &HA8304613
FF b, c, d, a, x(k + 7), S14, &HFD469501
FF a, b, c, d, x(k + 8), S11, &H698098D8
FF d, a, b, c, x(k + 9), S12, &H8B44F7AF
FF c, d, a, b, x(k + 10), S13, &HFFFF5BB1
FF b, c, d, a, x(k + 11), S14, &H895CD7BE
FF a, b, c, d, x(k + 12), S11, &H6B901122
FF d, a, b, c, x(k + 13), S12, &HFD987193
FF c, d, a, b, x(k + 14), S13, &HA679438E
FF b, c, d, a, x(k + 15), S14, &H49B40821
GG a, b, c, d, x(k + 1), S21, &HF61E2562
GG d, a, b, c, x(k + 6), S22, &HC040B340
GG c, d, a, b, x(k + 11), S23, &H265E5A51
GG b, c, d, a, x(k + 0), S24, &HE9B6C7AA
GG a, b, c, d, x(k + 5), S21, &HD62F105D
GG d, a, b, c, x(k + 10), S22, &H2441453
GG c, d, a, b, x(k + 15), S23, &HD8A1E681
GG b, c, d, a, x(k + 4), S24, &HE7D3FBC8
GG a, b, c, d, x(k + 9), S21, &H21E1CDE6
GG d, a, b, c, x(k + 14), S22, &HC33707D6
GG c, d, a, b, x(k + 3), S23, &HF4D50D87
GG b, c, d, a, x(k + 8), S24, &H455A14ED
GG a, b, c, d, x(k + 13), S21, &HA9E3E905
GG d, a, b, c, x(k + 2), S22, &HFCEFA3F8
GG c, d, a, b, x(k + 7), S23, &H676F02D9
GG b, c, d, a, x(k + 12), S24, &H8D2A4C8A
HH a, b, c, d, x(k + 5), S31, &HFFFA3942
HH d, a, b, c, x(k + 8), S32, &H8771F681
HH c, d, a, b, x(k + 11), S33, &H6D9D6122
HH b, c, d, a, x(k + 14), S34, &HFDE5380C
HH a, b, c, d, x(k + 1), S31, &HA4BEEA44
HH d, a, b, c, x(k + 4), S32, &H4BDECFA9
HH c, d, a, b, x(k + 7), S33, &HF6BB4B60
HH b, c, d, a, x(k + 10), S34, &HBEBFBC70
HH a, b, c, d, x(k + 13), S31, &H289B7EC6
HH d, a, b, c, x(k + 0), S32, &HEAA127FA
HH c, d, a, b, x(k + 3), S33, &HD4EF3085
HH b, c, d, a, x(k + 6), S34, &H4881D05
HH a, b, c, d, x(k + 9), S31, &HD9D4D039
HH d, a, b, c, x(k + 12), S32, &HE6DB99E5
HH c, d, a, b, x(k + 15), S33, &H1FA27CF8
HH b, c, d, a, x(k + 2), S34, &HC4AC5665
II a, b, c, d, x(k + 0), S41, &HF4292244
II d, a, b, c, x(k + 7), S42, &H432AFF97
II c, d, a, b, x(k + 14), S43, &HAB9423A7
II b, c, d, a, x(k + 5), S44, &HFC93A039
II a, b, c, d, x(k + 12), S41, &H655B59C3
II d, a, b, c, x(k + 3), S42, &H8F0CCC92
II c, d, a, b, x(k + 10), S43, &HFFEFF47D
II b, c, d, a, x(k + 1), S44, &H85845DD1
II a, b, c, d, x(k + 8), S41, &H6FA87E4F
II d, a, b, c, x(k + 15), S42, &HFE2CE6E0
II c, d, a, b, x(k + 6), S43, &HA3014314
II b, c, d, a, x(k + 13), S44, &H4E0811A1
II a, b, c, d, x(k + 4), S41, &HF7537E82
II d, a, b, c, x(k + 11), S42, &HBD3AF235
II c, d, a, b, x(k + 2), S43, &H2AD7D2BB
II b, c, d, a, x(k + 9), S44, &HEB86D391
a = AddUnsigned(a, AA)
b = AddUnsigned(b, BB)
c = AddUnsigned(c, CC)
d = AddUnsigned(d, DD)
Next
MD5 = LCase(WordToHex(a) & WordToHex(b) & WordToHex(c) & WordToHex(d))
End Function
%>
'인터넷정보' 카테고리의 다른 글
| 글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2007.10.13 |
|---|---|
| 수정이 가능한 텍스트 (인라인텍스트에디터) (0) | 2007.10.13 |
| 이미지 슬라이드쇼 (0) | 2007.10.13 |
| 폼에대한 142가지의 다양한 js 소스 (0) | 2007.10.13 |
| 실시간검색어 예제 - 다음(daum) 스타일 (0) | 2007.10.13 |
| 프레임 경계선을 넘나드는 createPopup() (0) | 2007.10.13 |
| 지정된 영역에서 각 레이어 간의 이동 효과(구글,야후) (0) | 2007.10.13 |
| 피부 미남 만들기 - "면도만 잘해도 완소남" (0) | 2007.10.13 |
| 자바스크립트 에러 상태창에 표시 (0) | 2007.10.13 |
| 글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2007.10.13 |
프레임 경계선을 넘나드는 createPopup()
프레임 경계선 밖으로 팝업창을 띄울 수 있습니다.
IE 5.5 부터는 createPopup() 메서드를 사용하여 popup 객체를 생성할 수 있습니다
<SCRIPT LANGUAGE="JavaScript"> <!-- oPopup = window.createPopup(); var oPopupBody = oPopup.document.body; oPopupBody.style.backgroundColor = "white"; // 배경색 oPopupBody.style.border = "solid black 1px"; // 테두리 oPopupBody.innerHTML = "<center><br><br><br><br><br><br><font color=red>공지</font></center>"; // 내용 oPopup.show(500, 300, 260, 260, document.body); // 옵션(위쪽위치,왼쪽위치,가로,세로) // --> </SCRIPT>
'인터넷정보' 카테고리의 다른 글
| 수정이 가능한 텍스트 (인라인텍스트에디터) (0) | 2007.10.13 |
|---|---|
| 이미지 슬라이드쇼 (0) | 2007.10.13 |
| 폼에대한 142가지의 다양한 js 소스 (0) | 2007.10.13 |
| 실시간검색어 예제 - 다음(daum) 스타일 (0) | 2007.10.13 |
| 자바스크립트로 구현한 md4,md5,sha-1 (0) | 2007.10.13 |
| 지정된 영역에서 각 레이어 간의 이동 효과(구글,야후) (0) | 2007.10.13 |
| 피부 미남 만들기 - "면도만 잘해도 완소남" (0) | 2007.10.13 |
| 자바스크립트 에러 상태창에 표시 (0) | 2007.10.13 |
| 글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2007.10.13 |
| 라운드, 라운드박스, 테이블 둥글게 (0) | 2007.10.13 |
지정된 영역에서 각 레이어 간의 이동 효과(구글,야후)
invalid-file미리보기 : http://www.x-wiz.com/example/gadgetry.html
이전에 올렸던 "지정된 영역에서 각 레이어 간의 이동 효과(구글,야후) "에 대한
1.0알파 버전입니다.(버전이라고 까지 굳이 할 필요는 없지만 , 차후에도 계속 업그레이드 하려하기 때문에 구분을 두기 위한 장치일 뿐입니다.)
기존에 올렸던 소스는 완성되지 않았던 관계로 알고리즘 및 기능 등 많은 부분이 보완되고, 수정 되었습니다. 또한 명칭도 구글에서 처음 힌트를 얻었기에 Gadgetry라고 명칭을 붙이게 되었습니다.
2개 이상의 영역에 대해서 드래그앤 드랍시 오류 수정, 리사이즈, 펼침 기능 추가 등 변화가 좀 많다면 많을 수도 있습니다. ^^;;
아래는 전체 내용에 대한 간략한 소개 입니다. 소스 및 예제는 링크된 페이지에서 확인 하실 수 있습니다.
/**
* xwzGadgetry : Javascript UI Library for the gadget(or the widget) <http://www.x-wiz.com/>
* 레이어의 위치 지정 또는 순서 출력을 사용자가 원하는 위치 또는 순서로 배열하도록 하는 함수.
* 쇼핑몰에서 상품 위치나, 디자인관리에서 디자인 레이어 위치 이동에 따른 배열,
* 여러 통계 수치나, 입력폼과 출력폼이 동일한 화면에서 출력 순서 변경을 위해 만듦
*
* Idea of "drag&drop swap" is from "google ig<http://www.google.co.kr/ig/>" - see dragDepart()
* Idea of "toggle swap" is from "yahoo.com<http://kr.yahoo.com/>"- see prevToggle()
* Idea of "the distance" is from "daum.net<http://www.daum.net/>" - see _swapAviate()
* Idea of "bindAsObject, bindAsEvent" is from "Prototype JavaScript Framework <http://www.prototypejs.org/>"
*
*@copyright x-wiz.com
*@license The LGPL License
*@author N.Thu Lee
*@version 1.0 Alpha
*@release 2006.11.07
*@updated 2007.05.28
*@changelog
*2006.11.22
*- 레이아웃 이동 간격 수식 변경(다음.넷 참조)
*
*2006.12.04
*- 드래그앤드랍 기능 추가
*
*2007.05.02
*- xwzGadgetry로 라이브러리 명칭 확정
*- 이벤트 핸들러 추가 및 해제 함수를 라이브러리 외부 함수로 분리
*- 2개 이상의 라이브러리 대상 객체에 대해서 드래그앤드랍시 레이어 위치 문제 수정
*- bindAsObject, bindAsEvent 외부 함수 추가
*
*2007.05.05
*- expand 기능 추가. 가젯의 document 영역에 대한 최소화, 최대화 기능 추가
*
*2007.05.28
*-resize 기능 추가
*
*+-------------------------------------+
*plan
*+-------------------------------------+
* - 레이어의 각 셀영역이 고정 그리드인 것을 틀에 제한없이 사용 가능하도록 추가
* - 2개 이상의 영역에 가젯이 이동가능하도록 추가
* - 각 특성별 분리 작업 -모듈화(?). drag & drop, toggle swapping, resize, ...
* - 여전히 알고리즘이나 소스에 대한 최적화 필요 쩝....
*
*@example
*-( new xwzGadgetry(프레임 객체 ID, [[Toggle Tag Name],[Columns : 가로 갯수],[Margin : 간격]]) ).load();
*
*+-------------------------------------+
*method
*+-------------------------------------+
*-loadSequel() : 가젯 위치값을 쿠키 정보에서 가져오는 함수
*-saveSequel() : 가제 위치를 쿠키로 저장한 후 onArrival 함수를 호출
*-onArrival(function object) : 가젯 위치 변경되어 완료되었을 때 호출하는 사용자용 함수
*-getIndex(object[or int, string]) : 고유 인덱스를 통해서 해당 가젯의 배열에서 위치를 찾는 함수
*-searchGadget(object[or int, string]) : 인덱스 또는 객체값, ID, Name을 통해서 가젯 인스턴스를 찾음
*-columns(int, bool) : 가젯의 가로 갯수 설정 또는 그 값 반환 함수 (Bool:값 설정 시 가젯이 위치를 찾아갈 때 효과 없이 이동할 것인지 여부)
*-strata(int) : 가젯이 해당 위치를 찾아 갈 때, _swapAviate 함수를 몇번 호출할 것인지 설정 또는 반환(가젯 위치 이동 속도에 관여함)
*-opacity(int) : 가젯이 이동할 때 투명도 설정 및 값 반환 함수(0~100)
*-motion(Bool) : 가젯 이동 시 이동 효과 없이 바로 적용할 지 설정/반환 함수
*-reset(Bool) : 가젯 위치 초기화 전역 함수
*-compose() : 각 가젯 배열 인덱스에 따른 위치를 초기화 하는 함수
*dragDepart(event object, target int) : 마우스다운 이벤트가 발생하였을 때 drag&drop 이벤트 발생
*-resetToggle(object, bool) : 위치 초기화 (Object:이벤트 발생 객체, Bool:모션 효과 여부)
*-prevToggle(object 이벤트 발생 객체,int[or object, string]) : 클릭 이벤트 발생 대상 가젯이 이전 순서로 이동하는 버튼(이미지) 설정
*-nextToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 다음 순서로 이동
*-firstToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 처음 순서로 이동
*-lastToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 마지막 순서로 이동
*-upToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 위로 이동
*-downToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 아래로 이동
*-leftToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 왼쪽으로 이동
*-rightToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 오른쪽으로 이동
*-expose(target int[or object string]) : 가젯 expand 명령 수행
*-expandAttrib(target int[or object], name string, value string [or function,string], function bind object) : expand 옵션 변경 함수.
* name [strata,min,max,animate], 함수 호출 bind object 생략 가능
*
*+-------------------------------------+
* memberof variable
*+-------------------------------------+
*-AvailableCookie : 쿠키 유지일
*-noResize : 리사이즈 변경 가능 여부 확인
*-borderColor : 영역 clone 객체 테두리 색상
*-grip : 리사이즈 grip 객체 속성 설정(color:색상,size:크기,minWidth:너비최소제한,minHeight:높이최소제한,maxWidth:너비최대제한,maxHeight:높이최대제한)
* grip={color:'red',size:8,minWidth:null,minHeight:null,maxWidth:null,maxHeight:null};
*
*3.Toggle List (Toggle TagName으로 지정된 Tag로 감싸 주어야 함.<span toggle="명령 옵션 지정"
*-reset:초기화
*-up, down, left, right:위, 아래, 왼쪽, 오른쪽으로 이동
*-first, last:처음, 끝으로 이동
*-next, prev:다음, 이전 순서로 이동
*-drag: 드래그 앤 드랍 영역
*-expand: document 영역에 대한
*-gadget: expand, resize 영역
*
*+-------------------------------------+
*expand option (<span toggle="expand" attr:옵션="값" ...>
*+-------------------------------------+
*- gadget toggle이 반드시 존재하여야 함.
*-'attr:strata' : Int 속도
*-'attr:state' : [max, min] 상태값
*-'attr:min' : 최소화되었을 때 실행할 함수 또는 JS code
*-'attr:max' : 최대화되었을 때 실행할 함수 또는 JS code
*-'attr:animate' : [Blind, Slide, [None or null]] : 각 상태값 변경 시 효과
*
*+-------------------------------------+
*onArrival return value
*+-------------------------------------+
*-index: 순서 값
*-top: style.top
*-left: style.left
*-width: style.width
*-height: style.height
*-expanded: expand 속성[Bool]
*/
미리보기 전체소스....
xwzGadgetry.js 파일은 첨부파일 다운...
<!--
/*****************************************************************************************************************
*
* Copyright(c) 2003. ezplus4u.com. all right reserved.
* Copyright(c) 2004. x-wiz.com. all right reserved.
* X-Wiz.com by Lee N.Thu
*****************************************************************************************************************/
-->
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
<html>
<head>
<title>뎁퍼-엑스위즈 :: JS - gadgetry, x-wiz.com</title>
<meta NAME="keywords" Content="javascript,php,programer,developer,xwiz,x-wiz,자바스크립트,프로그래머,개발자,엑스위즈">
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta http-equiv='Cache-Control' content='No-Cache, must-reval!idate' />
<meta http-equiv='Pragma' content='No-Cache' />
<meta http-equiv='Expires' content='now' />
<meta http-equiv="imagetoolbar" CONTENT="no"/>
<meta name="robots" content="index, nofallow"/>
<meta name="REVISIT-AFTER" CONTENT="7 days"/>
<meta name="verify-v1" content="y2QWgtfH6RQYpXqaTsnMBN9ApdEEKmsqObAan/pQPlQ=" />
<style>
/**/
dl, dt, dd{margin:0px}
body, table, tr, td, select, textarea, input { font-family:'돋움'; font-size: 12px; line-height: 1.5em;color:#666666}
a, a:link,a:active, a:focus, a:visited {text-decoration: none;color:#666666;outline-style: none;outline-width:0px;outline-color: invert;}
a:hover{text-decoration: none; color: #FF3300}
dt,dd{float:left}
</style>
</head>
<body bgcolor="#FFFFFF">
<script language="JavaScript" src="xwzGadgetry.js" charset="UTF-8"></script>
<style type="text/css">
body{background-color:#ffffff; padding:0px; color:#333333;font-size:12px; font-family:굴림,Gulim,sans-serif; cursor:default;}
INPUT{font-size:11px;font-family:굴림,Gulim,sans-serif;}
TD{font-size:12px; font-family:굴림,Gulim,sans-serif; height:26px}
.frame {border:#CACACA 1px solid;margin:0px 0px 0px 0px;padding:15px 0 7px 0;background-color:#EEEEEE;clear:both}
.list{padding:0px 2px 0px 2px;margin:0px 0px 5px 0px;}
.list dd {margin:2px;padding:0px;color:#666666;width:260px;overflow:hidden;/*text-overflow:ellipsis;*/white-space:nowrap}
.img{display:inline;width:80px;height:60px;border:#D0D0D0 1px solid;margin:0 5px 0 5px;background-color:#FFFFFF;padding:3px}
.imgtext{display:inline;}
.block{width:300px;border:#CACACA 1px dotted;margin:5px 5px 5px 5px;}
#IDS_DIV_FRAME1{width:940px;border:#CACACA 2px solid;margin:5px;height:500px}
#IDS_DIV_FRAME1 .frame{width:300px;}
#IDS_DIV_FRAME2{width:940;border:#CACACA 2px solid;margin:5px;}
#IDS_DIV_FRAME2 .updown SPAN{text-indent:0px;width:30;text-align:center;height:12px;margin:0px 3px 0px 3px;border:#808080 1px solid;FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFD58C', EndColorStr='#FF3300');}
.header {width:130px;padding:6px 0px 2px 0px;display:block;border:#D0D0D0 1px solid;text-align:center;font-weight:bold;color:#0066FF;background-color:#EEEEEE;}
.updown3{display:inline;width:300px;font-size:11px;text-align:right;}
.updown1 SPAN{text-indent:0px;width:30;text-align:center;height:12px;margin:3px 3px 0px 3px;border:#808080 1px solid;FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#85B3E3', EndColorStr='#355FA8');}
.updown3 SPAN{text-indent:0px;width:30;text-align:center;height:12px;margin:0px 3px 0px 3px;border:#808080 1px solid;FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#85B3E3', EndColorStr='#355FA8');}
</style>
<div id="IDS_DIV_FRAME1">
<!-- strart -->
<!-- strart -->
<!-- 11-->
<div class="block" style="height:150px">
<table width="300" cellspacing="0" cellpadding="0">
<tr>
<td width="120" style="border:#D0D0D0 1px solid;text-align:center;font-weight:bold;color:#0066FF;background-color:#EEEEEE;"><span toggle='drag'>Table 01</span></td>
<td align="right" style="padding-right:5px;font-size:11px" class="updown"><span title="이전" toggle="prev">prev</span>|<span title="다음" toggle="next">next</span>|<span title="처음" toggle="first">first</span>|<span title="마지막" toggle="last">last</span></td>
</tr>
</table>
<div class="frame">
<dl class="list">
<dd>ㆍThis Table 01 text 1</dd>
<dd>ㆍThis Table 01 text 2</dd>
</dl>
<table width="300" cellspacing="0" cellpadding="0" style="clear:both;">
<tr>
<td><img src="images/21.jpg" width="80" height="60" alt="x-wiz" /></td>
<td>This sample image 3</td>
</tr>
</table>
</div>
</div>
<!-- 12 -->
<div class="block">
<table width="300" cellspacing="0" cellpadding="0">
<tr>
<td width="120" style="border:#D0D0D0 1px solid;text-align:center;font-weight:bold;color:#0066FF;background-color:#EEEEEE;"><span toggle='drag'>Table 02</span></td>
<td align="right" style="padding-right:5px;font-size:11px" class="updown"><span title="이전" toggle="prev">prev</span>|<span title="다음" toggle="next">next</span>|<span title="처음" toggle="first">first</span>|<span title="마지막" toggle="last">last</span></td>
</tr>
</table>
<div class="frame">
<dl class="list">
<dd>ㆍThis Table 02 text 1</dd>
<dd>ㆍThis Table 02 text 2</dd>
</dl>
<div style="text-align:center;">
<div style="padding-top:10px;border-top:#CACACA 1px solid;width:96%;text-align:left;">
<div class="img"><img src="images/22.jpg" width="80" height="60" alt="x-wiz" /></div>
<div class="imgtext">This sample image 2</div>
</div>
</div>
</div>
</div>
<!-- 13-->
<div class="block">
<table width="300" cellspacing="0" cellpadding="0">
<tr>
<td width="120" style="border:#D0D0D0 1px solid;text-align:center;font-weight:bold;color:#0066FF;background-color:#EEEEEE;"><span toggle='drag'>Table 03</span></td>
<td align="right" style="padding-right:5px;font-size:11px" class="updown"><span title="이전" toggle="prev">prev</span>|<span title="다음" toggle="next">next</span>|<span title="처음" toggle="first">first</span>|<span title="마지막" toggle="last">last</span></td>
</tr>
</table>
<div class="frame">
<dl class="list">
<dd>ㆍThis Table 03 text 1</dd>
<dd>ㆍThis Table 03 text 2</dd>
</dl>
<div style="text-align:center">
<div style="padding-top:10px;border-top:#CACACA 1px solid;width:96%;text-align:left;">
<div class="img"><img src="images/23.jpg" width="80" height="60" alt="x-wiz" /></div>
<div class="imgtext">This sample image 3</div>
</div>
</div>
</div>
</div>
<!-- 11-->
<div class="block" style="height:165px">
<span toggle='drag'><table cellspacing="0" cellpadding="0" width="300">
<tr>
<td width="120" height="21" style="border:#D0D0D0 1px solid;text-align:center;font-weight:bold;color:#0066FF;background-color:#EEEEEE;"><b>Table 04</b></td>
<td> </td>
<td width="20" align="cneter"><span toggle='left' title="left"><img src="images/arrow_left1.gif" width="16" height="16" style="cursor:pointer"></span></td>
<td width="20" align="cneter"><span toggle='down' title="down"><img src="images/arrow_dn1.gif" width="16" height="16" style="cursor:pointer"></span></td>
<td width="20" align="cneter"><span toggle='up' title="up"><img src="images/arrow_up1.gif" width="16" height="16" style="cursor:pointer"></span></td>
<td width="20" align="cneter"><span toggle='right' title="right"><img src="images/arrow_right1.gif" width="16" height="16" style="cursor:pointer"></span></td>
<td width="20" align="cneter"><span toggle='expand' attr:min="opened(this)" attr:max="closed(this)" attr:animate='Blind' title="close" attr:strata="80"><input type=button value='닫기' style='border:none;background-color:white'></span></td>
</tr>
</table></span>
<span toggle='gadget'><div class="frame" style="clear:both;">
<dl class="list">
<dd>ㆍThis Table 04 text 1</dd>
<dd>ㆍThis Table 04 text 2</dd>
</dl>
<table width="300" cellspacing="0" cellpadding="0" style="clear:both;">
<tr>
<td><img src="images/23.jpg" width="80" height="60" alt="x-wiz" /></td>
<td>This sample image 4</td>
</tr>
</table>
</div></span>
</div>
<!-- 12 -->
<div class="block" style="height:165px">
<span toggle='drag'><table cellspacing="0" cellpadding="0" width="300">
<tr>
<td width="120" height="21" style="border:#D0D0D0 1px solid;text-align:center;font-weight:bold;color:#0066FF;background-color:#EEEEEE;"><b>Table 05</b></td>
<td> </td>
<td width="20" align="cneter"><span toggle='left' title="left"><img src="images/arrow_left1.gif" width="16" height="16" style="cursor:pointer"></span></td>
<td width="20" align="cneter"><span toggle='down' title="down"><img src="images/arrow_dn1.gif" width="16" height="16" style="cursor:pointer"></span></td>
<td width="20" align="cneter"><span toggle='up' title="up"><img src="images/arrow_up1.gif" width="16" height="16" style="cursor:pointer"></span></td>
<td width="20" align="cneter"><span toggle='right' title="right"><img src="images/arrow_right1.gif" width="16" height="16" style="cursor:pointer"></span></td>
<td width="20" align="cneter"><span toggle='expand' attr:min="this.getElementsByTagName('IMG')[0].src='images/sr/arrow_minus.gif';this.title='open' " attr:max="this.getElementsByTagName('IMG')[0].src='images/sr/arrow_plus.gif';this.title='close'" attr:animate='Slide' title="close" attr:strata="80"><img src="images/sr/arrow_plus.gif"></span></td>
</table></span>
<span toggle='gadget'>
<div class="frame">
<dl class="list">
<dd>ㆍThis Table 05 text 1</dd>
<dd>ㆍThis Table 05 text 2</dd>
</dl>
<div style="text-align:center;">
<div style="padding-top:10px;border-top:#CACACA 1px solid;width:96%;text-align:left;">
<div class="img"><img src="images/21.jpg" width="80" height="60" alt="x-wiz" /></div>
<div class="imgtext">This sample image 1</div>
</div>
</div>
</div></span>
</div>
<div class="block" style="height:165px">
<span toggle='drag'><table cellspacing="0" cellpadding="0" width="300">
<tr>
<td width="120" height="21" style="border:#D0D0D0 1px solid;text-align:center;font-weight:bold;color:#0066FF;background-color:#EEEEEE;"><b>Table 06</b></td>
<td> </td>
<td width="20" align="cneter"><span toggle='left' title="left"><img src="images/arrow_left1.gif" width="16" height="16" style="cursor:pointer"></span></td>
<td width="20" align="cneter"><span toggle='down' title="down"><img src="images/arrow_dn1.gif" width="16" height="16" style="cursor:pointer"></span></td>
<td width="20" align="cneter"><span toggle='up' title="up"><img src="images/arrow_up1.gif" width="16" height="16" style="cursor:pointer"></span></td>
<td width="20" align="cneter"><span toggle='right' title="right"><img src="images/arrow_right1.gif" width="16" height="16" style="cursor:pointer"></span></td>
<td width="20" align="cneter"><span toggle='expand' attr:min="opened(this)" attr:max="closed(this)" title="close">-</span></td>
</table></span>
<span toggle='gadget'><div class="frame">
<dl class="list">
<dd>ㆍThis Table 06 text 1</dd>
<dd>ㆍThis Table 06 text 2</dd>
</dl>
<div style="text-align:center;">
<div style="padding-top:10px;border-top:#CACACA 1px solid;width:96%;text-align:left;">
<div class="img"><img src="images/22.jpg" width="80" height="60" alt="x-wiz" /></div>
<div class="imgtext">This sample image 2</div>
</div>
</div>
</div></span>
</div>
<div class="block">
<table width="300" cellspacing="0" cellpadding="0">
<tr>
<td width="120" style="border:#D0D0D0 1px solid;text-align:center;font-weight:bold;color:#0066FF;background-color:#EEEEEE;"><span toggle='drag'>Table 07</span></td>
<td align="right" style="padding-right:5px;font-size:11px" class="updown"><span title="이전" toggle="prev">prev</span>|<span title="다음" toggle="next">next</span>|<span title="처음" toggle="first">first</span>|<span title="마지막" toggle="last">last</span></td>
</tr>
</table>
<div class="frame">
<dl class="list">
<dd>ㆍThis Table 07 text 1</dd>
<dd>ㆍThis Table 07 text 2</dd>
</dl>
<div style="text-align:center;">
<div style="padding-top:10px;border-top:#CACACA 1px solid;width:96%;text-align:left;">
<div class="img"><img src="images/23.jpg" width="80" height="60" alt="x-wiz" /></div>
<div class="imgtext">This sample image 3</div>
</div>
</div>
</div>
</div>
<!-- end -->
</div>
<form>
<input type='button' style="border:#CACACA 1px solid" value='리셋' id="ID_RESET">
<select name='count'><option value='1'>1</option><option value='2'>2</option><option value='3' selected>3</option><option value='4'>4</option></select>
<input type='button' style="border:#CACACA 1px solid" value='갯수변경' onClick="xts.columns(this.form.count.value)" >
<input type='button' style="border:#CACACA 1px solid" value='noResize' onClick="if(xts.noResize==true){xts.noResize=false;this.value='noResize';}else{xts.noResize=true;this.value='Resize';}">
</form>
<div id="IDS_DIV_" style="">
</div>
<div id="IDS_DIV_FRAME2">
<!-- strart -->
<!-- 11-->
<div class="block">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="120" style="border:#D0D0D0 1px solid;text-align:center;font-weight:bold;color:#0066FF;background-color:#EEEEEE;"><span toggle='drag'>Table 01</span></td>
<td align="right" style="padding-right:5px;font-size:11px" class="updown"><span title="이전" toggle="prev">prev</span>|<span title="다음" toggle="next">next</span>|<span title="처음" toggle="first">first</span>|<span title="마지막" toggle="last">last</span></td>
</tr>
</table>
<div class="frame">
<dl class="list">
<dd>ㆍThis Table 02 text 1</dd>
<dd>ㆍThis Table 02 text 2</dd>
</dl>
<div style="text-align:center;">
<div style="padding-top:10px;border-top:#CACACA 1px solid;width:96%;text-align:left;">
<div class="img"><img src="images/21.jpg" width="80" height="60" alt="x-wiz" /></div>
<div class="imgtext">This sample image A</div>
</div>
</div>
</div>
</div>
<!-- 22 -->
<div class="block">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="120" style="border:#D0D0D0 1px solid;text-align:center;font-weight:bold;color:#0066FF;background-color:#EEEEEE;"><span toggle='drag'>Table 02</span></td>
<td align="right" style="padding-right:5px;font-size:11px" class="updown"><span title="이전" toggle="prev">prev</span>|<span title="다음" toggle="next">next</span>|<span title="처음" toggle="first">first</span>|<span title="마지막" toggle="last">last</span></td>
</tr>
</table>
<div class="frame">
<dl class="list">
<dd>ㆍThis Table 02 text 1</dd>
<dd>ㆍThis Table 02 text 2</dd>
</dl>
<div style="text-align:center;">
<div style="padding-top:10px;border-top:#CACACA 1px solid;width:96%;text-align:left;">
<div class="img"><img src="images/24.jpg" width="80" height="60" alt="x-wiz" /></div>
<div class="imgtext">This sample image B</div>
</div>
</div>
</div>
</div>
<!-- 23-->
<div class="block">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="120" style="border:#D0D0D0 1px solid;text-align:center;font-weight:bold;color:#0066FF;background-color:#EEEEEE;"><span toggle='drag'>Table 03</span></td>
<td align="right" style="padding-right:5px;font-size:11px" class="updown"><span title="이전" toggle="prev">prev</span>|<span title="다음" toggle="next">next</span>|<span title="처음" toggle="first">first</span>|<span title="마지막" toggle="last">last</span></td>
</tr>
</table>
<span toggle='gadget'><div class="frame">
<dl class="list">
<dd>ㆍThis Table 03 text 1</dd>
<dd>ㆍThis Table 03 text 2</dd>
</dl>
<div style="text-align:center">
<div style="padding-top:10px;border-top:#CACACA 1px solid;width:96%;text-align:left;">
<div class="img"><img src="images/21.jpg" width="80" height="60" alt="x-wiz" /></div>
<div class="imgtext">This sample image C</div>
</div>
</div>
</div></span>
</div>
<!-- end -->
</div>
<script language="JavaScript">
var xts=new xwzGadgetry('IDS_DIV_FRAME1', 'SPAN',3);
var xts2=new xwzGadgetry('IDS_DIV_FRAME2');
xts.onArrival=function(a){
var div=document.getElementById('IDS_DIV_');
div.innerHTML='';
for(var i=0,len=a.length;i<len;i++){
div.innerHTML += i + ':' + a[i].index + ', top='+a[i].top +', left='+a[i].left +', width='+a[i].width +', Expand:' + (a[i].expanded==true?'Yes' : 'No') + '<br>';
}
}
window.onload=function(){
xts.load();
xts.resetToggle(document.getElementById('ID_RESET'), true);
//xts.motion(false)
xts2.load();
}
function opened(obj){
var a=obj.getElementsByTagName('INPUT');
if(a.length==0 && obj.innerHTML=='-'){
obj.innerHTML='+';
}else if(a[0].type=='button'){
a[0].value='열기';
}
obj.title='close';
}
function closed(obj){
var a=obj.getElementsByTagName('INPUT');
if(a.length==0 && obj.innerHTML=='+'){
obj.innerHTML='-';
}else if(a[0].type=='button'){
a[0].value='닫기';
}
obj.title='open';
}
</script>
<b>[<a href="xwzGadgetry.js">source file</a>]</b>
<div style="margin-top:10px;height:360px;width:955px;overflow:auto;background-color:#F2F2F2;border:#CACACA 2px solid"><xmp>
<b>
var xg=new xwzGadgetry('IDS_DIV_FRAME1', 'SPAN',3);
xg.load();
</b>
/*
Copyright (C) 2003-2007, x-wiz.com.
xwzGadgetry : Javascript UI Library for the gadget(or the widget)
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
- http://www.gnu.org/licenses/lgpl.html
*/
/**
* xwzGadgetry : Javascript UI Library for the gadget(or the widget) <http://www.x-wiz.com/>
* 레이어의 위치 지정 또는 순서 출력을 사용자가 원하는 위치 또는 순서로 배열하도록 하는 함수.
* 쇼핑몰에서 상품 위치나, 디자인관리에서 디자인 레이어 위치 이동에 따른 배열,
* 여러 통계 수치나, 입력폼과 출력폼이 동일한 화면에서 출력 순서 변경을 위해 만듦
*
* Idea of "drag&drop swap" is from "google ig<http://www.google.co.kr/ig/>" - see dragDepart()
* Idea of "toggle swap" is from "yahoo.com<http://kr.yahoo.com/>"- see prevToggle()
* Idea of "the distance" is from "daum.net<http://www.daum.net/>" - see _swapAviate()
* Idea of "bindAsObject, bindAsEvent" is from "Prototype JavaScript Framework <http://www.prototypejs.org/>"
*
*@copyright x-wiz.com
*@license The LGPL License
*@author N.Thu Lee
*@version 1.0 Alpha
*@release 2006.11.07
*@updated 2007.05.28
*@changelog
*2006.11.22
*- 레이아웃 이동 간격 수식 변경(다음.넷 참조)
*
*2006.12.04
*- 드래그앤드랍 기능 추가
*
*2007.05.02
*- xwzGadgetry로 라이브러리 명칭 확정
*- 이벤트 핸들러 추가 및 해제 함수를 라이브러리 외부 함수로 분리
*- 2개 이상의 라이브러리 대상 객체에 대해서 드래그앤드랍시 레이어 위치 문제 수정
*- bindAsObject, bindAsEvent 외부 함수 추가
*
*2007.05.05
*- expand 기능 추가. 가젯의 document 영역에 대한 최소화, 최대화 기능 추가
*
*2007.05.28
*-resize 기능 추가
*
*2007.06.04
*-resize 이벤트 발생 시 크기 표시 WidthxHeight부분이 노출되지 않은 문제 수정
*
*+-------------------------------------+
*plan
*+-------------------------------------+
* - 레이어의 각 셀영역이 고정 그리드인 것을 틀에 제한없이 사용 가능하도록 추가
* - 2개 이상의 영역에 가젯이 이동가능하도록 추가
* - 각 특성별 분리 작업 -모듈화(?). drag & drop, toggle swapping, resize, ...
* - 여전히 알고리즘이나 소스에 대한 최적화 필요 쩝....
*
*@example
*-( new xwzGadgetry(프레임 객체 ID, [[Toggle Tag Name],[Columns : 가로 갯수],[Margin : 간격]]) ).load();
*
*+-------------------------------------+
*method
*+-------------------------------------+
*-loadSequel() : 가젯 위치값을 쿠키 정보에서 가져오는 함수
*-saveSequel() : 가제 위치를 쿠키로 저장한 후 onArrival 함수를 호출
*-onArrival(function object) : 가젯 위치 변경되어 완료되었을 때 호출하는 사용자용 함수
*-getIndex(object[or int, string]) : 고유 인덱스를 통해서 해당 가젯의 배열에서 위치를 찾는 함수
*-searchGadget(object[or int, string]) : 인덱스 또는 객체값, ID, Name을 통해서 가젯 인스턴스를 찾음
*-columns(int, bool) : 가젯의 가로 갯수 설정 또는 그 값 반환 함수 (Bool:값 설정 시 가젯이 위치를 찾아갈 때 효과 없이 이동할 것인지 여부)
*-strata(int) : 가젯이 해당 위치를 찾아 갈 때, _swapAviate 함수를 몇번 호출할 것인지 설정 또는 반환(가젯 위치 이동 속도에 관여함)
*-opacity(int) : 가젯이 이동할 때 투명도 설정 및 값 반환 함수(0~100)
*-motion(Bool) : 가젯 이동 시 이동 효과 없이 바로 적용할 지 설정/반환 함수
*-reset(Bool) : 가젯 위치 초기화 전역 함수
*-compose() : 각 가젯 배열 인덱스에 따른 위치를 초기화 하는 함수
*dragDepart(event object, target int) : 마우스다운 이벤트가 발생하였을 때 drag&drop 이벤트 발생
*-resetToggle(object, bool) : 위치 초기화 (Object:이벤트 발생 객체, Bool:모션 효과 여부)
*-prevToggle(object 이벤트 발생 객체,int[or object, string]) : 클릭 이벤트 발생 대상 가젯이 이전 순서로 이동하는 버튼(이미지) 설정
*-nextToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 다음 순서로 이동
*-firstToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 처음 순서로 이동
*-lastToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 마지막 순서로 이동
*-upToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 위로 이동
*-downToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 아래로 이동
*-leftToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 왼쪽으로 이동
*-rightToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 오른쪽으로 이동
*-expose(target int[or object string]) : 가젯 expand 명령 수행
*-expandAttrib(target int[or object], name string, value string [or function,string], function bind object) : expand 옵션 변경 함수.
* name [strata,min,max,animate], 함수 호출 bind object 생략 가능
*
*+-------------------------------------+
* memberof variable
*+-------------------------------------+
*-AvailableCookie : 쿠키 유지일
*-noResize : 리사이즈 변경 가능 여부 확인
*-borderColor : 영역 clone 객체 테두리 색상
*-grip : 리사이즈 grip 객체 속성 설정(color:색상,size:크기,minWidth:너비최소제한,minHeight:높이최소제한,maxWidth:너비최대제한,maxHeight:높이최대제한)
* grip={color:'red',size:8,minWidth:null,minHeight:null,maxWidth:null,maxHeight:null};
*
*3.Toggle List (Toggle TagName으로 지정된 Tag로 감싸 주어야 함.<span toggle="명령 옵션 지정"
*-reset:초기화
*-up, down, left, right:위, 아래, 왼쪽, 오른쪽으로 이동
*-first, last:처음, 끝으로 이동
*-next, prev:다음, 이전 순서로 이동
*-drag: 드래그 앤 드랍 영역
*-expand: document 영역에 대한
*-gadget: expand, resize 영역
*
*+-------------------------------------+
*expand option (<span toggle="expand" attr:옵션="값" ...>
*+-------------------------------------+
*- gadget toggle이 반드시 존재하여야 함.
*-'attr:strata' : Int 속도
*-'attr:state' : [max, min] 상태값
*-'attr:min' : 최소화되었을 때 실행할 함수 또는 JS code
*-'attr:max' : 최대화되었을 때 실행할 함수 또는 JS code
*-'attr:animate' : [Blind, Slide, [None or null]] : 각 상태값 변경 시 효과
*
*+-------------------------------------+
*onArrival return value
*+-------------------------------------+
*-index: 순서 값
*-top: style.top
*-left: style.left
*-width: style.width
*-height: style.height
*-expanded: expand 속성[Bool]
*/
/**
+---------------------------------------------------------------------------+
| 전역 함수 선언
+ --------------------------------------------------------------------------+
*/
/*
* 해당 메소드를 소유객체(Owner object)로 인스턴스를 미리 묶어서 반환하는 함수, 소유객체와 동일한 인자값을 갖는다.
*@param {Object, [Number, String, Object, ...], ...} 함수(메소드)를 소유하고 있는 객체, 전달 변수, ...
*@author N.Thu Lee
*@copyright x-wiz.com
*@version 0.1
*@release 2007.01.12
*/
Function.prototype.bindAsObject=function(){var _$=this,args=[],object=null;for(var i=0,len=arguments.length;i<len;i++)args[i]=arguments[i];object=args.shift();return function(){return _$.apply(object,args);}};
/*
* 해당 메소드를 소유객체(Owner object)로 인스턴스를 미리 묶어서 반환하는 함수, 이벤트 객체를 전달받으며, 소유객체와 동일한 인자값을 갖는다.
*@param {Object, [Number, String, Object, ...], ...} 함수(메소드)를 소유하고 있는 객체, 전달 변수, ...
*@author N.Thu Lee
*@copyright x-wiz.com
*@version 0.1
*@release 2007.01.12
*/
Function.prototype.bindAsEvent=function(){ var _$=this,args=[],object=null; for(var i=0,len=arguments.length;i<len;i++)args[i]=arguments[i];object=args.shift(); return function(e){ var body=document.body||document.documentElement,hEvent=(e||window.event),_o=hEvent['element']=hEvent.target||hEvent.srcElement; /*객체의 body에서의 Top,Left 위치*/ hEvent['offsetTop']=hEvent['offsetLeft']=0; while(_o.offsetParent){ hEvent['offsetLeft']+=_o.offsetLeft; hEvent['offsetTop']+=_o.offsetTop; _o=_o.offsetParent; }; /*이벤트 객체의 속성값 반환*/ hEvent['_x']=hEvent.pageX||(hEvent.clientX+(body.scrollLeft-body.clientLeft)); hEvent['_y']=hEvent.pageY||hEvent.clientY+body.scrollTop-body.clientTop; hEvent['_left']=(hEvent.which&&e.button==0)||!!(hEvent.button&1); hEvent['_middle']=(hEvent.which&&e.button==1)||!!(hEvent.button&4); hEvent['_right']=(hEvent.which&&e.button==2)||!!(hEvent.button&2); hEvent['_key']=(hEvent.keyCode||hEvent.which); return _$.apply(object,[hEvent].concat(args)); }; };
/*
* 특정 객체에 이벤트 핸들러 추가 함수
*@param {Object, String, Function, Bool} 대상 객체, 이벤트 명, 함수, capture
*@author N.Thu Lee
*@copyright x-wiz.com
*@version 0.1
*@release 2007.01.12
*/
addEventObserve=function(element,name,fpnotify,useCapture){if(element.addEventListener)element.addEventListener(name,fpnotify,useCapture||false);else if(element.attachEvent)element.attachEvent('on'+name,fpnotify);};
/*
* 특정 객체에 이벤트 핸들러 해제 함수
*@param {Object, String, Function, Bool} 대상 객체, 이벤트 명, 함수, capture
*@author N.Thu Lee
*@copyright x-wiz.com
*@version 0.1
*@release 2007.01.12
*/
freeEventObserve=function(element,name,fpnotify,useCapture){ if(element.removeEventListener)element.removeEventListener(name,fpnotify,useCapture||false);else if(element.detachEvent)element.detachEvent('on'+name,fpnotify);};/**
* Opacity style Apply
*@param {Object} element-style 요소를 갖는 객체
*@param {Number} nValue-투명도
*@author N.Thu Lee
*@copyright x-wiz.com
*@version 0.1
*@release 2007.01.12
*/
notifyOpacity=function(element, nValue){ try{ if(element.style.filter!=null){/*IE*/ element.style.filter=nValue==null?'':'alpha(opacity='+nValue+')'; if(!element.currentStyle||!element.currentStyle.hasLayout){element.style.zoom=1;} }else if(element.style.opacity!=null){/**/ element.style.opacity=nValue==null?null:nValue/100; }else if(element.style['-moz-opacity']!=null){/* Moz's*/ element.style['-moz-opacity']=nValue==null?null:nValue/100; }else if(element.style.MozOpacity!=null){/*FF*/ element.style.MozOpacity=nValue==null?null:nValue/100; }else if(element.style['-khtml-opacity']!=null){/*KDE*/ element.style['-khtml-opacity']=nValue==null?null:nValue/100; }else{ } }catch(e){}; };
/**
+---------------------------------------------------------------------------+
| xwzGadgetry
+ --------------------------------------------------------------------------+
*/
/**
* xwzGadgetry 생성.
*@param {String} byID 해당 객체를 포함하고있는 객체
*@param {Number} nColumns 각 Row로 분활될 Column갯수
*@param {Number} Distance 각 대상 객체 간의 간격
*@return {Object} Returns a new xwzGadgetry.
*@access public
*@constructor
*/
var xwzGadgetry=function(byID,tagName,Columns,Distance){ this.version='1.0alpha'; this.sName='__xwzSRW_'+byID; this.Gadgetry=document.getElementById(byID); if(this.Gadgetry==null)return null; this.initialize=false;/*초기화 여부*/ this.tagName=tagName||'SPAN'; this.nDistance=Distance||10;/*객체들간의 간격*/ this.nCells=Columns||1;/*Column 갯수*/ this.nOpacity=86;/*이동간의 투명도설정*/ this.nStrata=5;/*레이어 이동 단계 갯수*/ this.isMotion=true; this.zIndex=0;/*deep index*/ this.Nodes=[];/*객체 배열변수*/ this.Atlas=[];/*각 좌표값 배열변수*/ this.Queue=[];/*이동대상 배열변수*/ this.resTime=null;/*시간*/ this.Observers=[]; this.keelblocks=null;/**/ this.talebearing=''; /*드래그 앤 드랍,Resize 관련 변수*/ this._trace ={dX:0,dY:0,nTarget:null,nSource:null};/*마우스 이벤트 정보*/ this.grips ={lt:null,lm:null,lb:null,ct:null,cb:null,rt:null,rm:null,rb:null}; this.sizeinfo =null; };
/**
* 레이어 위치가 변경되어 완료되었을 때 지정된 함수를 호출
*@method onArrival
*@see #saveSequel()
*/
xwzGadgetry.prototype.onArrival=null;
/**
*@memberof xwzGadgetry
*@access public
*/
/*resize option*/ xwzGadgetry.prototype.noResize=false;
/*bordercolor*/ xwzGadgetry.prototype.borderColor='#808080';
/*resize grip*/ xwzGadgetry.prototype.grip={color:'red',size:8,minWidth:null,minHeight:null,maxWidth:null,maxHeight:null};
/*쿠키유지일*/ xwzGadgetry.prototype.AvailableCookie=7;
/**
* 각 객체들의 순서를 쿠키에서 가져오는 함수
*@method loadSequel
*@return {String} Return 쿠키값.
*@access public
*/
xwzGadgetry.prototype.loadSequel=function(){ var offsetMin=0,offsetMax=0; if(document.cookie!.length>0){/*쿠키가 존재하는 체크*/ offsetMin=document.cookie!.indexOf(this.sName+'=');/*해당한 이름을 갖는 쿠키 정보 시작 위치*/ if(offsetMin!==-1){ offsetMin+=this.sName.length+1;offsetMax=document.cookie!.indexOf(';',offsetMin); if(offsetMax===-1){offsetMax=document.cookie!.length;}; return (unescape(document.cookie!.substring(offsetMin,offsetMax))).toString().split(','); } } return false; }
/**
* 각 레이어들의 순서를 쿠키로 저장하는 함수, 외부호출함수가 있을 경우 해당 함수 호출
*@method saveSequel
*@see #onArrival()
*@access public
*/
xwzGadgetry.prototype.saveSequel=function(){ var dtExpire=null,sExpire='',S=[],domain=window.document.domain||window.location!.hostname; for(var i=0,len=this.Nodes.length;i<len;i++){S[i]=this.Nodes[i].getAttribute('_GadgetIndex');} if(this.AvailableCookie*24>0){dtExpire=new Date((new Date()).getTime()+(this.AvailableCookie*24)*3600000);sExpire='; expires='+dtExpire.toGMTString();} document.cookie!=(this.sName)+'='+escape(S.toString())+sExpire+'; path=/;'+(typeof(domain)=='string'&&domain!=''?'domain='+domain:'')+';'; var $A=[],nIndex; /** * 레이어 위치가 변경되어 완료되었을 때 지정된 함수를 호출 *@method onArrival *@see #saveSequel() */ if(typeof this.onArrival=='function'&&this.initialize==true){ for(var i=0,len=this.Nodes.length;i<len;i++){ nIndex=this.Nodes[i].getAttribute('_GadgetIndex'); $A[nIndex]={index:i, top:parseInt(this.Nodes[i].style.top),left:parseInt(this.Nodes[i].style.left),width:parseInt(this.Nodes[i].style.width),height:parseInt(this.Nodes[i].style.height), expanded:this.Nodes[i].gadget!=null?(this.Nodes[i].gadget.state=='collapse'?false:true):true }; } this.onArrival($A); } };
/**
* 각 객체들의 고유 인덱스를 통해서 해당 객체의 배열에서의 위치를 찾는 함수
*@method getIndex
*@param {Number} _index 객체의 인덱스값
*@return {Number} 대상 인덱스를 갖는 Nodes 배열 인덱스
*@access public
*/
xwzGadgetry.prototype.getIndex=function(_index){for(var i in this.Nodes){if(this.Nodes[i].getAttribute('_GadgetIndex')==_index)return(i*1);}};
/**
* 인덱스 또는 객체값을 통해 해당 객체의 배열 위치를 찾는 함수
*@method searchGadget
*@param {Object,Number,String} mixValue 특정 객체의 인덱스값, 또는 인스턴스 또는 ID, Name 속성 값
*@return {Number} 대상 객체의 배열 Nodes 인덱스
*@access public
*@changelog 2007.05.04 파라미터에 id, name속성값에 대해서도 처리할 수 있도록 getElementById, getElementByName 추가
*/
xwzGadgetry.prototype.searchGadget=function(mixValue){var o=null;if(typeof mixValue=='object'){for(var i in this.Nodes)if(this.Nodes[i]==mixValue)return(i*1);}else if(typeof mixValue=='number'){for(var i in this.Nodes)if(i==mixValue)return(i*1);}else if(typeof mixValue=='string'){o=document.getElementById(mixValue)||document.getElementsByName(mixValue)[0]||null;for(var i in this.Nodes)if(this.Nodes[i]==mixValue)return(i*1);};return false};
/**
* Column 갯수 변경 함수 또는 Column갯수 반환 함수
*@method columns
*@param {Number} nValue column 갯수
*@param {Bool} isDirectly 변경 시 즉각 반영여부(true : 즉각 반영하지 않음, false : 즉각 반영)
*@return {Number} Column 갯수
*@access public
*/
xwzGadgetry.prototype.columns=function(nValue,isDirectly){this.nCells=(typeof nValue=="number"||typeof nValue=="string")?nValue*1:this.nCells;this._swapDepart(isDirectly);return this.nCells;};
/**
* 레이어 이동 단계 갯수 변경 및 반환 함수
*@method strata
*@param {Number} nValue 변경하려는 값
*@return {Number} 레이어 이동 단계 갯수 싸이클
*@access public
*/
xwzGadgetry.prototype.strata=function(nValue){return this.nStrata=(typeof nValue=="number"||typeof nValue=="string")?nValue*1:this.nStrata;};
/**
* 이동시 투명도 설정함수
*@method opacity
*@param {Number} nValue 변경하려는 값
*@return {Number} 투명도 값
*@access public
*/
xwzGadgetry.prototype.opacity=function(nValue){return this.nOpacity=(typeof nValue=="number"||typeof nValue=="string")?nValue*1:this.nOpacity;};
/**
* 이동시 바로 적용할 지 여부
*@method motion
*@param {Bool} bValue 변경하려는 값
*@return {Bool} true, false
*@access public
*/
xwzGadgetry.prototype.motion=function(bValue){return this.isMotion=bValue;};
/**
* 각 레이어들의 순위를 초기화 하는 함수
*@method resetToggle
*@see #reset()
*@see addEventObserve()
*@param {Object} 이벤트 발생 객체
*@param {Bool} isDirectly 즉각 반영여부
*@access public
*/
xwzGadgetry.prototype.resetToggle=function(objSrc,isDirectly){addEventObserve(objSrc,'click',this.reset.bindAsObject(this,isDirectly))};
/**
* 이전 레이어와 위치 변경
*@method prevToggle
*@see #searchGadget()
*@see #_stack()
*@param {Object} 이벤트 발생 객체
*@param {Object,Number,String} mixValue 특정 객체의 인덱스값, 또는 인스턴스 또는 ID, Name 속성 값
*@access public
*/
xwzGadgetry.prototype.prevToggle=function(objSrc,mixValue){var _index=this.searchGadget(mixValue);if(_index!==false)addEventObserve(objSrc,'click',this._stack.bindAsObject(this,_index,-1));};
/**
* 다음 레이어와 위치 변경
*@method nextToggle
*@see #searchGadget()
*@see #_stack()
*@param {Object} 이벤트 발생 객체
*@param {Object,Number,String} [mixValue] 특정 객체의 인덱스값, 또는 인스턴스 또는 ID, Name 속성 값
*@access public
*/
xwzGadgetry.prototype.nextToggle=function(objSrc,mixValue){var _index=this.searchGadget(mixValue);if(_index!==false)addEventObserve(objSrc,'click',this._stack.bindAsObject(this,_index,1));};
/**
* 처음 위치로 이동
*@method firstToggle
*@see #searchGadget()
*@see #_above()
*@param {Object} 이벤트 발생 객체
*@param {Object,Number,String} [mixValue] 특정 객체의 인덱스값, 또는 인스턴스 또는 ID, Name 속성 값
*@access public
*/
xwzGadgetry.prototype.firstToggle=function(objSrc,mixValue){var _index=this.searchGadget(mixValue);if(_index!==false)addEventObserve(objSrc,'click',this._above.bindAsObject(this,_index));};
/**
* 마지막 위치로 이동
*@method lastToggle
*@see #searchGadget()
*@see #_below()
*@param {Object} 이벤트 발생 객체
*@param {Object,Number,String} [mixValue] 특정 객체의 인덱스값, 또는 인스턴스 또는 ID, Name 속성 값
*@access public
*/
xwzGadgetry.prototype.lastToggle=function(objSrc,mixValue){var _index=this.searchGadget(mixValue);if(_index!==false)addEventObserve(objSrc,'click',this._below.bindAsObject(this,_index));};
/**
* y 좌표 객체와 자리 변경(column 수 만큼 인덱스 감소)
*@method upToggle
*@see #searchGadget()
*@see #_cross()
*@param {Object} 이벤트 발생 객체
*@param {Object,Number,String} [mixValue] 특정 객체의 인덱스값, 또는 인스턴스 또는 ID, Name 속성 값
*@access public
*/
xwzGadgetry.prototype.upToggle=function(objSrc,mixValue){var _index=this.searchGadget(mixValue);if(_index!==false)addEventObserve(objSrc,'click',this._cross.bindAsObject(this,_index,'up'));};
/**
* y 좌표 객체와 자리 변경(column 수 만큼 인덱스 증가)
*@method downToggle
*@see #searchGadget()
*@see #_cross()
*@param {Object} 이벤트 발생 객체
*@param {Object,Number,String} [mixValue] 특정 객체의 인덱스값, 또는 인스턴스 또는 ID, Name 속성 값
*@access public
*/
xwzGadgetry.prototype.downToggle=function(objSrc,mixValue){var _index=this.searchGadget(mixValue);if(_index!==false)addEventObserve(objSrc,'click',this._cross.bindAsObject(this,_index,'down'));};
/**
* x 좌표 객체와 자리 변경(해당 가로 줄에서 첫번째로 이동)
*@method leftToggle
*@see #searchGadget()
*@see #_cross()
*@param {Object} 이벤트 발생 객체
*@param {Object,Number,String} [mixValue] 특정 객체의 인덱스값, 또는 인스턴스 또는 ID, Name 속성 값
*@access public
*/
xwzGadgetry.prototype.leftToggle=function(objSrc,mixValue){var _index=this.searchGadget(mixValue);if(_index!==false)addEventObserve(objSrc,'click',this._cross.bindAsObject(this,_index,'left'));};
/**
* x 좌표 객체와 자리 변경(해당 가로 줄에서 마지막으로 이동)
*@method rightToggle
*@see #searchGadget()
*@see #_cross()
*@param {Object} 이벤트 발생 객체
*@param {Object,Number,String} [mixValue] 특정 객체의 인덱스값, 또는 인스턴스 또는 ID, Name 속성 값
*@access public
*/
xwzGadgetry.prototype.rightToggle=function(objSrc,mixValue){var _index=this.searchGadget(mixValue);if(_index!==false)addEventObserve(objSrc,'click',this._cross.bindAsObject(this,_index,'right'));};
/**
* 환경값에 따라 초기화 하는 함수
*@method load
*@access public
*/
xwzGadgetry.prototype.load=function(){ if(this.initialize==true) return ; var nX=0,nY=0,v=[],h=[],nNodeIndex=0; var oNode=null,List=[],_t=[],_f=this.loadSequel(),a={},t=null; for(var i=0,iLen=this.Gadgetry.childNodes.length;i<iLen;i++){ oNode=this.Gadgetry.childNodes[i]; /*자식 객체가 주석,문자열 또는 object가 아닌 경우 */ if(oNode.nodeName.toLowerCase()=='#text'||oNode.nodeName.toLowerCase()=='#comment'||typeof(oNode)!='object')continue; oNode['gadget']={}; /*자식 객체에서 명령 기능을 갖는 SPAN 태그를 찾는다*/ oList=oNode.getElementsByTagName(this.tagName); for(var j=0,jLen=oList.length;j<jLen;j++){ if(oList[j].getAttribute('toggle')==null)continue; oList[j].style.cursor='pointer'; switch(oList[j].getAttribute('toggle').toLowerCase()){ case 'gadget': /*slide 효과를 주기위한 DIV 생성*/ t=document.createElement('DIV'); t.style.marginTop='-1px'; t.style.marginLeft='0px'; t.style.width=(parseInt(oList[j].style.width)||oList[j].offsetWidth)+'px'; t.style.height='1px'; t.style.overflow='hidden';/*IE Margin Bug -_-;;*/ oList[j].insertBefore(t,oList[j].childNodes[0]); oNode['gadget'].topgap=t.style.marginTop; /*영역 지정*/ oList[j].style.display='block'; oList[j].style.width=(parseInt(oList[j].style.width)||oList[j].offsetWidth)+'px'; oList[j].style.height=((parseInt(oList[j].style.height)||oList[j].offsetHeight)+1)+'px'; oList[j].style.overflow='hidden'; oList[j].style.visibility='visible'; oNode['gadget'].style=oList[j].style; oNode['gadget'].width=parseInt(oList[j].style.width); oNode['gadget'].height=parseInt(oList[j].style.height); break; case 'expand': oNode['gadget'].onMinimized=new Function(oList[j].getAttribute('attr:min')).bindAsObject(oList[j]);/*최소화일때 사용자 정의 함수 실행*/ oNode['gadget'].onMaximized=new Function(oList[j].getAttribute('attr:max')).bindAsObject(oList[j]);/*최대화일때 사용자 정의 함수 실행*/ oNode['gadget'].strata=oList[j].getAttribute('attr:strata')||this.nStrata; oNode['gadget'].state=oList[j].getAttribute('attr:state')||'expand'; oNode['gadget'].animate=(oList[j].getAttribute('attr:animate')||'none').toLowerCase(); addEventObserve(oList[j],'click',this.expose.bindAsObject(this,nNodeIndex)); break; case 'reset': addEventObserve(oList[j],'click',this.reset.bindAsObject(this)); break; case 'up': addEventObserve(oList[j],'click',this._cross.bindAsObject(this,nNodeIndex,'up')); break; case 'down': addEventObserve(oList[j],'click',this._cross.bindAsObject(this,nNodeIndex,'down')); break; case 'left': addEventObserve(oList[j],'click',this._cross.bindAsObject(this,nNodeIndex,'left')); break; case 'right': addEventObserve(oList[j],'click',this._cross.bindAsObject(this,nNodeIndex,'right')); break; case 'drag': addEventObserve(oList[j],'mousedown',this.dragDepart.bindAsEvent(this,nNodeIndex)); oList[j].style.cursor='move'; break; case 'first': addEventObserve(oList[j],'click',this._above.bindAsObject(this,nNodeIndex)); break; case 'last': addEventObserve(oList[j],'click',this._below.bindAsObject(this,nNodeIndex)); break; case 'next': addEventObserve(oList[j],'click',this._stack.bindAsObject(this,nNodeIndex,1)); break; case 'prev': addEventObserve(oList[j],'click',this._stack.bindAsObject(this,nNodeIndex,-1)); default:break; }; }; /*Resize*/ addEventObserve(oNode,'mousedown',this.resize.bindAsEvent(this,nNodeIndex)); /*하위 객체의 너비,높이*/ nX=oNode.offsetWidth>parseInt(oNode.style.width||0)?oNode.offsetWidth:parseInt(oNode.style.width);/*Node Width*/ nY=oNode.offsetHeight>parseInt(oNode.style.height||0)?oNode.offsetHeight:parseInt(oNode.style.height);/*Node Height*/ /*각 하위객체에 Index값 설정*/ oNode.setAttribute('_GadgetIndex',nNodeIndex); /*각 하위객체의 위치에 대한 값을 갖음*/ this.Atlas[nNodeIndex]={X:0,Y:0,cX:nX,cY:nY,dX:0,dY:0}; this.Nodes[nNodeIndex]=oNode; /*하위 객체의 스타일 속성 변경*/ oNode.style.position='absolute'; oNode.style.width=nX+'px';oNode.style.height=nY+'px'; oNode.style.margin='0px 0px 0px 0px'; oNode.style.display='block'; this.zIndex=this.zIndex+(this.Nodes.length*1000); nNodeIndex++; }; /*대상객체의 position값 변경*/ this.Gadgetry.style.position='relative'; if(_f!=false){/*sort*/ oList=this.Nodes;this.Nodes=[]; for(var i=0,len=oList.length;i<len;i++){if(oList[_f[i]]==null)continue;_t[_t.length]=_f[i];}; for(var i=0,len=_t.length;i<len;i++){j=_t[i]==null?i:_t[i];this.Nodes[i]=oList[j]}; oList=null;_f=null;_t=null; }; /*드래그앤드랍,리사이즈에 대한 이동객체의 복사본(크기만 갖음)*/ this.keelblocks=document.createElement('DIV'); with(this.keelblocks.style){border=this.borderColor+' 2px dashed';position='absolute';display='none';cursor='move';}; this.Gadgetry.appendChild(this.keelblocks); /*리사이즈*/ var cursors={lt:'se-resize',lm:'e-resize',lb:'ne-resize',ct:'s-resize',cb:'n-resize',rt:'sw-resize',rm:'w-resize',rb:'nw-resize'}; for(var nm in this.grips){ this.grips[nm]=document.createElement('DIV'); this.grips[nm].nm=nm; this.grips[nm].style.left ='0px';this.grips[nm].style.top='0px'; this.grips[nm].style.width=parseInt(this.grip.size)+'px';this.grips[nm].style.height=parseInt(this.grip.size)+'px'; this.grips[nm].style.margin='0px';this.grips[nm].style.padding='0px';this.grips[nm].style.border='none'; this.grips[nm].style.position='absolute'; this.grips[nm].style.display='block'; this.grips[nm].style.overflow='hidden'; this.grips[nm].style.visibility='hidden'; this.grips[nm].style.cursor=cursors[nm] ; this.grips[nm].style.zIndex=this.zIndex+100; this.grips[nm].style.backgroundColor=this.grip.color; addEventObserve(this.grips[nm],'mousedown',this._resizeDepart.bindAsEvent(this)); this.grips[nm].innerHTML="<img width='"+parseInt(this.grip.size)+"' height='"+parseInt(this.grip.size)+"' style='visibility:hidden;'>"; this.Gadgetry.appendChild(this.grips[nm]); } this.sizeinfo=document.createElement('DIV'); this.sizeinfo.style.fontSize='11px'; this.sizeinfo.style.fontFamily='Tahoma'; this.sizeinfo.style.color=this.grip.color; this.sizeinfo.style.position='absolute'; this.sizeinfo.style.visibility='hidden'; this.sizeinfo.style.cursor='default'; this.sizeinfo.style.left ='0px';this.sizeinfo.style.top='0px'; this.sizeinfo.style.margin='0px';this.sizeinfo.style.padding='0px'; this.sizeinfo.style.border='none';this.sizeinfo.style.zIndex=this.zIndex+1000; this.Gadgetry.appendChild(this.sizeinfo); this.compose(); this.initialize=true; };
/**
* 레이어 순서를 초기화 하는 함수
*@method reset
*@param {Bool} isDirectly 즉시 반영 여부
*@access public
*/
xwzGadgetry.prototype.reset=function(isDirectly){ var S=[],nIndex=0; for(var i=0,len=this.Nodes.length;i<len;i++){ nIndex=this.Nodes[i].getAttribute('_GadgetIndex')*1; S[nIndex]=this.Nodes[i]; }; this.Nodes=S; this._swapDepart(isDirectly); };
/**
* Nodes 배열 인덱스 값에 따라 레이어 위치를 초기화하는 함수
*@method compose
*@see #_mapping()
*@see #_molding()
*@acess public
*/
xwzGadgetry.prototype.compose=function(){ var Rect=this._mapping(this.Nodes,this.nCells,this.nDistance); for(var i=0,len=this.Nodes.length;i<len;i++){ this.Atlas[i].X=Rect[i].X;this.Atlas[i].Y=Rect[i].Y; this.Atlas[i].cX=Rect[i].cX;this.Atlas[i].cY=Rect[i].cY; this.Nodes[i].style.left=Rect[i].X+'px';this.Nodes[i].style.top=Rect[i].Y+'px'; this.Nodes[i].style.zIndex=this.zIndex+i; }; this._molding(); };
/**
* 마우스다운 이벤트가 발생하였을 때 drag&drop 이벤트 발생
*@method _dragDepart
*@param {Object} event 이벤트 핸들러
*@param {Number} _index 대상 객체의 인덱스
*@acess public
*/
xwzGadgetry.prototype.dragDepart=function(event,_index){ window.focus(); if(event._left!==true){this._dragArrival();return false;} /*Resize일때*/ if(this.talebearing=='resize')this._showGrips(); /*이벤트 상태값*/ this.talebearing='drag'; var s=this.getIndex(_index),z=0,node=this.Nodes[s];/*드래그앤드랍 대상 객체*/ this.Queue=[]; /*이동 객체에 투명도를 줌*/ notifyOpacity(node,60); /*인덱스 저장*/ this._trace.nTarget=this._trace.nSource=s; /*z-index save*/ z=node.style.zIndex; this.keelblocks.style.zIndex=node.style.zIndex; node.style.zIndex=this.zIndex+(this.Nodes.length*500); /*레이어가 이동할 동안 레이어가 위치할 자리에 대신 위치할 객체 이동*/ this.keelblocks.style.left=node.style.left; this.keelblocks.style.top=node.style.top; this.keelblocks.style.width=node.style.width; this.keelblocks.style.height=node.style.height; /*현재 포인트 기록*/ this._trace.dX=event._x;this._trace.dY=event._y; /*이벤트 등록 */ this.Observers['mousemove']=this._dragAviate.bindAsEvent(this,node); this.Observers['mouseup']=this._dragArrival.bindAsObject(this,node); addEventObserve(window.document,'mouseup',this.Observers['mouseup']); addEventObserve(window.document,'mousemove',this.Observers['mousemove']); window.document.onselectstart=new Function('return false'); window.document.ondragstart = new Function ("return false"); this.Queue=this.Nodes; };
/**
* 정해진 영역 펼침 또는 숨김 함수
*@method expose
*@acess Public
*/
xwzGadgetry.prototype.expose=function(_index){ /*이벤트 상태값*/ this.talebearing='expose'; var s=this.getIndex(_index),node=this.Nodes[s]; var dest=0; if(node.pixWidth==null)node.pixWidth=parseInt(node.style.width); if(node.pixHeight==null)node.pixHeight=parseInt(node.style.height); /*일반적인 숨김 또는 펼침 */ if(node.gadget.animate=='none'){this._expanded(node);return;} if(node.gadget.state=='collapse'){/*변경할 속성 값*/ dest=node.gadget.animate=='slide'?-1:node.gadget.height; node.gadget.style.visibility='visible'; }else{/*변경할 속성 값*/ dest=node.gadget.animate=='slide'?(node.gadget.height+1)*-1:1; } this._expanding(node,dest,0); };
/**
* expand 설정값 변경 함수
*@method expandAttrib
*@param {object,number} _gadget 인덱스 또는 객체인스턴스
*@param {string} _name 변경할 속성이름
*@param {function,string,number} _value 속성 값
*@param {object} _srcObj 최소, 최대화 함수의 참조 객체
*@acess Public
*/
xwzGadgetry.prototype.expandAttrib=function(_gadget,_name,_value,_srcObj){ var node=this.searchGadget(_gadget); if(node==null)return false; switch(_name){ /*최소화완료후실행할함수*/ case 'min':node.gadget.onMinimized=typeof _srcObj!='object'?new Function(_value||''):new Function(_value).bindAsObject(_srcObj);break; /*최대화완료후실행할함수*/case 'max':node.gadget.onMaximized=typeof _srcObj!='object'?new Function(_value||''):new Function(_value).bindAsObject(_srcObj); break; /*strata*/case 'strata':node.gadget.strata=parseInt(_value||node.gadget.strata);break; /*효과*/case 'animate':node.gadget.animate=parseInt(_value||node.gadget.animate);break; } return true; }
/**
* 리사이즈 함수
*@method resizeTo!
*@acess public
*/
xwzGadgetry.prototype.resize=function(event,_index){ if(this.noResize==true||event._left==false){return false;} var s=this.getIndex(_index); /*resize일때 중단*/ if((this.talebearing=='resize'&&s==this._trace.nSource)||(this.talebearing!='' &&this.talebearing!='resize')){ this.talebearing=this.talebearing!='resize'?this.talebearing:'';this._showGrips();return true; } this.talebearing='resize';/*이벤트 상태값 변경*/ this._trace.nSource=s; this._resizeArrange(this.Nodes[s]); this._showGrips(true); };
/**
* 선택된 레이어를 첫번째 배열요소로 이동
*@method _above
*@param {Number} _index 레이어 인덱스 번호
*@param {Bool} isDirectly 즉시 반영 여부
*@access private
*/
xwzGadgetry.prototype._above=function(_index){ var oList=[],s=this.getIndex(_index);if(s==0)return; oList[0]=this.Nodes[s]; for(var i=0,len=this.Nodes.length;i<len;i++){if(i!=s)oList[oList.length]=this.Nodes[i];}; this.Nodes=oList;this._swapDepart(); };
/**
* 선택된 레이어를 마지막번째 배열요소로 이동
*@method _below
*@param {Number} _index 레이어 인덱스 번호
*@access private
*/
xwzGadgetry.prototype._below=function(_index){ var oList=[],s=this.getIndex(_index);if(s==this.Nodes.length-1)return; for(var i=0,len=this.Nodes.length;i<len;i++){if(i!=s)oList[oList.length]=this.Nodes[i];}; oList[oList.length]=this.Nodes[s];this.Nodes=oList;this._swapDepart(); };
/**
* 선택된 레이어를 정해진 step만큼 이동시키는 함수
*@method _stack
*@param {Number}_index 레이어 인덱스 번호
*@param {Number} _step[:=decrease,increase]+1,-1,...
*@access private
*/
xwzGadgetry.prototype._stack=function(_index,_step){ var s=this.getIndex(_index),d=s+_step,dist=0,oNodtmp=this.Nodes[s]; d=d<0?this.Nodes.length-1:d>this.Nodes.length-1?0:d; if(d==this.Nodes.length-1&&s==0){/*prev*/ oNodtmp=this.Nodes.shift();this.Nodes.push(oNodtmp); }else if(d==0&&s==this.Nodes.length-1){/*next*/ oNodtmp=this.Nodes.pop();this.Nodes.unshift(oNodtmp); }else{ this.Nodes[s]=this.Nodes[d];this.Nodes[d]=oNodtmp; }; this._swapDepart(); };
/**
* 선택된 레이어를 정해진 Y,X 축으로 step만큼 이동시키는 함수
*@method _cross
*@param {Number} _index 레이어 인덱스 번호
*@param {String} _arrow[:=left,right,up,down] 이동 방향
*@access private
*/
xwzGadgetry.prototype._cross=function(_index,_arrow){ _arrow=(_arrow).toString().toLowerCase()||(this.nCells>0?'up':'left'); var s=this.getIndex(_index),d=s; var iX=Math.floor(s%this.nCells),iY=Math.floor(s/this.nCells),mX=Math.floor(this.Nodes.length-1%this.nCells),mY=Math.floor(this.Nodes.length-1/this.nCells); if(_arrow=='up')iY=iY>0?iY-1:iY; else if(_arrow=='down')iY=iY<mY?iY+1:iY; else if(_arrow=='left')iX=iX>0?iX-1:iX; else if(_arrow=='right')iX=iX<mX?iX+1:iX; d=(iY*this.nCells)+iX; if(d==s||d<0||d>this.Nodes.length-1)return false; var oNodtmp=this.Nodes[s]; this.Nodes[s]=this.Nodes[d]; this.Nodes[d]=oNodtmp; this._swapDepart(); };
/**
* Frame 객체의 너비와 높이 설정 함수
*@method _molding
*@see #_grid()
*@acess private
*/
xwzGadgetry.prototype._molding=function(){ this.talebearing=''; var d=this._grid(this.Nodes,this.nCells),nX=Math.floor(this.nDistance/2),nY=Math.floor(this.nDistance/2); for(var i=0,len=d.horizontal.length;i<len;i++){nX+=d.horizontal[i]+this.nDistance;}; for(var i=0,len=d.vertical.length;i<len;i++){nY+=d.vertical[i]+this.nDistance;} this.Gadgetry.style.width=nX+'px'; this.Gadgetry.style.height=nY+'px'; this._showGrips();this.saveSequel(); };
/**
* 각 레이어의 너비와 높이값을 배열화
*@method _grid
*@param {Object} Nodes 레이어 배열
*@param {Number} nColumns column 수
*@return {Object}
*@acess private
*/
xwzGadgetry.prototype._grid=function(Nodes,nColumns){ var iX=0,iY=0,nX=0,nY=0,h=[],v=[]; for(var i=0,len=Nodes.length;i<len;i++){ nX=parseInt(Nodes[i].style.width); nY=parseInt(Nodes[i].style.height); iX=Math.floor(i%nColumns);iY=Math.floor(i/nColumns); v[iY]=(v[iY]||0)>nY?v[iY]:nY;h[iX]=(h[iX]||0)>nX?h[iX]:nX; }; return{vertical:v,horizontal:h}; };
/**
* 레이어들에 대한 x,y, width, height 값 배열화 함수
*@method _mapping
*@see #_grid()
*@param {Object} Nodes 레이어 배열
*@param {Number} nColumns column 수
*@return {Array} Array(x, y, width, height )
*@acess private
*/
xwzGadgetry.prototype._mapping=function(Nodes,nColumns,Distance){ /*grid->_mapping->_molding*/ var iX=0,iY=0,nX=Math.abs(Distance/2),nY=Math.abs(Distance/2),Map=[],d=this._grid(Nodes,nColumns); for(var i=0,len=Nodes.length;i<len;i++){ iX=Math.floor(i%nColumns);iY=Math.floor(i/nColumns); if(iX==0){ nX=Math.abs(Distance/2);if(iY>0)nY+=(d.vertical[iY-1]+Distance);}; Map[i]={X:nX,Y:nY,cX:parseInt(Nodes[i].style.width),cY:parseInt(Nodes[i].style.height)}; nX+=(d.horizontal[iX]+Distance); }; return Map; };
/**
*변경된 배열의 인덱스에 따라 각 레이어가 이동할 위치 계산
*@method _swapDepart
*@see #_swapAviate()
*@acess private
*/
xwzGadgetry.prototype._swapDepart=function(isDirectly){ /*이벤트 상태값*/ this.talebearing='position'; this.Queue=[]; var d=0,dX=0,dY=0,Rect=this._mapping(this.Nodes,this.nCells,this.nDistance); for(var i=0,len=this.Nodes.length;i<len;i++){ /*레이어 현재 위치와 이동할 위치 차이 계산*/ dX=Rect[i].X-parseInt(this.Nodes[i].style.left),dY=Rect[i].Y-parseInt(this.Nodes[i].style.top); d=len-1-i; this.Nodes[d].style.zIndex=(this.zIndex+len)-i; if(dX==0&&dY==0)continue; this.Atlas[i]=Rect[i]; /*각 속성값 배열화*/ this.Queue[this.Queue.length]={ style:this.Nodes[i].style, distX:dX,distY:dY, posX:parseInt(this.Nodes[i].style.left),posY:parseInt(this.Nodes[i].style.top), mvX:Rect[i].X,mvY:Rect[i].Y, scX:dX!=0?0:this.nStrata,scY:dY!=0?0:this.nStrata }; /*투명도 설정*/ notifyOpacity(this.Nodes[i],this.nOpacity); }; (this.isMotion==true||isDirectly==true)?this._swapAviate():this.compose(); };
/**
* 레이어를 이동할 위치로 점차 이동시키는 함수
*@method _swapAviate
*@acess private 거리계산
*/
xwzGadgetry.prototype._swapAviate=function(){ clearTimeout(this.resTime);this.resTime=null; var o=null,Q=[]; var dY=0,dX=0; for(var i=0,len=this.Queue.length;i<len;i++){ o=this.Queue[i];/*이동 객체*/ if(o.scX<this.nStrata){/*x축 이동*/ dX=Math.round(Math.sin(o.scX/this.nStrata*Math.PI/2)*o.distX); o.style.left=(o.posX+dX)+'px'; o.scX++; } if(o.scY<this.nStrata){/*y축 이동*/ dY=Math.round(Math.sin(o.scY/this.nStrata*Math.PI/2)*o.distY); o.style.top=(o.posY+dY)+'px'; o.scY++; } /*이동완료*/ if(o.scX>=this.nStrata&&o.scY>=this.nStrata){ notifyOpacity(o);o.style.left=(o.mvX)+'px';o.style.top=(o.mvY)+'px'; }else{/*재 배열화*/ Q[Q.length]=o; } }; if(Q.length==0){ this.Queue=[];this._molding(); return false; } this.Queue=Q; this.resTime=setTimeout(this._swapAviate.bindAsObject(this),0); };
/**
* 마우스로 위치를 변경할 경우 입력된 객체의 위치를 마우스 포인터가 위치한 자리로 이동시킴
*@method _dragArrange
*@see #__dragAviate()
*@see #__dragArrival()
*@param {Object} element 대상 객체
*@return {Object} 이동 객체와 각 인덱스에 따른 레이어 위치 값
*@acess private
*/
xwzGadgetry.prototype._dragArrange=function(element){ var Queue=[],Rect=[]; /*마우스 이동 객체를 제외하고 재배열화*/ for(var i=0,len=this.Queue.length;i<len;i++){ if(i!=this._trace.nSource)Queue[Queue.length]=this.Queue[i]; }; /*대상객체와 객체가 이동할 위치에 있는 객체의 인덱스를 바꿔치기*/ Queue[Queue.length]=null; for(var i=Queue.length-1;i>this._trace.nTarget;i--)Queue[i]=Queue[i-1]; Queue[this._trace.nTarget]=this.Queue[this._trace.nSource]; /*레이어들에 대한 x,y,width,height 값 배열화*/ Rect=this._mapping(Queue,this.nCells,this.nDistance); for(var i=0,len=this.Queue.length;i<len;i++){ if(i!=this._trace.nTarget){ Queue[i].style.left=Rect[i].X+'px';Queue[i].style.top=Rect[i].Y+'px';Queue[i].style.zIndex=this.zIndex+i; }else if(element!=null){/*대상객체 위치 이동*/ element.style.left=Rect[i].X;element.style.top=Rect[i].Y;element.style.zIndex=this.zIndex+i; } }; return{Nodes:Queue,Rect:Rect}; };
/**
* drag&drop(마우스 이동)에 따른 처리함수
*@method _dragAviate
*@param {Object} event 이벤트 핸들러
*@acess private
*/
xwzGadgetry.prototype._dragAviate=function(event,node){ /*드래그앤드랍 대상이 없거나,왼쪽 마우스버튼을 누르지 않고 있는 경우 중단*/ if(node==null||event._left!==true){this._dragArrival(node);return false;} if(this.keelblocks.style.display!='block')this.keelblocks.style.display='block'; /*마우스 포인트 이동 값 측정*/ var dX=event._x-this._trace.dX,dY=event._y-this._trace.dY; /*마우스가 이동한 만큼 위치 이동*/ var x=parseInt(node.style.left)+dX,y=parseInt(node.style.top)+dY; node.style.left=x+'px';node.style.top=y+'px'; /*현재 마우스 포인터에 따른 전체 영역에서 위치 계산*/ var iY=Math.floor(this._trace.nSource/this.nCells),cY=Math.abs(this.Atlas[this._trace.nSource].Y-y); var iX=Math.floor(this._trace.nSource%this.nCells),cX=Math.abs(this.Atlas[this._trace.nSource].X-x); for(var i=0,len=this.Atlas.length;i<len;i+=this.nCells){if(cY>Math.abs(this.Atlas[i].Y-y)){cY=Math.abs(this.Atlas[i].Y-y);iY=Math.floor(i/this.nCells);}}; for(var i=0;i<this.nCells;i++){if(cX>Math.abs(this.Atlas[i].X-x)){cX=Math.abs(this.Atlas[i].X-x);iX=Math.floor(i%this.nCells);}}; this._trace.nTarget=(iY*this.nCells)+iX; this._trace.nTarget=(this._trace.nTarget>this.Queue.length-1)?this.Queue.length-1:this._trace.nTarget; /*클론 레이어 이동*/ this._dragArrange(this.keelblocks); /*현재 포인트 기록*/ this._trace.dX=event._x;this._trace.dY=event._y; };
/**
* drag&drop 완료에 따른 처리함수
*@method _dragArrival
*@acess private
*/
xwzGadgetry.prototype._dragArrival=function(node){ /*이벤트 해제*/ if(this.Observers['mouseup']!=null)freeEventObserve(window.document,'mouseup',this.Observers['mouseup']); if(this.Observers['mousemove']!=null)freeEventObserve(window.document,'mousemove',this.Observers['mousemove']); this.Observers['mouseup']=null;this.Observers['mousemove']=null; window.document.onselectstart=null;window.document.ondragstart = null; var oReturn=null,dX=dY=0; /**/ if(node!=null){ oReturn=this._dragArrange(); dX=this.Atlas[this._trace.nTarget].X-parseInt(node.style.left); dY=this.Atlas[this._trace.nTarget].Y-parseInt(node.style.top); this.Queue=[{style:node.style,distX:dX,distY:dY,posX:parseInt(node.style.left),posY:parseInt(node.style.top),mvX:this.Atlas[this._trace.nTarget].X,mvY:this.Atlas[this._trace.nTarget].Y,scX:0,scY:0}]; notifyOpacity(node,this.nOpacity); this.isMotion==true?this._swapAviate():this.compose(); this.Nodes=oReturn.Nodes; this.Atlas=oReturn.Rect; node.style.zIndex=this.keelblocks.style.zIndex; } this.keelblocks.style.zIndex=-1;this.keelblocks.style.display='none'; this._trace.dX=0;this._trace.dY=0;this._trace.nTarget=null;this._trace.nSource=null; this.Observers=[]; };
/**
* Slide, Bind 형태의 펼침 또는 숨김 모션 함수
*@method _expanding
*@param {Object} gadget 대상 영역을 감싸고 있는 객체
*@param {Number} n Count
*@acess private
*/
xwzGadgetry.prototype._expanding=function(node,dest,n){ var curr=parseInt(node.gadget.animate=='slide'?node.gadget.topgap:node.gadget.style.height);/*현재 속성*/ /*Time 인스턴스 제거*/ clearTimeout(this.resTime);this.resTime=null; if(dest-curr==0||n>node.gadget.strata){/*Count 완료*/ if(node.gadget.animate=='slide')node.gadget.topgap=dest+'px'; else node.gadget.style.height=dest+'px'; this._expanded(node); }else{/*ing*/ curr+=Math.round(Math.sin(n/node.gadget.strata*Math.PI/2)*(dest-curr)); if(node.gadget.animate=='slide'){/*slide인 경우 marginTop 속성을 변경,height으로 나머지 영역을 감춤*/ node.gadget.topgap=curr+'px'; node.gadget.style.height=(node.gadget.height+curr<=0?1:node.gadget.height+curr)+'px'; }else{/*slide가 아닌 경우 blind 로 처리하고 높이만 조정함*/ node.gadget.style.height=(curr<=0?1:curr)+'px'; } /*대상 가젯의 높이 재 조정*/ node.style.height=(node.pixHeight-node.gadget.height)+parseInt(node.gadget.style.height)+'px'; this.resTime=setTimeout(this._expanding.bindAsObject(this,node,dest,++n),1); } };
/**
* 펼침 또는 닫힘 완료 함수
*@method _expanded
*@acess private
*/
xwzGadgetry.prototype._expanded=function(node){ if(node.gadget.state=='expand'){/*펼침 상태에서 완료된 경우*/ node.gadget.style.visibility='hidden';/*가젯을 숨김*/ node.gadget.state='collapse';/*상태값 변경*/ node.gadget.style.height='1px'; node.style.height=(node.pixHeight-node.gadget.height)+'px'; node.gadget.onMinimized(); }else if(node.gadget.state=='collapse'){/*닫힘상태에서 완료된 경우*/ node.gadget.style.visibility='visible';/*가젯 보임*/ node.gadget.state='expand';/*상태값 변경*/ node.gadget.style.height=node.gadget.height+'px'; node.style.height=node.pixHeight+'px'; node.gadget.onMaximized(); } /*높이 변경에 따른 배열 위치 및 frame 높이 재 설정*/ this._swapDepart(); };
/**
* resize grip view 상태 변경 함수
*@method _showGrips
*@param {bool} bValue [true, false]
*@acess private
*/
xwzGadgetry.prototype._showGrips=function(bValue){for(var nm in this.grips)this.grips[nm].style.visibility=bValue==true?'visible':'hidden'; this.sizeinfo.style.visibility=bValue==true?'visible':'hidden';};
/**
* resize grip/ border div 위치 설정 함수
*@method _showGrips
*@param {int} x x좌표값
*@param {int} y y좌표값
*@param {int} w 너비
*@param {int} h 높이
*@acess private
*/
xwzGadgetry.prototype._resizeArrange=function(src){ var g=parseInt(this.grip.size); var x=parseInt(src.offsetLeft||src.style.left)+1,y=parseInt(src.offsetTop||src.style.top)+1; var w=parseInt(src.offsetWidth||src.style.width)-1,h=parseInt(src.offsetHeight||src.style.height)-1; /*각 grip 위치 설정*/ for(var nm in this.grips){ if(nm.charAt(0)=='l') this.grips[nm].style.left=x+'px'; else if(nm.charAt(0)=='c') this.grips[nm].style.left=(x+(w/2-g/2))+'px'; else if(nm.charAt(0)=='r') this.grips[nm].style.left=((x+w)-g)+'px'; if(nm.charAt(1)=='t') this.grips[nm].style.top=y+'px'; else if(nm.charAt(1)=='m') this.grips[nm].style.top=(y+(h/2-g/2))+'px'; else if(nm.charAt(1)=='b') this.grips[nm].style.top=((y+h)-g)+'px'; this.grips[nm].style.visibility='visible'; }; };
/**
* resize grip view 상태 변경 함수
*@method _resizeDepart
*@param {event object} event 마우스 이벤트
*@acess private
*/
xwzGadgetry.prototype._resizeDepart=function(event,node){ window.focus(); var node=this.Nodes[this._trace.nSource]; if(node==null||event._left!==true){this._resizeArrival();return false;} this.keelblocks.style.display='block'; /*레이어가 이동할 동안 레이어가 위치할 자리에 대신 위치할 객체 이동*/ this.keelblocks.style.left=node.style.left; this.keelblocks.style.top=node.style.top; this.keelblocks.style.width=node.style.width; this.keelblocks.style.height=node.style.height; /*z-index save*/ var z=node.style.zIndex; this.keelblocks.style.zIndex=this.zIndex+(this.Nodes.length*500); this._trace.dX=event._x;this._trace.dY=event._y; /*이벤트 등록 */ this.Observers['mousemove']=this._resizeAviate.bindAsEvent(this,node,event.element.nm); this.Observers['mouseup']=this._resizeArrival.bindAsObject(this,node,event.element.nm); addEventObserve(window.document,'mouseup',this.Observers['mouseup']); addEventObserve(window.document,'mousemove',this.Observers['mousemove']); window.document.onselectstart=new Function('return false'); window.document.ondragstart = new Function ("return false"); this.keelblocks.style.cursor=event.element.style.cursor; };
/**
* resizing 함수
*@method _resizeAviate
*@param {event object} event 마우스 이벤트
*@acess private
*/
xwzGadgetry.prototype._resizeAviate=function(event,node,nm){ /*드래그앤드랍 대상이 없거나,왼쪽 마우스버튼을 누르지 않고 있는 경우 중단*/ if(node==null||event._left!==true){this._dragArrival(node);return false;} /*마우스 포인트 이동 값 측정*/ var dx =event._x-this._trace.dX,dy=event._y-this._trace.dY,m1=0,m2=0,d=0,g=0; var fX=nm.charAt(0),fY=nm.charAt(1); var l=parseInt(this.keelblocks.style.left),t=parseInt(this.keelblocks.style.top),w=parseInt(this.keelblocks.style.width),h=parseInt(this.keelblocks.style.height); /*left, width 설정*/ if(fX!='c'){ m1=parseInt(this.grip.minWidth||this.grip.size*3);m2=parseInt(this.grip.maxWidth||w*2); d=w+(fX=='l'?(dx*-1):dx);/*left 이동에 처리*/ if(d>m1&&d<m2){if(l+dx>0&&fX=='l'){this.keelblocks.style.left=(l+dx)+'px';w=d;}else if(fX!='l'){w=d;}} this.keelblocks.style.width=w+'px'; } /*top, height 설정*/ if(fY!='m'){ m1=parseInt(this.grip.minHeight||this.grip.size*3);m2=parseInt(this.grip.maxHeight||h*2); d=h+(fY=='t'?(dy*-1):dy);/*top 이동에 처리*/ if(d>m1&&d<m2){if(t+dy>0&&fY=='t'){this.keelblocks.style.top=(t+dy)+'px';h=d;}else if(fY!='t'){h=d;}} this.keelblocks.style.height=h+'px'; } /*각 grip 위치 설정*/ this._resizeArrange(this.keelblocks); this.sizeinfo.innerText=parseInt(this.keelblocks.style.width)+'x'+parseInt(this.keelblocks.style.height); this.sizeinfo.style.left=(parseInt(this.grips.rb.style.left)-(this.sizeinfo.offsetWidth)+2)+'px';this.sizeinfo.style.top=(parseInt(this.grips.rb.style.top)-(this.sizeinfo.offsetHeight)+2)+'px'; /*현재 포인트 기록*/ this._trace.dX=event._x;this._trace.dY=event._y; };
/**
* resize 완료함수
*@method _resizeArrival
*@param {event object} event 마우스 이벤트
*@acess private
*/
xwzGadgetry.prototype._resizeArrival=function(node){ /*이벤트 해제*/ if(this.Observers['mouseup']!=null)freeEventObserve(window.document,'mouseup',this.Observers['mouseup']); if(this.Observers['mousemove']!=null)freeEventObserve(window.document,'mousemove',this.Observers['mousemove']); this.Observers['mouseup']=null;this.Observers['mousemove']=null; window.document.onselectstart=null;window.document.ondragstart = null; this._showGrips(); /*크기 재 설정*/ if(node!=null){ node.style.width=this.keelblocks.style.width;node.style.height=this.keelblocks.style.height;this._swapDepart();} this.keelblocks.style.cursor='auto';this.keelblocks.style.display='none'; this.sizeinfo.innerText=''; if(node.pixWidth!=null)node.pixWidth=parseInt(node.style.width);if(node.pixHeight!=null)node.pixHeight=parseInt(node.style.height);};</xmp>
</div>
<div style="text-align:center">
<div style="width:950px;margin:0px auto;margin-top:10px">
PHP 스쿨에 올린 자료 대충 메뉴로 묶었습니다 -_-; 여기에 소스는 사람이면 누구나 사용이 가능하며 배포하실 수 있습니다. 소스 수정은 들키지만 않으면 수정 가능합니다.<br>
<dl style="border:#CACACA 1px solid;height:40px;background-color:#F2F2F2;">
<dd style="margin:10px 4px 1px 4px;"><a href="/example/dtp2.html">달력-IE 전용</a></dd>
<dd style="margin:10px 4px 1px 4px;">|</dd>
<dd style="margin:10px 4px 1px 4px;"><a href="/example/roll.htm">레이어효과 1</a></dd>
<dd style="margin:10px 4px 1px 4px;">|</dd>
<dd style="margin:10px 4px 1px 4px;"><a href="/example/ajax.control.php">Multi Ajax Control </a></dd>
<dd style="margin:10px 4px 1px 4px;">|</dd>
<dd style="margin:10px 4px 1px 4px;"><a href="/example/gadgetry.html">Gadgetry-move, drag & drop</a></dd>
<dd style="margin:10px 4px 1px 4px;">|</dd>
<dd style="margin:10px 4px 1px 4px;"><a href="/example/scaledrop.html">drag & drop, resize</a></dd>
<dd style="margin:10px 4px 1px 4px;">|</dd>
<dd style="margin:10px 4px 1px 4px;"><a href="/example/vroll.html">Vertical Rolling</a></dd>
<dd style="margin:10px 4px 1px 4px;">|</dd>
<dd style="margin:10px 4px 1px 4px;"><a href="/example/verticalstrip.html">Vertical Strip</a></dd>
</dl>
<div style="margin:4px 10px 1px 4px;">
<div style="float:left"><a href="http://www.myhangeul.com/myad/?disp=2" target='_blank'><img src="http://myhangeul.com/myad/ucif/b/spolite_b6c1b594da5fe3c56a99b2fae9adaf75_BA.gif" width="367" height="32" border="0"></a></div>
<div style="float:right"><font color=#000000>Copyright(c) 2004. <strong>X-<font color="#FF6600">w<font color=#007bff>i</font>z</font><font color=#636363>.com</strong></font> All rights reserved.</font></div>
</div>
</div>
</div>
</body>
</html>
'인터넷정보' 카테고리의 다른 글
| 이미지 슬라이드쇼 (0) | 2007.10.13 |
|---|---|
| 폼에대한 142가지의 다양한 js 소스 (0) | 2007.10.13 |
| 실시간검색어 예제 - 다음(daum) 스타일 (0) | 2007.10.13 |
| 자바스크립트로 구현한 md4,md5,sha-1 (0) | 2007.10.13 |
| 프레임 경계선을 넘나드는 createPopup() (0) | 2007.10.13 |
| 피부 미남 만들기 - "면도만 잘해도 완소남" (0) | 2007.10.13 |
| 자바스크립트 에러 상태창에 표시 (0) | 2007.10.13 |
| 글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2007.10.13 |
| 라운드, 라운드박스, 테이블 둥글게 (0) | 2007.10.13 |
| array_map을 활용한 배열 통째로 stripslashes (0) | 2007.10.13 |
피부 미남 만들기 - "면도만 잘해도 완소남"
|
피부 미남 만들기-"면도만 잘해도 완·소·남" |
|
해사한 피부는 더이상 여성만의 미덕이 아니다. 남성에게도 빼놓을 수 없는 경쟁력이 됐다.‘얼짱'‘장난 아닌 피부’는 아예 트렌드로 자리잡은 지 오래다. 하지만 정작 피부관리의 기초조차 모르는 남성이 허다하다. 스타일U가‘피부 미남 만들기’시리즈를 3회에 걸쳐 싣는다. 통계적으로 남성은 일생동안 약 5개월을 면도하는데 쓴다고 한다. 그럼에도 불구하고 대부분 면도 전후의 피부관리에는 별로 신경을 쓰지 않는다. 그러는 사이 턱 피부는 서서히 망가지고 있다. 3단계 관리법을 알아보자. I 1단계 I 면도 전 깔끔하게 면도하려면 각질제거가 필수다. 크리니크의 데이비드 오렌트리히 박사는“각질제거제품은 수염을 부드럽게 해준다. 결국 수염이 안으로 파고 들면서 자라지 않고 두드러져 보이게 된다. 안으로 파고 드는 턱수염을 가진 남성들은 특히 이러한 방법으로 관리하는 것이 중요하다”고 말했다. 아침에 면도할 경우 각질제거는 취침 전에 해둔다. 각질제거 후 바로 칼을 대면 피부가 지나치게 자극을 받기 때문이다. 면도는 샤워나 세안 직후 하는 것이 가장 이상적이다. 드림피부과의 박경호 원장은 “세안 직후에는 모공이 열리고 털들도 수분을 함유해 피부 자극을 최소화할 수 있다. 또 세안 후에는 피부가 청결해 세균감염 등의 부작용 우려도 적다” 고 조언했다. 그러나 샤워용 비누로 세안하는 것은 피해야 한다. 이는 피부를 건조하게 만들며 면도시 종종 염증을 일으키곤 한다. 반드시 얼굴 전용 클렌저를 사용하자. I 2단계 I 면도 셰이빙 크림ㆍ젤ㆍ폼, 또는 오일이 반드시 필요하다. 이 가운데 자신에게 맞는 것을 선택한다. 셰이빙 젤은 면도 시 피부 마찰을 가장 탁월하게 줄여 준다. 물리적인 피부자극에 약한 이들에게 권한다. 또한 털이 나는 방향이 불규칙할 때 정리하기 좋다. 피부를 매끄럽고 탄력 있게 하려면 셰이빙 크림이나 젤을 수염이 자란 방향과 반대로 발라주는 것이 좋다. 거품이나 크림이 지나치면 면도기의 움직임을 방해해 피부에 상처나 자극을 줄 수 있다. 구레나룻ㆍ볼ㆍ목 순으로 면도하는 것이 정석이다. 목 주변의 수염은 양쪽 방향으로 모두 자라므로 목 아래부터 턱 방향으로 한 차례 면도한 다음, 반대방향으로 한번 더 한다. 턱과 입술 부위는 마지막에 한다. 거친 수염이 많으므로 부드러워질 때까지 기다려야 하기 때문이다. 수염이 빨리 자라면 전기 면도기로 일과 후 꾸준히 면도해 주는 것도 좋다. 날 면도기에 비해 깔끔하진 않지만 자극이 적고 베일 염려가 없다. 3주정도의 적응 기간이 필요하며, 이 때는 날 면도기 사용을 금한다. I 3단계 I 면도 후 자극 받은 피부를 진정시키고 모공을 조여준다. 수분공급이 필수다. 수분이 부족하면 모공이 늘어지고 유분이 많이 배출돼 피부 트러블의 원인이 된다. 독하다는 이유로 애프터 셰이빙제품의 사용을 꺼리는 이들도 있다. 이럴 땐 여성용보다는 유니섹스 컨셉트의 화장품을 사용해보자. 식물성이면서 남성들이 사용하기에도 부담 없는 향을 가지고 있는 것이 특징이다. Tip 먼저 따뜻한 물로 세안한다. 피부가 팽창해 모공이 열리면서 노폐물이 빠져나온다. 찬물로 헹궈 마무리한다. 면도 직전 찬물로 얼굴을 헹구면 피부가 긴장해 털이 바로 선다. 이때 면도하면 깔끔하게 수염이 제거된다. POINT '면도 트러블' 이렇게 대처하자 # 화끈거림 알코올 성분이 함유된 애프터 셰이브 제품은 자극을 줄 수 있다. 무알콜의 진정기능이 있는 제품을 사용한다. 가능하면 피부가 스스로 회복될 때까지 면도를 피한다. # 베임 흐르는 물에 상처를 씻어 주고 깨끗한 티슈로 상처 부위를 꾹 눌러 지혈한다. 깊이 베인 경우 반드시 상처전용연고를 발라준다. 연고 위에 밴드를 덧붙이지 않는다. 피부가 연고에 의해 불어 짓무를 수 있기 때문이다. 깊이 베이지는 않았지만 넓은 부위에는 연고보다 종이반창고가 효과적이다. 피를 흡수하면서 상처를 외부 노출로부터 보호하는데 탁월하다. 종이반창고에 흡수된 피가 마른 후 제거해 주면 딱지가 생기지 않으면서 깔끔하게 지혈된다. # 발진 면도용 화장품에 함유된 성분이 본인에게 맞지 않는 경우다. 무향ㆍ무알콜ㆍ천연 성분의 제품으로 교체한다. # 면도 염증 수염이 피부 속으로 자라는 경우다. 벌겋게 부어 오르다가 쌀알만한 고름집이 생긴다. 레이저를 이용해 영구적으로 털을 없애는 것이 가장 좋다. 여의치 않으면 너무 짧지 않게 면도하거나 수염을 뽑는 방법으로 유지한다. |
)
'인터넷정보' 카테고리의 다른 글
| 폼에대한 142가지의 다양한 js 소스 (0) | 2007.10.13 |
|---|---|
| 실시간검색어 예제 - 다음(daum) 스타일 (0) | 2007.10.13 |
| 자바스크립트로 구현한 md4,md5,sha-1 (0) | 2007.10.13 |
| 프레임 경계선을 넘나드는 createPopup() (0) | 2007.10.13 |
| 지정된 영역에서 각 레이어 간의 이동 효과(구글,야후) (0) | 2007.10.13 |
| 자바스크립트 에러 상태창에 표시 (0) | 2007.10.13 |
| 글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2007.10.13 |
| 라운드, 라운드박스, 테이블 둥글게 (0) | 2007.10.13 |
| array_map을 활용한 배열 통째로 stripslashes (0) | 2007.10.13 |
| 내 USB를 컴퓨터로 만들어주는 포터블 프로그램 (0) | 2007.10.13 |
자바스크립트 에러 상태창에 표시
사용하시는 자바스크립트 마지막에 아래코드를 넣어 사용하시면 됩니다.
window.onerror = HandleError;
function HandleError(message, url, line) {
var str = "An error has occurred in this dialog." + ""
+ "Error: " + line + "" + message;
window.status = str;
return true;
} // Error 발생시 수행
'인터넷정보' 카테고리의 다른 글
| 실시간검색어 예제 - 다음(daum) 스타일 (0) | 2007.10.13 |
|---|---|
| 자바스크립트로 구현한 md4,md5,sha-1 (0) | 2007.10.13 |
| 프레임 경계선을 넘나드는 createPopup() (0) | 2007.10.13 |
| 지정된 영역에서 각 레이어 간의 이동 효과(구글,야후) (0) | 2007.10.13 |
| 피부 미남 만들기 - "면도만 잘해도 완소남" (0) | 2007.10.13 |
| 글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2007.10.13 |
| 라운드, 라운드박스, 테이블 둥글게 (0) | 2007.10.13 |
| array_map을 활용한 배열 통째로 stripslashes (0) | 2007.10.13 |
| 내 USB를 컴퓨터로 만들어주는 포터블 프로그램 (0) | 2007.10.13 |
| 개인용 무료 PDF 변환 솔루션 (0) | 2007.10.13 |
글씨의 색을 자동으로 변환시켜주는 함수
미리보기 : http://oxtag.com/html/ex/linkColor.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.hym{
color:black;
font-weight:400;
margin:10px 0px 10px 0px;
cursor:help;
width:140px;
height:25px;
padding:3px;
border:1px solid red;
background-color:lightyellow;
}
</style>
<script language="javascript">
var colorArray = ["#cedfff","#b0acff","#ee311c","#8e60dd","#c875b5","#de8faf","#25dc8e","#61e274","#becb21","#dd7ce4"];
var display;
var colorNum = 0;
function setColor(aObj){
temp = 'setInterval(function(){ showColor(aObj); },60)';
display = eval!(temp);
}
function showColor(aObj){
colorNum = colorNum == colorArray.length -1 ? 0:colorNum+=1;
aObj.style.color=colorArray[colorNum];
aObj.style.fontWeight = 700;
}
function BreakColor(aObj){
clearInterval(display);
aObj.style.fontWeight = 400;
aObj.style.color="black";
}
</script>
</head>
<body>
<div class="hym" onMouseover="setColor(this);" onMouseout="BreakColor(this);">Change Color..</div>
<div class="hym" onMouseover="setColor(this);" onMouseout="BreakColor(this);">Style Color...</div>
<div class="hym" onMouseover="setColor(this);" onMouseout="BreakColor(this);">Bye Bye Bye...</div>
</body>
</html>
'인터넷정보' 카테고리의 다른 글
| 자바스크립트로 구현한 md4,md5,sha-1 (0) | 2007.10.13 |
|---|---|
| 프레임 경계선을 넘나드는 createPopup() (0) | 2007.10.13 |
| 지정된 영역에서 각 레이어 간의 이동 효과(구글,야후) (0) | 2007.10.13 |
| 피부 미남 만들기 - "면도만 잘해도 완소남" (0) | 2007.10.13 |
| 자바스크립트 에러 상태창에 표시 (0) | 2007.10.13 |
| 라운드, 라운드박스, 테이블 둥글게 (0) | 2007.10.13 |
| array_map을 활용한 배열 통째로 stripslashes (0) | 2007.10.13 |
| 내 USB를 컴퓨터로 만들어주는 포터블 프로그램 (0) | 2007.10.13 |
| 개인용 무료 PDF 변환 솔루션 (0) | 2007.10.13 |
| HTML 하드코더 (0) | 2007.10.13 |
라운드, 라운드박스, 테이블 둥글게
미리보기 : http://oxtag.com/html/ex/roundBorderBox.html
<html>
<head>
<title>라운드 박스셋</title>
<script type="text/JavaScript" language="JavaScript">
function jjArrayMap(arr) {
var Str = "array(\n";
for(var key in arr) {
Str += "["+key+"] => "+arr[key]+"\n";
}
return Str
}
function jjCircleInit(ratio,border,rtnArr)
{
var x, y, thres;
if( ratio == 0 ) return [0,0];
if(!rtnArr) {
var i,j;
rtnArr = [];
for(i=0,j=(ratio+border-2); i<=j; i++) {
rtnArr[i] = [1000,0];
}
}
y = ratio -1;
thres = -3 - (ratio + ratio);
for(x=0; x < y; x++) {
if( thres < 0 ) thres += 6 + (x << 2);
else {
thres += 10 + ((x - y) << 2);
y--;
}
rtnArr = jjCircleBorder(rtnArr, x, ratio + border - y - 2);
rtnArr = jjCircleBorder(rtnArr, y, ratio + border - x - 2);
}
border--;
if(border > 0) rtnArr = jjCircleInit(ratio+1,border,rtnArr);
return rtnArr;
}
function jjCircleBorder(rtnArr, x, y)
{
if(!rtnArr[y]) rtnArr[y] = [100, 0];
if(rtnArr[y][0] > x) rtnArr[y][0] = x;
if(rtnArr[y][1] < x) rtnArr[y][1] = x;
return rtnArr;
}
function jjRoundBoxInit(Obj, objRound, objBorder, objBorderColor, objFill)
{
objRound = parseInt(objRound);
objBorder = parseInt(objBorder);
var margin = jjCircleInit(objRound,objBorder);
var piece;
var topSet = document.createElement('DIV');
for(var key in margin) {
piece = document.createElement('DIV');
var marginLeft = objRound + objBorder - margin[key][1] -2;
piece.style.margin = '0px '+ marginLeft +'px';
var borderWidth = margin[key][1] - margin[key][0] +1;
piece.style.borderLeft = borderWidth +'px solid';
piece.style.borderRight = borderWidth +'px solid';
piece.style.borderColor = objBorderColor;
piece.style.backgroundColor = (margin[key][0] == 0 ? objBorderColor : objFill);
piece.style.height = '1px';
piece.style.overflow = 'hidden';
topSet.appendChild(piece);
}
var botSet = document.createElement('DIV');
for(var i=topSet.childNodes.length - 1; i>=0; i--) {
botSet.appendChild(topSet.childNodes[i].cloneNode(true));
}
var content = document.createElement('DIV');
content.style.borderLeft = objBorderColor +' '+ borderWidth +'px solid';
content.style.borderRight = objBorderColor +' '+ borderWidth +'px solid';
content.style.backgroundColor = objFill;
content.style.padding = '0px '+objRound+'px';
content.innerHTML = Obj.innerHTML;
Obj.innerHTML = ''
Obj.appendChild(topSet);
Obj.appendChild(content);
Obj.appendChild(botSet);
}
</script>
</head>
<body style="font-size:9pt;font-family:'맑은 고딕',Dotum,돋움;">
라운드 박스셋 모음<BR />
<BR />
Sample 1
<div id=r10b1ffff>
jjRoundBoxInit(document.getElementById('r10b1ffff'), 10, 1, '#e88', '#eee');//Object, round, border, fill
</div>
<script type="text/JavaScript" language="JavaScript">
jjRoundBoxInit(document.getElementById('r10b1ffff'), 10, 1, '#e88', '#eee');//Object, round, border, fill
</script>
<BR /><BR />
Sample 2
<div id=r10b10ffff>
jjRoundBoxInit(document.getElementById('r10b10ffff'), 10, 10,'#e88', '#eee');//Object, round, border, fill
</div>
<script type="text/JavaScript" language="JavaScript">
jjRoundBoxInit(document.getElementById('r10b10ffff'), 10, 10,'#e88', '#eee');//Object, round, border, fill
</script>
<BR /><BR />
Sample 3
<div id=r5b10ffff>
jjRoundBoxInit(document.getElementById('r5b10ffff'), 5, 10,'#e88', '#eee');//Object, round, border, fill
</div>
<script type="text/JavaScript" language="JavaScript">
jjRoundBoxInit(document.getElementById('r5b10ffff'), 5, 10,'#e88', '#eee');//Object, round, border, fill
</script>
<BR /><BR />
Sample 4
<div id=r20b10ffff>
jjRoundBoxInit(document.getElementById('r20b10ffff'), 20, 10,'#e88', '#eee');//Object, round, border, fill
</div>
<script type="text/JavaScript" language="JavaScript">
jjRoundBoxInit(document.getElementById('r20b10ffff'), 20, 10,'#e88', '#eee');//Object, round, border, fill
</script>
<BR /><BR />
Sample 5
<div id=r20b20ffff>
jjRoundBoxInit(document.getElementById('r20b20ffff'), 20, 20,'#e88', '#eee');//Object, round, border, fill
</div>
<script type="text/JavaScript" language="JavaScript">
jjRoundBoxInit(document.getElementById('r20b20ffff'), 20, 20,'#e88', '#eee');//Object, round, border, fill
</script>
호의 휘어짐정도를 1 ~ 100 까지 더 늘릴수도 있음
테두리선의 굵기를 내맘대로 1~100까지 더 늘릴수도 있음
둘다 100x100으로 테스트하니 3초정도 걸리네요...
곡선 구하는 방법은 브렌헴(?) 알고리즘을 사용했습니다.
사용방법은 jjRoundBoxInit(적용할 오브젝트, 각도, 굵기, "테두리색상", "채울 색상");
신의손은 멋있다.
</body>
</html>
'인터넷정보' 카테고리의 다른 글
| 프레임 경계선을 넘나드는 createPopup() (0) | 2007.10.13 |
|---|---|
| 지정된 영역에서 각 레이어 간의 이동 효과(구글,야후) (0) | 2007.10.13 |
| 피부 미남 만들기 - "면도만 잘해도 완소남" (0) | 2007.10.13 |
| 자바스크립트 에러 상태창에 표시 (0) | 2007.10.13 |
| 글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2007.10.13 |
| array_map을 활용한 배열 통째로 stripslashes (0) | 2007.10.13 |
| 내 USB를 컴퓨터로 만들어주는 포터블 프로그램 (0) | 2007.10.13 |
| 개인용 무료 PDF 변환 솔루션 (0) | 2007.10.13 |
| HTML 하드코더 (0) | 2007.10.13 |
| cut - 문자열 자르기 (0) | 2007.10.13 |
array_map을 활용한 배열 통째로 stripslashes
if(is_array($buff))
return array_map('stripslashes',$buff);
else
return stripslashes($buff);
}
[예제]
$data = Array();
$data['f1'] = "\\\"이효리\\\"";
$data['f2'] = "\\\"성유리\\\"";
$data['f3'] = "\\\"이진\\\"";
$data['f4'] = "\\\"옥주현\\\"";
echo "<xmp>";
foreach($data as $k=>$v) {
echo "$k : $v\n";
}
echo "</xmp>";
$data = stripslashes_arr($data);
echo "<xmp>";
foreach($data as $k=>$v) {
echo "$k : $v\n";
}
echo "</xmp>";
[결과]
f1 : \"이효리\"
f2 : \"성유리\"
f3 : \"이진\"
f4 : \"옥주현\"
f1 : "이효리"
f2 : "성유리"
f3 : "이진"
f4 : "옥주현"
'인터넷정보' 카테고리의 다른 글
| 지정된 영역에서 각 레이어 간의 이동 효과(구글,야후) (0) | 2007.10.13 |
|---|---|
| 피부 미남 만들기 - "면도만 잘해도 완소남" (0) | 2007.10.13 |
| 자바스크립트 에러 상태창에 표시 (0) | 2007.10.13 |
| 글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2007.10.13 |
| 라운드, 라운드박스, 테이블 둥글게 (0) | 2007.10.13 |
| 내 USB를 컴퓨터로 만들어주는 포터블 프로그램 (0) | 2007.10.13 |
| 개인용 무료 PDF 변환 솔루션 (0) | 2007.10.13 |
| HTML 하드코더 (0) | 2007.10.13 |
| cut - 문자열 자르기 (0) | 2007.10.13 |
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2007.10.13 |
내 USB를 컴퓨터로 만들어주는 포터블 프로그램
다운로드 주소는 아래에 다시 링크 ..... ^^;
http://ftp6.ohpy.com/up/elbbs/2007/05/23/26350/1179907629/newproject.part01.rar
http://ftp6.ohpy.com/up/elbbs/2007/05/23/26350/1179907691/newproject.part02.rar
http://ftp6.ohpy.com/up/elbbs/2007/05/23/26350/1179907723/newproject.part03.rar
http://ftp6.ohpy.com/up/elbbs/2007/05/23/26350/1179907748/newproject.part04.rar
http://ftp6.ohpy.com/up/elbbs/2007/05/23/26350/1179907759/newproject.part05.rar
http://ftp6.ohpy.com/up/elbbs/2007/05/23/26350/1179907770/newproject.part06.rar
'인터넷정보' 카테고리의 다른 글
| 피부 미남 만들기 - "면도만 잘해도 완소남" (0) | 2007.10.13 |
|---|---|
| 자바스크립트 에러 상태창에 표시 (0) | 2007.10.13 |
| 글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2007.10.13 |
| 라운드, 라운드박스, 테이블 둥글게 (0) | 2007.10.13 |
| array_map을 활용한 배열 통째로 stripslashes (0) | 2007.10.13 |
| 개인용 무료 PDF 변환 솔루션 (0) | 2007.10.13 |
| HTML 하드코더 (0) | 2007.10.13 |
| cut - 문자열 자르기 (0) | 2007.10.13 |
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2007.10.13 |
| 잘못된 테이블 소스 보정 하기 (0) | 2007.10.13 |
개인용 무료 PDF 변환 솔루션
개인이 사용하는덴 무료라는군요.
죄송해요 써본적은 없어요. 그래도 필요하신분이 있을것 같아 올려봅니다.
|
'인터넷정보' 카테고리의 다른 글
| 자바스크립트 에러 상태창에 표시 (0) | 2007.10.13 |
|---|---|
| 글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2007.10.13 |
| 라운드, 라운드박스, 테이블 둥글게 (0) | 2007.10.13 |
| array_map을 활용한 배열 통째로 stripslashes (0) | 2007.10.13 |
| 내 USB를 컴퓨터로 만들어주는 포터블 프로그램 (0) | 2007.10.13 |
| HTML 하드코더 (0) | 2007.10.13 |
| cut - 문자열 자르기 (0) | 2007.10.13 |
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2007.10.13 |
| 잘못된 테이블 소스 보정 하기 (0) | 2007.10.13 |
| 이미지 크롭 (0) | 2007.10.13 |
디자이너에게서 받은 나모나 드림위버의 결과물을 보고 있노라면...
한숨부터 나오실 겁니다...
문제 되는 부분은 다음과 같은 경우겠죠...
...<tr><td><table ...
요런건 다음에 나올 테이블 태그가 뒤에 붙어 있어서 웬만해선 찾기가 쉽지 않습니다.
두번째 경우는 다음과 같은 경우 입니다.
<tr>
<td>
<table
<tr> ...
물론 이런 유형의 코드를 좋아 하시는 분들도 계실지 모르지만...
제 경우에는 이런 코드를 모조리 아래와 같이 바꾸어 작업에 들어 갑니다.
<table>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
아래 소스는 위와 같이 바꾸어 주는 소스 입니다.
그 외의 작업으로는 폼태그의 위치와 입력폼의 위치를 주석으로 표시해 주고...
table이나 form과 같은 태그를 대문자로 변환 할 수 있습니다.
^^필요하신 분들도 계실듯....
invalid-file'인터넷정보' 카테고리의 다른 글
| 글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2007.10.13 |
|---|---|
| 라운드, 라운드박스, 테이블 둥글게 (0) | 2007.10.13 |
| array_map을 활용한 배열 통째로 stripslashes (0) | 2007.10.13 |
| 내 USB를 컴퓨터로 만들어주는 포터블 프로그램 (0) | 2007.10.13 |
| 개인용 무료 PDF 변환 솔루션 (0) | 2007.10.13 |
| cut - 문자열 자르기 (0) | 2007.10.13 |
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2007.10.13 |
| 잘못된 테이블 소스 보정 하기 (0) | 2007.10.13 |
| 이미지 크롭 (0) | 2007.10.13 |
| CSS text-indent (0) | 2007.10.13 |
cut - 문자열 자르기
지정한 길이만큼 문자열을 자르고 결과를 리턴 합니다.
| /* 문자열 자르기 결과=cut(문자열,길이); */ function cut($str,$max) { $count = strlen($str); if($count >= $max) { for ($pos=$max;$pos>0 && ord($str[$pos-1])>=127;$pos--); if (($max-$pos)%2 == 0) $str = substr($str, 0, $max) . "..."; else $str = substr($str, 0, $max+1) . "..."; return $str; } else { $str = "$str"; return $str; } } |
다른거..
문자열 자르기 - 컷트
$data = "문자열 자르기 - 컷트문자열 자르기 - 컷트문자열 자르기 - 컷트문자열 자르기 - 컷트";
// 문자열 커트
function cutstr($str,$cut_size) {
if(!$cut_size or (strlen($str) <= $cut_size)) return $str;
else for($i = 0;$i < $cut_size;$i++) if(ord($str[$i]) > 127) $over++;
return chop(substr($str,0,$cut_size - $over%2))."..";
}
$cut_size = "28";
$data = cutstr($data, $cut_size); // 글자 자르기
다른거..
http://haco.tistory.com/entry/UTF-8-문자열-자르기
'인터넷정보' 카테고리의 다른 글
| 라운드, 라운드박스, 테이블 둥글게 (0) | 2007.10.13 |
|---|---|
| array_map을 활용한 배열 통째로 stripslashes (0) | 2007.10.13 |
| 내 USB를 컴퓨터로 만들어주는 포터블 프로그램 (0) | 2007.10.13 |
| 개인용 무료 PDF 변환 솔루션 (0) | 2007.10.13 |
| HTML 하드코더 (0) | 2007.10.13 |
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2007.10.13 |
| 잘못된 테이블 소스 보정 하기 (0) | 2007.10.13 |
| 이미지 크롭 (0) | 2007.10.13 |
| CSS text-indent (0) | 2007.10.13 |
| image mapping 프로그램, 이미지맵, 이미지매핑 (0) | 2007.10.13 |
TD에서 한글이 위로 치우치는 문제 해결 트릭
보통 한글을 테이블의 TD에 쓰면, 한글이 약간 위로 올라가서 민감하신 분들은 눈에 거슬릴 것입니다.
여기 Tip&Tech에도 보면 '번호', '분류', '제목'... 과 같은 문자가 테이블에서 조금씩 위로 올라거서 보이게 됩니다. 그리고 실제 테이블의 높이가 조금씩 작게 출력됩니다.
몇 년 전에 이부분이 왜 그럴까 생각하다가 아래와 같은 사실을 알게 되었는데, 혹 이런 부분에 대해서 눈에 거슬리는 분들은 아래와 같이 하여 해결해 보시기 바랍니다.
정확하게 테이블 중앙에 한글이 위치하며 테블 높이도 원래 크기대로 출력됩니다.
IE, Netscape, ... 모두 동일합니다.
트릭:
1. </font> 태그 뒤에 </td>를 넣지 않고, 다음줄에 넣습니다.
이전:
<td><font size=2>한글</font></td>
이후:
<td><font size=2>한글</font>
</td>
2. </font> 태그 바로 앞에 공백이 와야 할 경우는 공백을 로 대체하고 역시 마찬가지로 1번처럼 합니다.
이전:
<td><font size=2>한글 </font>
</td>
이후:
<td><font size=2>한글 </font>
<td>
3. CSS를 사용할 경우도 마찬가지로 입니다. 하지만, TD class=cssname 처럼하고 cssname에 폰트 관련 요소를 넣어다면 모두 빼고, FONT 관련 CSS만들어서 사용하고 역시 1, 2번 과정처럼 합니다.
ex.
<table border=1>
<tr><td><font size=2>한글</font></td></tr>
<tr><td><font size=2>한글</font> </td></tr>
</table>
'인터넷정보' 카테고리의 다른 글
| array_map을 활용한 배열 통째로 stripslashes (0) | 2007.10.13 |
|---|---|
| 내 USB를 컴퓨터로 만들어주는 포터블 프로그램 (0) | 2007.10.13 |
| 개인용 무료 PDF 변환 솔루션 (0) | 2007.10.13 |
| HTML 하드코더 (0) | 2007.10.13 |
| cut - 문자열 자르기 (0) | 2007.10.13 |
| 잘못된 테이블 소스 보정 하기 (0) | 2007.10.13 |
| 이미지 크롭 (0) | 2007.10.13 |
| CSS text-indent (0) | 2007.10.13 |
| image mapping 프로그램, 이미지맵, 이미지매핑 (0) | 2007.10.13 |
| 자바스크립트 라이브러리 목록 (0) | 2007.10.13 |
잘못된 테이블 소스 보정 하기
게시판 및 기타 프로그래밍에서...
잘못된 TABLE사용으로 인해 전체적인 레이아웃을 망가뜨리는 경우가 종종 있습니다...
예를 들면 아래와 같은 경우겠죠...
<table border=1 cellpadding=10>
<tr>
<td>
<table border=1 cellpadding=10>
<tr>
<td>A</td>
</td>
<td>B</td>
</tr>
</table>
위와 같은 소스는 가장 바깥의 테이블 모양을 완전히 다른 것으로 변형시켜 버리게 됩니다..
|
B |
우리가 얻고자 하는 테이블은 이런 모양이지만...
위의 소스대로라면 아래와 같이 해석되어 버립니다.
|
어떻게 하면 이런 문제점을 해결 할 수 있을까 하고...
PHP를 이용하여 보정 함수도 만들어 보고 했지만...
결국은 아래와 같은 간단한 방법으로 해결을 봤네요...
<body onload=setContents()>
<table border=1 cellpadding=10>
<tr>
<td>
<div id=contentsLayer>
</div>
</td>
<td>B</td>
</tr>
</table>
<script>
function setContents()
{
contentsLayer.innerHTML=sourceLayer.innerHTML
}
</script>
<div id=sourceLayer style=display:none>
<table border=1 cellpadding=10>
<tr>
<td>A</td>
</div>
contentsLayer는 잘못된 테이블 소스가 들어갈 공간입니다.
이곳에 들어갈 내용을 sourceLayer에 정의 해 놓고...
body가 로딩되면 setContents를 호출하여 sourceLayer의 잘못된 테이블 소스를 contentsLayer에 넣어 줍니다.
이때 반드시 sourceLayer는 문서의 가장 끝에 위치하여 다른 테이블에 영향을 주지 않도록 하거나...
히든프레임을 사용하여 처리해주는 것이 좋을 것 같네요...
재미있는점은 innerHTML을 사용하면서 잘못된 테이블 소스는 깔끔하게 다시 코딩 됩니다...
아래와 같이 말이죠...
<TABLE cellPadding=10 border=1>
<TBODY>
<TR>
<TD>A</TD>
<DIV></DIV></TR>
</TBODY>
</TABLE>
위의 방법대로라면 잘못된 테이블 소스가 좀더 복잡한 구성일 경우에도...
실질적으로 전체 레이아웃은 변형시키지 않는 것 같습니다.
지금까지의 소스를 바꾸어 생각해보면...
아래와 같은 폼으로 이용 될 수 있겠죠...
결국 글 입력시 이용되면 좀더 유연해지겠죠...
'인터넷정보' 카테고리의 다른 글
| 내 USB를 컴퓨터로 만들어주는 포터블 프로그램 (0) | 2007.10.13 |
|---|---|
| 개인용 무료 PDF 변환 솔루션 (0) | 2007.10.13 |
| HTML 하드코더 (0) | 2007.10.13 |
| cut - 문자열 자르기 (0) | 2007.10.13 |
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2007.10.13 |
| 이미지 크롭 (0) | 2007.10.13 |
| CSS text-indent (0) | 2007.10.13 |
| image mapping 프로그램, 이미지맵, 이미지매핑 (0) | 2007.10.13 |
| 자바스크립트 라이브러리 목록 (0) | 2007.10.13 |
| 이미지와 글씨 정렬 (0) | 2007.10.13 |
| /* 제작자이름 : 윤준식 제작자메일 : iamthetop@gmail.com 관련사이트 : http://bitdoll.com */ /// function Begin function GlistThumb($target,$saveIMG,$thumbX,$thumbY){ global $targetIMG,$sX,$sY,$srcW,$srcH; $targetIMG=getimagesize($target); if( $targetIMG[0]/$targetIMG[1] >= $thumbX/$thumbY ) $ratio = floor($targetIMG[1]/$thumbY); else $ratio = floor($targetIMG[0]/$thumbX); $sX = ( $targetIMG[0] - $ratio*$thumbX)/2; $sY = ( $targetIMG[1] - $ratio*$thumbY)/2; $srcW = $ratio*$thumbX; $srcH = $ratio*$thumbY; if($targetIMG[2]==2 and @imagetypes() & IMG_JPG) $im = @imagecreatefromjpeg($target); elseif($targetIMG[2]==3 and @imagetypes() & IMG_PNG) $im = @ImageCreateFromPNG($target); elseif($targetIMG[2]==1) $im = @ImageCreateFromGIF($target); elseif($targetIMG[2]==6) $im = @ImageCreateFromWBMP($target); if($im){ $check_gd = get_extension_funcs("gd"); if($check_gd){ $thumb = @imagecreatetruecolor($thumbX,$thumbY); if(!$thumb) $thumb = @ImageCreate($thumbX,$thumbY); $test_check=@imagecopyresampled($thumb,$im,0,0,$sX,$sY,$thumbX,$thumbY,$srcW,$srcH); if(!$test_check) @ImageCopyResized($thumb,$im,0,0,$sX,$sY,$thumbX,$thumbY,$srcW,$srcH); if(@imagetypes() & IMG_PNG) @ImagePNG($thumb,$saveIMG); else @ImageJPEG($thumb,$saveIMG); } } } //function End |
'인터넷정보' 카테고리의 다른 글
| 개인용 무료 PDF 변환 솔루션 (0) | 2007.10.13 |
|---|---|
| HTML 하드코더 (0) | 2007.10.13 |
| cut - 문자열 자르기 (0) | 2007.10.13 |
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2007.10.13 |
| 잘못된 테이블 소스 보정 하기 (0) | 2007.10.13 |
| CSS text-indent (0) | 2007.10.13 |
| image mapping 프로그램, 이미지맵, 이미지매핑 (0) | 2007.10.13 |
| 자바스크립트 라이브러리 목록 (0) | 2007.10.13 |
| 이미지와 글씨 정렬 (0) | 2007.10.13 |
| SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단 (0) | 2007.10.13 |
CSS text-indent
text-indent 속성은 들여쓰기 효과를 지정합니다.
문단의 첫번째 줄을 지정한 길이만큼 들여쓰기 합니다.
ex.
일반적인 문단입니다.
20픽셀 들여쓰기 한 문장입니다. 우리말의 경우 문단의 첫부분에서 들여쓰기를 하므로 text-indent 속성을 사용하면 좋습니다.
-20픽셀 들여쓰기 한 문장입니다. 우리말의 경우 문단의 첫부분에서 들여쓰기를 하므로 text-indent 속성을 사용하면 좋습니다.
|
<p>일반적인 문단입니다.</p> <p style="text-indent:-20px;">-20픽셀 들여쓰기 한 문장입니다. 우리말의 경우 문단의 첫부분에서 들여쓰기를 하므로 text-indent 속성을 사용하면 좋습니다.</p> |
'인터넷정보' 카테고리의 다른 글
| HTML 하드코더 (0) | 2007.10.13 |
|---|---|
| cut - 문자열 자르기 (0) | 2007.10.13 |
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2007.10.13 |
| 잘못된 테이블 소스 보정 하기 (0) | 2007.10.13 |
| 이미지 크롭 (0) | 2007.10.13 |
| image mapping 프로그램, 이미지맵, 이미지매핑 (0) | 2007.10.13 |
| 자바스크립트 라이브러리 목록 (0) | 2007.10.13 |
| 이미지와 글씨 정렬 (0) | 2007.10.13 |
| SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단 (0) | 2007.10.13 |
| 자바스크립트로 플래시 메뉴처럼 (0) | 2007.10.13 |
image mapping 프로그램, 이미지맵, 이미지매핑
image map을 잡아주는 프로그램입니다.
simple하면서 꽤나 쓸만하네요.
아래 주소나 하단 첨부파일 다운로드 받으세요.
invalid-file'인터넷정보' 카테고리의 다른 글
| cut - 문자열 자르기 (0) | 2007.10.13 |
|---|---|
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2007.10.13 |
| 잘못된 테이블 소스 보정 하기 (0) | 2007.10.13 |
| 이미지 크롭 (0) | 2007.10.13 |
| CSS text-indent (0) | 2007.10.13 |
| 자바스크립트 라이브러리 목록 (0) | 2007.10.13 |
| 이미지와 글씨 정렬 (0) | 2007.10.13 |
| SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단 (0) | 2007.10.13 |
| 자바스크립트로 플래시 메뉴처럼 (0) | 2007.10.13 |
| 윈도우의 바로가기 모음을 내 맘대로 (0) | 2007.10.13 |
자바스크립트 라이브러리 목록
메일 보낼 때 첨부한 파일은 아래 URL에서 확인하실 수 있습니다.
http://spreadsheets.google.com/pub?key=pvqd8DGX2zNErXuOhoq8xXg
---- 이하 메일 내용 ----
자바스크립트 라이브러리 중 단순 함수 모음이 아니라 바로 적용해서 쓸만한 것들을 추려보았습니다.
첨부한 파일은 각 라이브러리(프레임워크)별 기능 비교 표입니다.
별표는 특별히 뛰어나다는 뜻이메 세모는 좋지 않다는 뜻입니다.
라이브러리 기능 비교는 크게 Ajax와 자바스크립트 자체 언어 확장, 이벤트 처리, UI로 나눠서 살펴봤습니다.
라이브러리를 통해 HTML 엘리먼트를 조정할 것이기 때문에 DOM 자체 지원은 제외했습니다.
(YUI(Yahoo UI Library)는 확장판이 있어 제외했습니다)
- prototype
URL : http://www.prototypejs.org/
자바스크립트 프레임워크라 불리는 prototype니다.
UI 쪽은 라이브러리는 전혀 없으나 프로토타입 언어 특성을 최대한 활용하여
자바스크립트 자체 기능을 확장하고 간편하게 사용할 수 있도록 되어 있습니다.
prototype 자체만을 사용하기도 하지만 다른 라이브러리의 기본 토대가 되는 경우도 많습니다.
추천도 : ☆☆☆☆☆ - mootools
URL : http://mootools.net/
demo : http://demos.mootools.net/
UI 외에도 이벤트 처리에 강점을 보이는 라이브러리입니다.
단순한 UI 구성보다는 이벤트에 따른 다이내믹한 GUI를 구축하는 데 좋을 듯합니다.
실제 구현된 것을 보면 가볍고 빠른데다 깔끔합니다.
추천도 : ☆☆☆☆
- yui-ext
URL : http://www.yui-ext.com/
demo : http://www.yui-ext.com/deploy/yui-ext/docs/
YUI 기반의 라이브러리입니다. 역시 UI 라이브러리 답게 깔끔하고 예쁩니다.
다만 컨틀롤이 그렇게 다양하지는 않은게 아쉬운 점입니다.
정확하게 파악하지는 못했는데 extjs로 확장된 것 같습니다.
추천도 : ☆☆☆
- extjs
URL : http://extjs.com/
demo : http://extjs.com/deploy/ext/docs/index.html
yui-ext의 확장판으로 보입니다.(거의 확실)
테마 기능이 지원되며 기반 라이브러리가 YUI 하나만 있는 게 아니라
jQuery와 prototype + scriptaculous 등 총 세가지 중 선택할 수 있습니다.
비교한 UI 라이브러리 중 가장 많은 컨트롤을 가지고 있으며
속도도 보통 정도를 유지합니다.
추천도 : ☆☆☆☆
- scriptaculous
URL : http://script.aculo.us/
demo : http://wiki.script.aculo.us/scriptaculous/show/Demos
제일 나중에 알게된 라이브러리라서 첨부파일에는 빠져있습니다.
YUI 처럼 직접 쓰기보다는 extjs 등을 통해 사용하는 게 나을 듯 합니다.
컨트롤도 많지 않고 주로 이펙트와 드래그앤드랍 쪽으로 구현이 되어 있습니다.
추천도 : ☆☆☆
- DHTML Suite
URL : http://www.dhtmlgoodies.com/
demo : http://www.dhtmlgoodies.com/packages/dhtml-suite-for-applications/demos/demo-pane-splitter.html
그다지 좋아 보이지 않는 라이브러리입니다.
데모페이지가 별로여서 그런지는 모르겠으나 그렇게 깔끔하지도 않고 무거운데다
구현된 컨트롤도 기능이 다채롭지 않습니다.
한마디로 비추;
추천도 : ☆☆
- qooxdoo
URL : http://qooxdoo.org/
demo : http://demo.qooxdoo.org/current/showcase/
예쁘고 아기자기하게 구현된 라이브러입니다.
구현된 컨트롤이 그렇게 많지는 않으나 컨트롤 하나하나의 완성도가 상당한 편입니다.
테마와 아이콘을 변경할 수 있는 기능이 있습니다.
필요한 컨트롤이 많지 않다면 고려해볼만 합니다.
추천도 : ☆☆☆
- lightbox
URL : http://www.huddletogether.com/projects/lightbox/
비교적 초반에 나온 라이브러리가 아닌가 합니다.
사실 가지고 있는 기능은 이미 보여주기 하나 뿐이지만
이 기능 하나를 충실히 구현하고 있고
또한 적용하기도 매우 간편해 널리 사용되고 있습니다.
추천도 : ☆☆☆☆
이 외에 (큰 문제는 없겠지만) 라이센스도 확인을 해봐야 하고
실제 코드로 구현을 했을 때 얼마나 간편하게 할 수 있는가도 확인해봐야 합니다.
'인터넷정보' 카테고리의 다른 글
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2007.10.13 |
|---|---|
| 잘못된 테이블 소스 보정 하기 (0) | 2007.10.13 |
| 이미지 크롭 (0) | 2007.10.13 |
| CSS text-indent (0) | 2007.10.13 |
| image mapping 프로그램, 이미지맵, 이미지매핑 (0) | 2007.10.13 |
| 이미지와 글씨 정렬 (0) | 2007.10.13 |
| SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단 (0) | 2007.10.13 |
| 자바스크립트로 플래시 메뉴처럼 (0) | 2007.10.13 |
| 윈도우의 바로가기 모음을 내 맘대로 (0) | 2007.10.13 |
| 한칸띄기 태그 (0) | 2007.10.13 |
이미지와 글씨 정렬
<td><img src="icon.gif " align="texttop">이미지와 글씨의 상단끝이 같게</td>
<td><img src="icon.gif " align="absmiddle">이미지와 글씨의 중간이 같게</td>
<td><img src="icon.gif " align="absbottom">이미지와 글씨의 하단끝이 같게</td>
<td valign="top"><img src="icon.gif " align="texttop"></td>
- 테이블 상단에서 이미지와 글씨의 상단끝이 같게
<td valign="top"><img src="icon.gif " align="absmiddle"></td>
- 테이블 상단에서 이미지와 글씨의 중간이 같게
<td valign="top"><img src="icon.gif " align="absbottom"></td>
- 테이블 상단에서 이미지와 글씨의 하단끝이 같게
<td valign="middle"><img src="icon.gif " align="texttop"></td>
- 테이블 중간에서 이미지와 글씨의 상단끝이 같게
<td valign="middle"><img src="icon.gif " align="absmiddle"></td>
- 테이블 중간에서 이미지와 글씨의 중간이 같게
<td valign="middle"><img src="icon.gif " align="absbottom"></td>
- 테이블 중간에서 이미지와 글씨의 하단끝이 같게
<td valign="bottom"><img src="icon.gif " align="texttop"></td>
- 테이블 하단에서 이미지와 글씨의 상단끝이 같게
<td valign="bottom"><img src="icon.gif " align="absmiddle"></td>
- 테이블 하단에서 이미지와 글씨의 중간이 같게
<td valign="bottom"><img src="icon.gif " align="absbottom"></td>
- 테이블 하단에서 이미지와 글씨의 하단끝이 같게
표준은...
style="vertical-align: 스타일;"
스타일에는 *%, inherit, baseline, sub, super, top, middle, bottom, text-top, text-bottom 등이 있겠습니다.^^
정렬,텍스트 정렬,이미지 정렬,글씨정렬,글자정렬
'인터넷정보' 카테고리의 다른 글
| 잘못된 테이블 소스 보정 하기 (0) | 2007.10.13 |
|---|---|
| 이미지 크롭 (0) | 2007.10.13 |
| CSS text-indent (0) | 2007.10.13 |
| image mapping 프로그램, 이미지맵, 이미지매핑 (0) | 2007.10.13 |
| 자바스크립트 라이브러리 목록 (0) | 2007.10.13 |
| SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단 (0) | 2007.10.13 |
| 자바스크립트로 플래시 메뉴처럼 (0) | 2007.10.13 |
| 윈도우의 바로가기 모음을 내 맘대로 (0) | 2007.10.13 |
| 한칸띄기 태그 (0) | 2007.10.13 |
| Cold Night for Alligators (0) | 2007.10.13 |
SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단
$attach_ip;
$block_ip;
function parse_file()
{
global $attach_ip;
$fp = fopen("/var/log/auth.log", "r");
if (! $fp)
{
echo "open error!\n";
return;
}
$line_num = 0;
while (! feof($fp)) {
$line_num ++;
$buff = trim(fgets($fp));
//$tok = explode(" ", $buff);
$tok = preg_split("/[\s]+/", $buff);
//print_r($tok);
if (!strcmp($tok[5], "Failed") && !strcmp($tok[6], "password"))
{
// from 다음에 ip 값이 위치함.
$ip = $tok[array_search("from", $tok) + 1];
$time = strtotime($tok[1] . " " . $tok[0] . " 2006 " . $tok[2]);
$attach_ip[] = array($ip, $time);
//echo "DEBUG:".$line_num."|".$buff."\n";
//echo "DEBUG:".$ip."|".$time."\n";
}
}
fclose($fp);
// sorting with ip
//sort ($attach_ip);
}
// 블럭 시킬 ip을 찾는다.
function make_block_list()
{
global $attach_ip, $block_ip;
$size = count($attach_ip);
$cnt = 1;
list($w_addr, $w_time) = $attach_ip[0];
for ($i = 1; $i < $size; $i++) {
list($ip, $time) = $attach_ip[$i];
if (count($block_ip) > 0 && in_array($ip, $block_ip))
continue; // 이미 목록상에 있는경우 다음것을 찾음
if (strcmp($ip, $w_addr)) {
$cnt = 1; // 횟수
$w_addr = $ip;
$w_time = $time;
$diff = 0;
$recent = array($time);
}
else {
$cnt ++;
$recent[$cnt - 1] = $time;
}
// 가장 인접한 목록에서 diff 값을 계산한다.
if ($cnt >= 10) $diff = $time - $recent[$cnt - 10];
else $diff = $time - $recent[$cnt - 1];
//echo "DEBUG:" . $ip . "/" . $cnt . "/" . $diff . "/" . $diff/$cnt . "\n";
// 횟수가 6번 이상이고 60초 이내인 경우
if ($cnt >= 10 && $diff <= 60) {
// block 시킬 IP로 판단하고 등록한다.
$block_ip[] = $w_addr;
//echo "DEBUG:".$diff."/".$w_addr."\n";
}
// 횟수가 30번 이상이고 6시간이내인 경우
//else if ($cnt >= 30 && $diff <55*60*50) {
// $block_ip[] = $w_addr;
//}
}
}
parse_file();
//print_r ($attach_ip);
make_block_list();
echo "\nALL: ";
$i = 0;
while (list($time,$ip) = each($block_ip))
{
echo $ip;
$i ++;
if ($i < count($block_ip))
echo ", ";
}
echo "\n";
?>
서버설정 : http://kltp.kldp.org/stories.php?story=05/08/02/4164861
'인터넷정보' 카테고리의 다른 글
| 이미지 크롭 (0) | 2007.10.13 |
|---|---|
| CSS text-indent (0) | 2007.10.13 |
| image mapping 프로그램, 이미지맵, 이미지매핑 (0) | 2007.10.13 |
| 자바스크립트 라이브러리 목록 (0) | 2007.10.13 |
| 이미지와 글씨 정렬 (0) | 2007.10.13 |
| 자바스크립트로 플래시 메뉴처럼 (0) | 2007.10.13 |
| 윈도우의 바로가기 모음을 내 맘대로 (0) | 2007.10.13 |
| 한칸띄기 태그 (0) | 2007.10.13 |
| Cold Night for Alligators (0) | 2007.10.13 |
| Tiranti Solid LET체 (0) | 2007.10.13 |
자바스크립트로 플래시 메뉴처럼
미리보기 : http://oxtag.com/html/ex/javamenu.htm
<html>
<head>
<title>Menu</title>
</head>
<script>
var delay = 3; // 메뉴 스피드(낮을수록 빠름)
var m_length = 20; // 메뉴 간격
var sel_l_length = 30; // 선택한 메뉴와 이전 메뉴 간격
var sel_r_length = 60; // 선택한 메뉴와 다음 메뉴 간격
var m_sel = 0; // 메뉴 선택 상태
var m_max = 0; // 메인메뉴 갯수
var sm_alpha = 0; // 서브메뉴 투명도
var id = new Array(); // 메인메뉴 ID
var sid = new Array(); // 서브메뉴 ID
var m_top = 0; // 메인메뉴 y 위치
function on_load(){
while(document.getElementById("menu"+(m_max+1)) != null){
m_max++;
id[m_max] = document.getElementById("menu"+m_max);
sid[m_max] = document.getElementById("smenu"+m_max);
};
m_top = id[1].offsetTop;
m_act();
}
function m_over(m){
m_sel = m;
for(i=1;i<=m_max;i++){
if(sid[i] != null){
if(m_sel == i){
id[i].style.fontWeight = 'bold';
sid[i].style.display = "";
sm_alpha = 0;
if ((navigator.appName.indexOf('Microsoft')+1)) {
sid[i].filters.alpha.opacity = sm_alpha;
}else{
sid[i].style.opacity = (sm_alpha/100);
}
sid[i].style.top = id[i].offsetTop + id[i].offsetHeight + 40;
}else{
id[i].style.fontWeight = '';
sid[i].style.display = "none";
}
}
}
}
function m_act(){
var goy = 0;
for(i=1;i<=m_max;i++){
// 메인메뉴 좌우 이동
if(i>1)
temp = id[i-1].offsetWidth + id[i-1].offsetLeft;
if(i==1){
gox=id[i].offsetLeft;
}else if(m_sel == i){
gox = temp + sel_l_length;
}else if(m_sel+1 == i){
gox =temp + sel_r_length;
}else{
gox = temp + m_length;
}
id[i].style.left = Math.ceil(id[i].offsetLeft - (id[i].offsetLeft - (gox))/delay)+"px";
// 메인메뉴 상하 이동
if(m_sel == i){
id[i].style.top = Math.ceil(id[i].offsetTop - (id[i].offsetTop - (m_top + 7))/delay)+"px";
}else if(m_sel!=0){
id[i].style.top = Math.ceil(id[i].offsetTop - (id[i].offsetTop - (m_top - 5))/delay)+"px";
}
// 서브메뉴
if(m_sel == i && sid[i] != null){
// 서브메뉴 투명도
if(sm_alpha < 100){
sm_alpha += 5;
if ((navigator.appName.indexOf('Microsoft')+1)) {
sid[i].filters.alpha.opacity = sm_alpha;
}else{
sid[i].style.opacity = (sm_alpha/100);
}
}
// 서브메뉴 아래서부터 위로 나타남
goy = id[i].offsetTop + id[i].offsetHeight;
sid[i].style.top = (sid[i].offsetTop - (sid[i].offsetTop - goy)/delay)+"px";
}
}
setTimeout('m_act()',20);
}
</script>
<style>
.sm_a{color: #666666; text-decoration:none; padding:0px 3px 0px 2px}
.sm_a:hover {color: #FFFFFF; text-decoration:none; background:#666666; padding:0px 3px 0px 2px}
div{font-family:verdana; font-size:10px; letter-spacing:-1px}
.smenu{top:50px; position:absolute; filter:alpha(opacity=0); color:#DDDDDD}
.mmenu{top:30px; position:absolute; cursor:pointer; padding-right:2px; color:#666666}
</style>
<body onload='on_load()'>
<div class=mmenu style='left:200px;' id=menu1 onClick='m_over(1)'>
ABOUT US<br>
</div>
<div id='smenu1' class=smenu style='left:200px; display:none'><a href='' class=sm_a>menu1</a> | <a href='' class=sm_a>menu2</a> | <a href='' class=sm_a>menu3</a></div>
<div class=mmenu style='left:280px;' id=menu2 onClick='m_over(2)'>
PRODUCT<br>
</div>
<div id='smenu2' class=smenu style='left:250px; display:none'><a href='' class=sm_a>menu4</a> | <a href='' class=sm_a>menu5</a> | <a href='' class=sm_a>menu6</a></div>
<div class=mmenu style='left:360px;' id=menu3 onClick='m_over(3)'>
STORY<br>
</div>
<div id='smenu3' class=smenu style='left:310px; display:none'><a href='' class=sm_a>menu7</a> | <a href='' class=sm_a>menu8</a> | <a href='' class=sm_a>menu9</a></div>
</body>
</html>
UI관련 URL을 적어봅니다.
http://extjs.com/
http://www.dhtmlgoodies.com/
http://www.dynarch.com/
http://qooxdoo.org/
http://mootools.net/
'인터넷정보' 카테고리의 다른 글
| CSS text-indent (0) | 2007.10.13 |
|---|---|
| image mapping 프로그램, 이미지맵, 이미지매핑 (0) | 2007.10.13 |
| 자바스크립트 라이브러리 목록 (0) | 2007.10.13 |
| 이미지와 글씨 정렬 (0) | 2007.10.13 |
| SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단 (0) | 2007.10.13 |
| 윈도우의 바로가기 모음을 내 맘대로 (0) | 2007.10.13 |
| 한칸띄기 태그 (0) | 2007.10.13 |
| Cold Night for Alligators (0) | 2007.10.13 |
| Tiranti Solid LET체 (0) | 2007.10.13 |
| !백묵 수진체 - 손글씨 폰트 (0) | 2007.10.13 |
윈도우의 바로가기 모음을 내 맘대로
파일 열기나 저장대화상자의 좌측은 프로그램등을 이용해서 따로 설정하지 않았다면
아래와 비슷한 모양일것이다. (예 / Windows XP)
)
"이 부분" 이란 곳.
그 부분에 원하는 드라이브나 폴더로 바꿔보자.
순서 1) 시작 > 실행 > gpedit.msc 입력 > 확인
순서 2) 사용자구성 > 관리템플릿 > Windows 구성요소 > Windows 탐색기 > 공용 파일 열기 대화 상자 > 바로 가기 모음 표시 항목을 더블클릭 그림으로 본다면 아래와 같다.
)
순서 3)
실행후 아래와 같은 모양이다. 보자마자 감이,, 온다.
)
순서 4)
상단의 "설명" 탭을 클릭해보면 이건 어떻구 어떤식으로 추가하고,, 하는 설명이 자세히 나와있다.
잘 읽어보고 원하는데로 추가, 적용해 본다.
어려운거 없다,, 그냥 "사용"에 체크하고 원하는 경로만 적어주면 된다.
"설명" 탭 부분의 내용을 아래에 붙여넣기 신공해본다. 참고.
Windows 파일/열기 대화 상자의 바로 가기 모음에 표시되는 항목을 구성합니다. 이 설정을 사용하면 바로 가기 모음에 표시할 항목을 5개까지 지정할 수 있습니다.
바로 가기 모음에 표시할 수 있는 항목은 다음과 같습니다.
1) 로컬 폴더로의 바로 가기 -- (예: C:\Windows)
2) 원격 폴더로의 바로 가기 -- (\\server\share)
3) 공용 셸 폴더지정할 수 있는 공용 셸 폴더는 다음과 같습니다.
CommonDocuments, CommonMusic, CommonPictures, Desktop, MyComputer, MyDocuments, MyFavorites, MyMusic, MyNetworkPlaces, MyPictures, Printers, ProgramFiles, Recent.
이 설정을 사용하지 않거나 구성하지 않으면 바로 가기 모음에는 기본 항목만 표시됩니다.
적용후의 변한 모습은 아래와 같다.
)
이렇게 변경할수 있는 "그룹정책" 이란 관리도구에는 이외에도 뭔가 여러가지 설정을 할수가 있다.
하나,,하나 잘 보면서 체크해 볼것.
'인터넷정보' 카테고리의 다른 글
| image mapping 프로그램, 이미지맵, 이미지매핑 (0) | 2007.10.13 |
|---|---|
| 자바스크립트 라이브러리 목록 (0) | 2007.10.13 |
| 이미지와 글씨 정렬 (0) | 2007.10.13 |
| SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단 (0) | 2007.10.13 |
| 자바스크립트로 플래시 메뉴처럼 (0) | 2007.10.13 |
| 한칸띄기 태그 (0) | 2007.10.13 |
| Cold Night for Alligators (0) | 2007.10.13 |
| Tiranti Solid LET체 (0) | 2007.10.13 |
| !백묵 수진체 - 손글씨 폰트 (0) | 2007.10.13 |
| 홈페이지 레이아웃 - 씨리우스 (0) | 2007.10.13 |
로그중에 한칸띄기 태그가 종종 눈에보여서 간단하게 작성해봄니다.
HTML 작성시 한칸 띄기는 그냥 스페이스바 한번 누르면되죠.
그럼 두칸 띄기는 스페이스바 두번...?!
두번, 세번,.....백번..을 띄우더라도 한칸입니다.
스페이스바 자체로만 한칸 이상 띄우려면...
pre 태그로 감싸야 합니다.
ex 1.
<pre>
여러칸 띄우기
</pre>
다른 방법은 특수문자를 사용하면 됨니다. &bsp;는 스페이스바 한번과 동일합니다.
ex 2.
여러칸 띄우기
- 이렇게 하면 여러칸 다음에 스페이스바 한번 + * 5 + 띄우기 앞의 스페이스바 한번 = 총 7칸
좌측 태그 연습장에서 복사해서 실행해보세요.
주의 - 게시판 같은 곳에서 사용시 처음 글등록할때는 상관 없지만 수정할때는 가 사라짐니다.
'인터넷정보' 카테고리의 다른 글
| 자바스크립트 라이브러리 목록 (0) | 2007.10.13 |
|---|---|
| 이미지와 글씨 정렬 (0) | 2007.10.13 |
| SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단 (0) | 2007.10.13 |
| 자바스크립트로 플래시 메뉴처럼 (0) | 2007.10.13 |
| 윈도우의 바로가기 모음을 내 맘대로 (0) | 2007.10.13 |
| Cold Night for Alligators (0) | 2007.10.13 |
| Tiranti Solid LET체 (0) | 2007.10.13 |
| !백묵 수진체 - 손글씨 폰트 (0) | 2007.10.13 |
| 홈페이지 레이아웃 - 씨리우스 (0) | 2007.10.13 |
| css로 만든 메뉴 (0) | 2007.10.13 |
Cold Night for Alligators
invalid-file'인터넷정보' 카테고리의 다른 글
| 이미지와 글씨 정렬 (0) | 2007.10.13 |
|---|---|
| SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단 (0) | 2007.10.13 |
| 자바스크립트로 플래시 메뉴처럼 (0) | 2007.10.13 |
| 윈도우의 바로가기 모음을 내 맘대로 (0) | 2007.10.13 |
| 한칸띄기 태그 (0) | 2007.10.13 |
| Tiranti Solid LET체 (0) | 2007.10.13 |
| !백묵 수진체 - 손글씨 폰트 (0) | 2007.10.13 |
| 홈페이지 레이아웃 - 씨리우스 (0) | 2007.10.13 |
| css로 만든 메뉴 (0) | 2007.10.13 |
| AJAX URL (0) | 2007.10.13 |
Tiranti Solid LET체
'인터넷정보' 카테고리의 다른 글
| SSH 공격 아이피 필터링 스크립트(recent IP 기반) - 아이피 차단 (0) | 2007.10.13 |
|---|---|
| 자바스크립트로 플래시 메뉴처럼 (0) | 2007.10.13 |
| 윈도우의 바로가기 모음을 내 맘대로 (0) | 2007.10.13 |
| 한칸띄기 태그 (0) | 2007.10.13 |
| Cold Night for Alligators (0) | 2007.10.13 |
| !백묵 수진체 - 손글씨 폰트 (0) | 2007.10.13 |
| 홈페이지 레이아웃 - 씨리우스 (0) | 2007.10.13 |
| css로 만든 메뉴 (0) | 2007.10.13 |
| AJAX URL (0) | 2007.10.13 |
| [LINKVIEW] 링크된 사이트를 미리 볼수 있게끔 해줍니다. (0) | 2007.10.13 |
!백묵 수진체 - 손글씨 폰트
'인터넷정보' 카테고리의 다른 글
| 자바스크립트로 플래시 메뉴처럼 (0) | 2007.10.13 |
|---|---|
| 윈도우의 바로가기 모음을 내 맘대로 (0) | 2007.10.13 |
| 한칸띄기 태그 (0) | 2007.10.13 |
| Cold Night for Alligators (0) | 2007.10.13 |
| Tiranti Solid LET체 (0) | 2007.10.13 |
| 홈페이지 레이아웃 - 씨리우스 (0) | 2007.10.13 |
| css로 만든 메뉴 (0) | 2007.10.13 |
| AJAX URL (0) | 2007.10.13 |
| [LINKVIEW] 링크된 사이트를 미리 볼수 있게끔 해줍니다. (0) | 2007.10.13 |
| 달력, calendar (0) | 2007.10.13 |
홈페이지 레이아웃 - 씨리우스
'인터넷정보' 카테고리의 다른 글
| 윈도우의 바로가기 모음을 내 맘대로 (0) | 2007.10.13 |
|---|---|
| 한칸띄기 태그 (0) | 2007.10.13 |
| Cold Night for Alligators (0) | 2007.10.13 |
| Tiranti Solid LET체 (0) | 2007.10.13 |
| !백묵 수진체 - 손글씨 폰트 (0) | 2007.10.13 |
| css로 만든 메뉴 (0) | 2007.10.13 |
| AJAX URL (0) | 2007.10.13 |
| [LINKVIEW] 링크된 사이트를 미리 볼수 있게끔 해줍니다. (0) | 2007.10.13 |
| 달력, calendar (0) | 2007.10.13 |
| pcount, 카운터, counter (0) | 2007.10.13 |
css로 만든 메뉴
http://oxtag.com/html/ex/cssMenu.html
<HTML>
<META HTTP-EQUIVE="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-KR">
<head>
<title> css로 만든 메뉴 </title>
<style type="text/css">
/* ------- MENU1 ------- */
#css_menu1{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
}
#css_menu1 li{
display: inline;
}
#css_menu1 li a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:whitesmoke;
border-top: 4px solid gray;
border-bottom: 1px solid silver;
}
#css_menu1 li a:hover{
border-top: 4px solid deeppink;
color: red;
background-color:#ffeef7;
padding: 10px;
}
/* ------- MENU2 ------- */
#css_menu2{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
}
#css_menu2 li{
display: inline;
}
#css_menu2 li a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:#f5f5f5;
border-top: 5px solid silver;
border-bottom: 5px solid silver;
selector-dummy : expression(this.hideFocus=true);
}
#css_menu2 li a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}
#css_menu2 li a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}
/* ------- MENU3 ------- */
#css_menu3{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
}
#css_menu3 li{
display: inline;
}
#css_menu3 li a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:whitesmoke;
border-top: 5px solid silver;
border-bottom: 1px solid silver;
selector-dummy : expression(this.hideFocus=true);
}
#css_menu3 li a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
}
#css_menu3 li a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
}
#css_menu3 li a:hover.green{
border-top: 5px solid green;
}
#css_menu3 li a:active.green{
border-top: 5px solid green;
}
#css_menu3 li a:hover.blue{
border-top: 5px solid #0080c0;
}
#css_menu3 li a:active.blue{
border-top: 5px solid #0080c0;
}
#css_menu3 li a:hover.brown{
border-top: 5px solid #ff8000;
}
#css_menu3 li a:active.brown{
border-top: 5px solid #ff8000;
}
#css_menu3 li a:hover.purple{
border-top: 5px solid #7257B1;
}
#css_menu3 li a:active.purple{
border-top: 5px solid #7257B1;
}
#css_menu3 li a:hover.navy{
border-top: 5px solid #004080;
}
#css_menu3 li a:active.navy{
border-top: 5px solid #004080;
}
/* ------- MENU4 ------- */
#css_menu4{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
width:100%;
background-color:whitesmoke;
border-bottom: 1px solid silver;
}
#css_menu4 div{
float: left;
}
#css_menu4 div a{
border-top: 5px solid silver;
float: left;
color: black;
padding: 10px;
text-decoration: none;
selector-dummy : expression(this.hideFocus=true);
}
#css_menu4 div a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
}
#css_menu4 div a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
}
#css_menu4 div a:hover.green{
border-top: 5px solid green;
}
#css_menu4 div a:active.green{
border-top: 5px solid green;
}
#css_menu4 div a:hover.blue{
border-top: 5px solid #0080c0;
}
#css_menu4 div a:active.blue{
border-top: 5px solid #0080c0;
}
#css_menu4 div a:hover.brown{
border-top: 5px solid #ff8000;
}
#css_menu4 div a:active.brown{
border-top: 5px solid #ff8000;
}
#css_menu4 div a:hover.purple{
border-top: 5px solid #7257B1;
}
#css_menu4 div a:active.purple{
border-top: 5px solid #7257B1;
}
#css_menu4 div a:hover.navy{
border-top: 5px solid #004080;
}
#css_menu4 div a:active.navy{
border-top: 5px solid #004080;
}
/* ------- MENU5 ------- */
#css_menu5{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
width:100%;
background-color:whitesmoke;
}
#css_menu5 div{
float: left;
}
#css_menu5 div a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:#f5f5f5;
border-top: 5px solid silver;
border-bottom: 5px solid silver;
selector-dummy : expression(this.hideFocus=true);
}
#css_menu5 div a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}
#css_menu5 div a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}
#css_menu5 div a:hover.green{
border-top: 5px solid green;
}
#css_menu5 div a:active.green{
border-top: 5px solid green;
}
#css_menu5 div a:hover.blue{
border-top: 5px solid #0080c0;
}
#css_menu5 div a:active.blue{
border-top: 5px solid #0080c0;
}
#css_menu5 div a:hover.brown{
border-top: 5px solid #ff8000;
}
#css_menu5 div a:active.brown{
border-top: 5px solid #ff8000;
}
#css_menu5 div a:hover.purple{
border-top: 5px solid #7257B1;
}
#css_menu5 div a:active.purple{
border-top: 5px solid #7257B1;
}
#css_menu5 div a:hover.navy{
border-top: 5px solid #004080;
}
#css_menu5 div a:active.navy{
border-top: 5px solid #004080;
}
</style>
</head>
<body>
<ul id="css_menu1">
<li><a href="#">자유게시판</a></li>
<li><a href="#">질문&답변</a></li>
<li><a href="#">알짜게시판</a></li>
<li><a href="#">메시지박스</a></li>
<li><a href="#">환경설정</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
<br style="clear: left;" />
<br>
<ul id="css_menu2">
<li><a href="#">자유게시판</a></li>
<li><a href="#">질문&답변</a></li>
<li><a href="#">알짜게시판</a></li>
<li><a href="#">메시지박스</a></li>
<li><a href="#">환경설정</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
<br style="clear: left;" />
<br>
<ul id="css_menu3">
<li><a href="#" class="blue">자유게시판</a></li>
<li><a href="#" class="brown">질문&답변</a></li>
<li><a href="#" class="purple">알짜게시판</a></li>
<li><a href="#" class="navy">메시지박스</a></li>
<li><a href="#" class="green">환경설정</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
<br style="clear: left;" />
<br>
<div id="css_menu4">
<div><a href="#" class="blue">자유게시판</a></div>
<div><a href="#" class="brown">질문&답변</a></div>
<div><a href="#" class="purple">알짜게시판</a></div>
<div><a href="#" class="navy">메시지박스</a></div>
<div><a href="#" class="green">환경설정</a></div>
<div><a href="#">로그아웃</a></div>
<div><a style="width:100%"></a></div>
</div>
<br><br>
<div id="css_menu5">
<div><a></a></div>
<div><a href="#" class="blue">자유게시판</a></div>
<div><a href="#" class="brown">질문&답변</a></div>
<div><a href="#" class="purple">알짜게시판</a></div>
<div><a href="#" class="navy">메시지박스</a></div>
<div><a href="#" class="green">환경설정</a></div>
<div><a href="#">로그아웃</a></div>
<div><a style="width:100%"></a></div>
</div>
</body>
</HTML>
'인터넷정보' 카테고리의 다른 글
| 한칸띄기 태그 (0) | 2007.10.13 |
|---|---|
| Cold Night for Alligators (0) | 2007.10.13 |
| Tiranti Solid LET체 (0) | 2007.10.13 |
| !백묵 수진체 - 손글씨 폰트 (0) | 2007.10.13 |
| 홈페이지 레이아웃 - 씨리우스 (0) | 2007.10.13 |
| AJAX URL (0) | 2007.10.13 |
| [LINKVIEW] 링크된 사이트를 미리 볼수 있게끔 해줍니다. (0) | 2007.10.13 |
| 달력, calendar (0) | 2007.10.13 |
| pcount, 카운터, counter (0) | 2007.10.13 |
| 웹용 라디오 플래이어 가로버전 입니다.(프레임용) (0) | 2007.10.13 |
http://sourceforge.net/projects/zk1/
http://sourceforge.net/projects/taconite
http://code.google.com/webtoolkit/
http://openapi.naver.com/19.html
http://www.edwardh.com/jsunit/ => JsUnit 홈페이지
http://devedge-temp.mozilla.org/toolbox/examples/2003/inheritFrom/index_en.html => 넷스케이프 커뮤니케이션의 Bob Clay 는 부모 클래스의 메소드를 자식 클래스에 복사할 수 있는 아주 간단한 메소드를 소개하였다.
http://chrispederick.com/work/webdeveloper/ => Web Developer Extension for FireFox 으로써 파이어폭스 브라우저가 제공해 주는 다양한 기능의 툴바를 다운/설치할 수 있는 싸이트이다.
http://hometown.aol.de/_ht_a/memtronic/ => 자바스크립트 파일을 압축하거나 Obfuscation(자신의 소스코드를 다른 사람이 악의적으로 도용하고나 훔쳐가는 것을 막기 위해서 멤버나 메소드 이름을 의미없는 문자들로 바꾸는 기법)하는 Freeware 싸이트이나 현재버젼에서는 아직까지 자바스크립트에 대한 Obfuscation 은 지원하지 않고 있다.
http://www.jslint.com/ => 자바스크립트 소스코드를 검증해 주는 싸이트
http://www.mozilla.com/ => 모질라 닷컴/파이어 폭스 최신버젼 다운로드
https://addons.mozilla.org/ => FireFox add on home page
https://addons.mozilla.org/extensions/?application=firefox => firefox add on extensions
http://www.activeperl.com/ => 펄의 런타임 환경인 ActivePerl 을 다운로드 받을 수 있다.
http://jsdoc.sourceforge.net/ => javadoc 명령으로 HTML API를 생성하듯이 자바스크립트의 주석을 바탕으로 HTML 다큐먼트를 생성하는 오픈소스
http://www.openqa.org/selenium/ => html 및 자바스크립트를 검사해주는 아주 훌륭한 오픈소스다. 실험적인 프로그램이지만 100점 주고 싶다.
http://www.activeperl.com/ => 펄 런타임 환경 다운로드 싸이트
http://jsdoc.sourceforge.net/ => jsDoc
http://www.json.org => JSON 홈페이지
http://www.ashleyit.com/rs/main.htm => Remote Scripting 관련하여 Brent Ashley 가 운영하는 싸이트
=============================================================================
http://maps.google.com/ => 구굴 맵
http://www.google.com/ig => Draggable DOM pattern 을 아주 훌륭하게 적용한 싸이트
http://www.google.com/webhp?complete=1&hl=kor => 구굴 Suggest 한글 검색창
http://www.google.com/webhp?complete=1&hl=en => 구굴 Suggest 영문 검색창
http://www.netflix.com/BrowseSelection => ajax 를 이용한 툴팁을 구현한 싸이트
http://www.apple.com/itunes/ => AJAX 관련 refresh 기능을 구현해 놓은 싸이트.(애플 itunes 뮤직 다운로드 자동 카운트)
http://www.digg.com/spy => AJAX 관련 refresh 기능을 구현해 놓은 싸이트.(새로운 정보 컨텐츠 리스트 자동 소팅 기능)
=============================================================================
http://www.apress.com/book/supplementDownload.html?bID=10042&sID=3021 => Foundation of Ajax 소스 다운로드 url
'인터넷정보' 카테고리의 다른 글
| Cold Night for Alligators (0) | 2007.10.13 |
|---|---|
| Tiranti Solid LET체 (0) | 2007.10.13 |
| !백묵 수진체 - 손글씨 폰트 (0) | 2007.10.13 |
| 홈페이지 레이아웃 - 씨리우스 (0) | 2007.10.13 |
| css로 만든 메뉴 (0) | 2007.10.13 |
| [LINKVIEW] 링크된 사이트를 미리 볼수 있게끔 해줍니다. (0) | 2007.10.13 |
| 달력, calendar (0) | 2007.10.13 |
| pcount, 카운터, counter (0) | 2007.10.13 |
| 웹용 라디오 플래이어 가로버전 입니다.(프레임용) (0) | 2007.10.13 |
| 소켓을 이용한 멀티박스(검색,사전,로또,주식) 소스 입니다. (0) | 2007.10.13 |
[LINKVIEW] 링크된 사이트를 미리 볼수 있게끔 해줍니다.
왠지 버벅되는 듯한 느낌이 많아 한번 맹글었습니다.
일요일이라 시간도 좀 생기고해서.. ㅠㅠ (외롭군;;)
사용방법은 아래 태그를 자기 블로그나 홈페이지 하단에 추가합니다.
<script defer="defer" id="kilho_linkview" type="text/javascript" src="http://linkview.kilho.net/linkview-s.php"></script>
그러면, 아래와 같이 링크에 마우스를 가따대믄 이미지가 뜹니다.
여기를 클릭하시면 네이버 지식인(reo119님)의 글에 해당 소스를 추가하였습니다.
링크된곳을 마우스로 움직여보시면, 체험(??)을 할수 있습니다.
원본 주소
'인터넷정보' 카테고리의 다른 글
| Tiranti Solid LET체 (0) | 2007.10.13 |
|---|---|
| !백묵 수진체 - 손글씨 폰트 (0) | 2007.10.13 |
| 홈페이지 레이아웃 - 씨리우스 (0) | 2007.10.13 |
| css로 만든 메뉴 (0) | 2007.10.13 |
| AJAX URL (0) | 2007.10.13 |
| 달력, calendar (0) | 2007.10.13 |
| pcount, 카운터, counter (0) | 2007.10.13 |
| 웹용 라디오 플래이어 가로버전 입니다.(프레임용) (0) | 2007.10.13 |
| 소켓을 이용한 멀티박스(검색,사전,로또,주식) 소스 입니다. (0) | 2007.10.13 |
| 소켓을 이용한 랭킹(검색어,음악,영화,도서) 소스입니다. (0) | 2007.10.13 |
