당신이 사용하지 않았을 수도 있는 jQuery의 여러 함수들_jquery

1. 나만의 드롭다운 목록 만들기
html에서는

코드 복사를 생각하시면 됩니다. 🎜> 코드는 다음과 같습니다.

hello 1


하지만 디스플레이는 보기 좋지 않습니다. div ul을 사용하여 드롭다운 목록을 직접 만들 수 있으며 슬라이드다운 및 슬라이드업 기능이 매우 고통스럽습니다.
IE8에서의 효과 비교:


먼저 아이디어에 대해 이야기해 보겠습니다. 아주 간단한 아이디어입니다.
a. list 레코드가 표시되는 컨테이너를 선택하고 offset을 사용하여 Div가 표시되어야 하는 위치인 offset.top 및 offset.left를 가져옵니다.

b. UL과 그 하위 li을 통해 드롭다운 상자를 시뮬레이션합니다. 여기서 주목해야 할 몇 가지 문제가 있습니다.

i: UL은 새로 생성된 Div에 배치해야 하며, 이 Div의 위치는 이전 단계에서 Div의 최상위 위치와는 거리가 멀습니다. iDiv라고 부릅니다. iDiv.height;

ii: li 요소를 클릭한 후에는 매번 삭제해야 합니다. 그렇지 않으면 드롭다운 목록이 점점 길어집니다. . .

iii: 다른 곳에서 마우스를 클릭하면 드롭다운 목록을 숨겨야 합니다.

다음 코드를 사용하여 이 기능을 단계별로 구현하는 방법을 설명하겠습니다.


1. 드롭다운 목록에서 선택한 값에 대한 컨테이너로 iDiv를 만듭니다.
iDiv를 만들기 전에 먼저 이 드롭다운 목록을 표시할 위치를 가져와야 합니다.

코드 복사 코드는 다음과 같습니다.

// 오프셋, 너비, 높이를 사용하여 선택 목록의 위치를 ​​가져옵니다.

var offset = $(".select_css").offset();
var width = $(".select_css").width();
var height = $(".select_css").height()


다음 단계는 iDivb를 생성하고 css() 메소드를 사용하여 iDiv에 서식을 추가합니다.

코드 복사 코드는 다음과 같습니다.

var iDiv = $("

").css({

'top': offset.top,
'left': offset.left,
'width': 너비,
' height': 높이,
'border': '1px solid #aaaaaa',
'fontSize': '12px',
'textIndent': '4px',
'cursor' : 'default ' }).text("hello");


iDiv도 원래는 불필요한 class='iDiv'를 추가했는데 나중에 jQuery의 css()가 배경이미지의 반복없음 속성은 오랫동안 검색해봐도 외국인에 대한 예시가 없어서 clas='iDiv':

코드 복사 코드는 다음과 같습니다: .iDiv

{

background-image:url('images/select_right. gif');
배경 위치:오른쪽;
배경 반복:no-repeat;


효과는 다음과 같습니다. 🎜>
2. iDiv에서 클릭 이벤트가 발생하면 드롭다운 박스를 생성하고 슬라이드다운 효과를 사용합니다.

먼저 cDiv를 생성하여 html 본문에 추가해야 합니다. 위치는 iDiv 바로 아래이므로 다음과 같이 cDiv를 생성해야 합니다.


코드 복사

코드는 다음과 같습니다.

var cDiv = $("

") .css({ '위치': '절대', '너비': 너비, '상단': offset.top 22, '왼쪽': offset.left,

'Background': '# f7f7f7',

'border': '1px solid silver'
}).hide();


기본적으로 숨기기를 원합니다.



이 cDiv를 사용하면 iDiv Click 이벤트가 발생할 때 UL 목록을 생성하고 이를 cDiv에 추가하기만 하면 됩니다.

코드 복사


코드는 다음과 같습니다.

