> 웹 프론트엔드 > JS 튜토리얼 > Jquery 기반 Windows Aero 팝업창(아름다운 닫기 버튼)_jquery

Jquery 기반 Windows Aero 팝업창(아름다운 닫기 버튼)_jquery

WBOY
풀어 주다: 2016-05-16 18:19:15
원래의
1206명이 탐색했습니다.

오늘 소개하는 Jquery Dialog Plugins AeroWindow는 Windows 7 Aero 효과와 유사한 물리적 몸체를 가지고 있다는 점에서 가장 독특한 것입니다.

렌더링:
Jquery 기반 Windows Aero 팝업창(아름다운 닫기 버튼)_jquery
데모:

공식 데모 로컬 데모

특징
고유: 창이 이동할 때 제목 표시줄 반사 효과
창 버튼: 최소화, 축소, 최대화 및 닫기
창 제목을 두 번 클릭 열 최대화, 축소
활성 창 강조 표시
창 크기 변경(크기 조정)
마우스 드래그 창
N 다중 구성 옵션
구성 옵션
창 제목
창 시작 위치
창에서 사용 가능한 기능, 마우스 이벤트 및 JavaScript 호출
호환성 테스트를 거친 아래 브라우저
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
Firefox 3
Google 브라우저 4
Apple Safari 4
Opara10
사용이 매우 간단합니다.
기존 웹 사이트 창에 Windows Aero 효과가 표시되도록 하세요.

가장 간단한 사용 방법:




코드 복사

코드는 다음과 같습니다. $('#YourContainerDiv').AeroWindow({ WindowTitle: '내 첫 번째 웹용 Aero 창',
})



사용자 정의 구성:



코드 복사
코드는 다음과 같습니다. $('#YourContainerDiv') .AeroWindow({ WindowTitle: '내 첫 번째 멋진 웹용 Aero 창',
WindowPositionTop: 'center',
WindowPositionLeft: 'center',
WindowWidth: 600,
WindowHeight: 400 ,
WindowMinWidth: 100,
WindowMinHeight: 100,
WindowAnimationSpeed: 500,
WindowAnimation: 'easeOutCubic',//창을 열 때 애니메이션 효과
WindowRessible: true,
WindowDraggable: true,
WindowMinimize: true,
WindowMaximize: false,
WindowClosable: true
})


에는 필요한 모든 파일과 데모 파일이 포함되어 있습니다. 이 버전은 jQuery(v1.4.2)를 기반으로 합니다.

공식 다운로드 주소: »
AeroWindow
(v3.5)
이 사이트의 다운로드 주소:
AeroWindow 모방 Windows Aero jquery 기반 팝업창
라이프플로우 페이지에서 AeroWindow 플러그인을 사용하기 위한 코드를 첨부


코드 복사
코드는 다음과 같습니다. //javascript $(document).ready(function() {
$('#profilactic a ').click(function() {
var go=$(this);
$('#mywindows').attr('src',go.attr('href'))
go .attr('href','javascript:void (0);');
$('#Firefoxapp').AeroWindow({
WindowTitle: 'Xiangwan's' go.attr('class'),
WindowPositionTop: 'center',
WindowPositionLeft: 'center',
WindowWidth: 1000,
WindowHeight: 500,
WindowAnimation: 'easeOutCubic'
})
$( 'html,body').animate( {scrollTop: '0px'}, 300);
return false
})
//팝업 창 컨테이너






필요한 친구들이 참고할 수 있습니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