자바 스크립트 실용적인 응용 프로그램 조각 (1) : 후광 효과 (유사 QQ2012)를 높이기 위해 웹 페이지의 텍스트 상자를 보자

우리 모두는 기본 Asp.Net 텍스트 상자 매우 추한, 후광 효과의 입력 텍스트 상자의 종류의 QQ2011 버전을 볼에 로그인 것을 알고, 도움이되지만 매우 오랫동안 우리를 만들지 만, 나는 소스 코드가 있음을, C ++에 의해 달성 될 발견 볼 수 없습니다 어떻게 우리 Asp.Net 거기에 같은 기능을 추가하는 방법? 모두가 그들에게 내 실행 샷을 보여 보내기

기본 텍스트 상자 스타일 :

텍스트 상자에 마우스 :

이 냉각되지 않는 이유는 무엇입니까? 지금은 그것을 수행하는 방법을 설명 할 것이다? 첫째, 우리는 웹 사이트의 응용 프로그램을 구축 할 수 있습니다. 폴더 플러그인 / 텍스트 상자를 만들기 위해 시작하기 전에 설립 및 이미지 폴더 (배경 이미지 포함 : border.png)를 추가 할 수있는 텍스트 상자에 jQuery 라이브러리의 하위 폴더를 도입, 다음과 같이 아마 폴더 구조가 있어야한다 :

그런 다음 우리는 다음과 같이 HTML 구조의 거친 버전이 설계하기 시작했다 :

< DIV 클래스 = '범위' >姓名</ DIV > 
< DIV 클래스 = 'aq_box' > 
< DIV 클래스 = 'aq_box_wrap' > 
< 입력 유형 = "텍스트" ID = "이름" 클래스 = "텍스트 박스" 라벨 = "姓名"  /> 
</ DIV > 
</ DIV >

매우 간단합니다, 우리는 편리하므로, 플러그, 사용자의 통화로를 만들기 위해 희망, 내 생각에 따라 포함 된 클래스와 의사 속성 레이블이 여러 장소에게 있다는 것을 발견,하지만. 나는 호출 코드와 HTML 구조를 제공합니다 :

< 머리 > 
< 제목 > </ 제목 > 
< 링크 HREF = "jquey.textbox.css" 확인해 = "스타일" 유형 = "텍스트 / CSS"  /> 
< 스크립트 SRC = "JQuery와-1.5.1.min.js" 유형 = "텍스트 / 자바 스크립트" > </ 스크립트 > 
< 스크립트 SRC = "jquery.textbox.js" 유형 = "텍스트 / 자바 스크립트" > </ 스크립트 > 
< 스크립트 유형 = "텍스트 / 자바 스크립트" >
        $ (문서) .ready (함수 () {
            $ ( "# 이름") 텍스트 상자 ().; 
        }); 
</ 스크립트 > 
</ 머리 > 
< 몸 > 
< 입력 유형 = "텍스트" ID = "이름" 클래스 = "텍스트 상자" 라벨 = "姓名"  /> 
</ 몸 >

더 간단 호출되지 않은 패키지는 충분하다. 다음으로, CSS와 jQuery 플러그인의 더 중요 작성하는 당신을 데려 갈 것이다.

플러그인, 기능 요구 사항으로 인해 이름이 지정 될 수 jquery.textbox.js에서 먼저보기 :

toggleClass ( '마우스 ");             } 함수 () {














                $ ( 이 ) .toggleClass는 ( "가져가"); 
            }) 
            .find ( "텍스트 박스.")의 폭 (p.width).; 
    }; 
var에 docloaded = 거짓 ; 
    $ (문서) .ready ( 함수 () { 
        = docloaded 진정한
     }); 
    $ .fn.textbox = 함수 (p) { 
반환  이 .each ( 함수 () { 
경우 (docloaded) {! 
VAR의 t = 이 ; 
                $ (문서) .ready ( 함수 () { 
                    $ .addTextBox (t, P) ; 
                });
            } 다른 { 
                $ .addTextBox ( 이 쪽) 
            } 
        }); 
    }; // 종료 입력란
 }) (jQuery를);

플러그인은 다음에서 신청 양식 파일 (jquery.textbox.css) :

.span 
{ 
    패딩 : 3px의 2 픽셀 0 0; 
    왼쪽으로 뜨다; 
    디스플레이 : 인라인; 
} 
.textbox 
{ 
    국경 : 0 픽셀; 
    높이 : 22 픽셀; 
    라인 높이 : 22 픽셀; 
    오버 플로우 : 숨겨진; 
    배경 : 홈페이지 (이미지 / border.png) 0 -72px 반복-X; 
} 
.aq_box 
{ 
    패딩 왼쪽 : 3px의; 
    배경 : 홈페이지 (이미지 / border.png)은 더 반복을 -24px 남아 있지; 
    왼쪽으로 뜨다; 
} 
.aq_box_wrap 
{ 
    패딩 오른쪽 : 3px의; 
    배경 : 홈페이지 (이미지 / border.png)을 마우스 오른쪽 -24px 노 - 반복; 
} 

.aq_box.hover 
{ 
    배경 - 위치 : 왼쪽 상단; 
}
.aq_box.hover .aq_box_wrap 
{ 
    배경 위치 : 우측 상단; 
} 
.aq_box.hover .textbox 
{ 
    배경 위치 : 0 -48px; 
}

또한, 나는 배경 이미지도 Tieshanglai을 (border.png)합니다

이러한 준비 작업을 완료 한 후에는 이러한 멋진 효과를 검색 할 수 있습니다. 사실,이 기능은 예를 들어, 당신은 툴팁 효과를 추가, 워터 마크를 추가 등등 키보드 아이콘을 추가 검색 아이콘을 추가 할 수 있습니다, 개선을위한 많은 분야가 있습니다. 나는, 업데이트 및 플러그인의 미래 발전에 지속적으로 개선을 함께 즐길 수에 오신 것을 환영합니다. 여기에 관심있는 친구들이 소스 코드의 새 버전을 다운로드 (압축 해제 열 수 후 demo.htm는 영향을 주셔서 감사합니다).

HTTPS : //www.cnblogs.com/hmiinyu/archive/2011/12/23/2299891.html 재현

자바 스크립트 실용적인 응용 프로그램 조각 (1) : 후광 효과 (유사 QQ2012)를 높이기 위해 웹 페이지의 텍스트 상자를 보자

추천