var UL = $("

").appendTo(cDiv)
for (var i = 1; i < 10; i ) {
$("

"). AppendTo(UL).text("hello" i).mouseover(function () {
$(this).css(
{
'color': 'white',
'Background' : '회색'
}
);
}).mouseout(function () {
$(this).css(
{
'color': '검은색',
'Background': 'white'
});
}).click(function () {
// cDiv를 시각화하고 선택한 crrent li의 텍스트를 iDiv의 텍스트로 설정
$ ("#cDiv").slideUp().hide();
$("#iDiv").html($(this).html())
}
// 이제 cDiv를 슬라이드 쇼
$("#cDiv").slideDown('slow')

마우스를 올리면 각 li 레코드가 추가되는 것을 볼 수 있습니다. mouseout 및 클릭 이벤트.

클릭 이벤트가 발생하면 cDiv를 SlideUp으로 제공해야 할 뿐만 아니라 다음에 iDiv를 클릭하기 전에 이를 숨기고 cDiv를 지워야 합니다. 이 두 가지 점이 매우 중요합니다. 이 두 가지 일을 하지 않으면 어떤 일이 일어날지 시험해 볼 수 있습니다.

li를 클릭할 때 현재 li의 html 콘텐츠를 iDiv에 복사하는 것을 잊지 마세요. 그렇지 않으면 컨트롤이 실질적인 효과를 발휘하지 못합니다. . . . .


3. Ajax를 사용하여 서버에서 드롭다운 목록의 값을 가져옵니다. 서버에서 드롭다운 목록의 값을 동적으로 가져와야 하는 경우가 많기 때문에 iDiv를 클릭할 때 먼저 jQuey의 ajax 메서드(또는 다른 ajax)를 통해 서버에서 데이터를 로드해야 합니다. 방법), 데이터 로드가 완료되면 방금 UL 목록 생성을 시작했습니다.

Ajax 요청의 데이터 소스로 WCF Servece를 사용하고 있습니다.

사용자 편의성을 높이기 위해 서버에서 데이터를 가져올 때 iDiv가 로드 이미지로 표시되도록 했습니다. . . . . . . . . . . .

코드 다운로드:

http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar 2. 재생되는 동영상 파일(플래시 또는 Silverlight 플레이어)을 새로 고치지 않고 전환하려면 jQuery의 추가 기능을 사용하세요.

이전에도 이런게 필요한 미니사이트가 있었습니다. 연구해봤는데 정말 효과가 있더군요.

http://haokan.lafaso.com/pretty.html 누구나 구경하실 수 있습니다. 나는 이것이 광고라고 생각하지 않습니다. 우리 대부분은 남자이므로 이것을 읽지 않을 것입니다. 헤헤. 단지 앞으로는 이 방법을 사용할 수 있을 거라 생각합니다.

이러한 플레이어는 모두 삽입 컨트롤이므로 삽입의 src 속성을 대체하여 다양한 동영상을 재생할 수 있습니다. 예:

jQuery의append() 메소드를 사용하면 embed의 src를 변경하고 div1의 html을 다시 바꿀 수 있습니다. 이는 페이지에서 ajax 기술을 사용하는 것과 같습니다.

코드 복사 코드는 다음과 같습니다.

$("#div1 embed"). 비어 있음() ;
var placeHolder = $("

")
var tempParent = $("

")
var embed = $("# div1 embed" );
embed.replaceWith(placeHolder);
tempParent.append(embed);
embed.attr("src", http://player.ku6.com/refer/DMFZdNYzKDEosiPG/ v.swf&auto =1);
placeHolder.replaceWith(tempParent.html())



3. jQuery를 사용하여 HTML용 머리글 및 바닥글 기능을 구현합니다.
PHP와 asp.net에는 헤더, 푸터 등의 컨트롤이 있는데, php에서는 include를 사용하지만, asp.net에서는 master나 ascx를 사용합니다. HTML의

은 어떻습니까? 나는 그런 적이 없다고 믿습니다. 그런데 고객이 사용자가 너무 많아서 걱정이라며 페이지를 html로 만들어야 한다고 요청했습니다. . . . .

바닥글과 머리글을 사용하면 이러한 부분의 내용을 수정해야 할 때 한 페이지만 수정하면 모든 페이지가 변경된다는 장점이 있습니다.

나중에 jquery의 load() 메서드를 사용하는 방법을 찾았습니다.

먼저 HTML에 두 개의 Div를 추가해야 합니다. 하나는 상단에, 다른 하나는 Id='header' 및 id='footer'를 갖는 것이 가장 좋습니다. .

그런 다음 서버 측에서는 header.html과 footer.html만 생성하면 됩니다.

페이지가 로드되면 jquery의 로드 메소드를 사용하여 header.html 및 footer.html을 로드합니다.


코드:

코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다.

$("#header").load("controls/header.html", function (response, status, xhr) {
if (status == "error") {
var msg = "서버 데이터 전송 오류입니다. 페이지를 새로고침하세요."
// $("#error").html(msg xhr.status " " xhr.statusText); msg);
}
});
// 서버에서 바닥글 로드
$("#footer").load("controls/footer.html", 함수(응답, 상태, xhr) ) {
if (status == "error") {
var msg = "서버 데이터 전송 오류입니다. 페이지를 새로고침하세요."
// $("#error").html(msg xhr .status " " xhr .statusText);
alert(msg);
}
})

가능하다면 몇 가지 jQuery 기술을 요약하여 공유하겠습니다. 나중에. . . . . . . . 나중에 드롭다운 상자 코드의 다운로드 주소도 알려드리겠습니다.
건배
닉
코드 다운로드:
http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：자바스크립트 oop_javascript 기술을 활용한 슬라이딩 메뉴 컨트롤 개발다음 기사：자바스크립트 oop_javascript 기술을 활용한 슬라이딩 메뉴 컨트롤 개발

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved