사용자 삽입 이미지

jQuery + Webservice 를 사용해서 위와 같은 단계형 select box 를 만들어 보겠다.

Open Source Wed Design - 공개 웹 디자인 소스

Js & Css 2009. 11. 16. 09:34 posted by 무명시인

jQuery Plugin - uploadify

Js & Css/jQuery 2009. 10. 21. 15:21 posted by 무명시인
http://www.uploadify.com/

사용방법은 간단하다.

사용자 삽입 이미지

대상 컨테이너로는

<input type='file, <div> 등등 이 가능하다..

'uploader': '업로드를 수행할 녀석,  uploadify.swf 로 사용하며 위 경로에서 제공해준다
'cancelImg': 업로드한 파일을 보여주는 "큐"에서 파일을 지울 버튼 이미지
'multi': true : 다중 업로드 여부 true / false
'buttonText': 업로드 버튼의 문구
'displayData': 업로드시 보여줄 상태
'uploadifyClearQueue': 업로드 후 큐를 비우는 이벤트 핸들러

사용자 삽입 이미지


uploadifySettings : 제반의 설정을 한다.

"script " 업로드를 수행할 핸들러




[jQuery] Selector

Js & Css/jQuery 2009. 9. 7. 11:49 posted by 무명시인

csc 넘치는 text

Js & Css 2009. 5. 21. 17:54 posted by 무명시인
 

스타일로 길이 자르기

그냥 가나다라마바사아자차카타파하
Css 가나다라마바사아자차카타파하

Css2 가나다라마바사아자차카타파하

긴글 자동 줄바꿈
긴텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트

CodeHighLight - SyntaxHighlighter 2.0 사용하기

Js & Css 2009. 5. 18. 16:36 posted by 무명시인




http://code.google.com/p/syntaxhighlighter/

첨부파일을 다운받는다..

13개의  .js 파일과

1개의 .css 와

1개의 .swf 파일이 있다.


사용자 삽입 이미지

각각 인클루드를 하고..

사용법은 쉽다..

       <pre name="code" class="c-sharp">
        using System;
        using System.Collections.Generic;
        using System.Linq;
        using System.Web;
        using System.Web.UI;
        using System.Web.UI.WebControls;

        public partial class CodeHighLight_Test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {

            }
        }

        </pre>
        <hr />
        <pre name="code" class="c-sharp:collapse">
        using System;
        using System.Collections.Generic;
        using System.Linq;
        using System.Web;
        using System.Web.UI;
        using System.Web.UI.WebControls;

        public partial class CodeHighLight_Test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {

            }
        }

        </pre>
        <hr />
        <textarea name="code" class="c#" cols="60" rows="10">
        using System;
        using System.Collections.Generic;
        using System.Linq;
        using System.Web;
        using System.Web.UI;
        using System.Web.UI.WebControls;

        public partial class CodeHighLight_Test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {

            }
        }

        </textarea>

사용자 삽입 이미지

컨태이너 역활을 할 html 태그에 class 를 해당 언어명으로 주면된다.

width 는 태이블로 감사서 주어야 한다 ..

웹에디터나 이런걸로 얼마든지 사용이 가능할것 같다.

페이지에서 지정된 위치로 이동

Js & Css 2009. 5. 8. 17:55 posted by 무명시인
    1<a name="1"></a><br /><br /><br />
    2<a name="2"></a><br /><br /><br />
    3<a name="3"></a><br /><br /><br />
    4<a name="4"></a><br /><br /><br />
    5<a name="5"></a><br /><br /><br />   
    <a href="#1">1</a>&nbsp;
    <a href="#2">2</a>&nbsp;
    <a href="#3">3</a>&nbsp;
    <a href="#4">4</a>&nbsp;
    <a href="#5">5</a>&nbsp;



HTML 이 가장 어려웠어요..

[js] Date 개체

Js & Css 2009. 4. 22. 09:18 posted by 무명시인

 var today = new Date();//Data객체 참조

 today.getYear() //년 

 today.getMonth()//월0~11월, +1해줘야 함.

today.getdate() //일

today.getDay()//요일0에서 6요일

today.getHours()//시

today.getMinutes()//분

today.getSeconds() //초

예제)

var dYoil = new Array('일', '월', '화', '수', '목', '금', '토');
var dToday = new Date();

 //요일
 var yoil = dToday.getDay();
 //시간
 var hour = dToday.getHours();

 alert('오늘은 ' + dYoil[yoil] + ';;' + yoil + '요일입니다\n시간은' + hour + '시입니다');

예제2) -- 주말에만 팝업을 띄우자..


    <script type="text/javascript" language="javascript">
        function GetCookie(NameCookie) {
            var i = document.cookie.indexOf(NameCookie + '=');

            if (i != -1) {
                i += NameCookie.length + 1;
                NameEnd = document.cookie.indexOf(';', i);

                if (NameEnd == -1) {
                    NameEnd = document.cookie.length;
                }
                return unescape(document.cookie.substring(i, NameEnd));
            }
            else {
                return "";
            }
        }

        function window.onload() {
            var jumalYn = false;
            var dToday = new Date();
            var yoil = dToday.getDay();
            var hour = dToday.getHours();

            switch (yoil) {
                case 0: jumalYn = true; break;
                case 1: jumalYn = false; break;
                case 2: jumalYn = false; break;
                case 3: jumalYn = false; break;
                case 4: jumalYn = false; break;
                case 5: if (hour > 16) jumalYn = true; break;
                case 6: jumalYn = true; break;
                default: jumalYn = false; break;
            }

            if (jumalYn) {
                var Cookievalue = GetCookie('Tourplanner');
                if (Cookievalue == "") {
                    var tour = window.open('http://www.naver.com', 'weekend', 'width=400,height=325');
                    tour.focus();
                }
            }
        }
    </script>

TextArear 의 내용이많아지면..

Height 의 속성이 저절로 늘어난다..

힏들게 자바스크립트로 제어 할려고 하다가..

이런 쉬운 방법이..

Style 속성 지정만으로 해결이 되었네..

<textarea cols="20" rows="2" name="textarea1" style="overflow: visible"></textarea>

ASP.NET 의 서버컨트롤도 동일하게 적용이 가능하다.

<asp:TextBox runat="server" ID="TextBox1" Style="overflow: visible;" TextMode="MultiLine"></asp:TextBox>

창닫기 타이머

Js & Css 2009. 4. 6. 08:59 posted by 무명시인

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoClose.aspx.cs" Inherits="Javascript_Etc_AutoClose" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>제목 없음</title>

    <script language="javascript">
    // set time
    var time = 5;
    function checkTime()
    {
        if(time >= 0)
        {
            setTimeout(checkTime, 1000, 1);   
            div.innerText = time + ' second after window close';  
            time--;
        }
        else
        {
            clearTimeout(1);
            self.close();
        }       
    }

    time = 5;
    setTimeout(checkTime, 1000, 1);
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div id="div">
        </div>
    </form>
</body>
</html>