jquery 팝업 레이어 selector_jquery를 기반으로 하는 boxy 팝업 레이어 대화 상자 플러그인 확장 애플리케이션

우리는 디자인을 위해 인기 있는 jquery를 사용하는 동시에 확장 효과가 뛰어난 boxy 팝업 플러그인을 선택했습니다. (boxy에 대한 자세한 내용은 Zhang Xinxu의 블로그 http://www.zhangxinxu.com/을 참조하세요. wordpress/?p=318). 다음은 선택자 프레임워크로서 boxy의 적용을 소개합니다.

채용사이트를 이용해보신 분들이라면 셀렉터(업종, 직책, 지역을 선택하실 때 클릭하시면 뜨는 내용)에 대해 잘 알고 계실 거라 믿습니다. 주로 IE6을 겨냥한 스타일 디버깅에 있습니다. 여기서는 산업, 직위 및 지역 선택기를 소개합니다. 다운로드한 데모에는 이 세 가지 선택기가 포함되어 있습니다.

산업 선택기: 연결 없음, 호출 문은 Boxy.industry(value, callback, options)이고, 매개변수 값은 선택된 값 숫자 집합(문자열 유형, 쉼표로 구분)이며, 콜백은 다음과 같습니다. 콜백 함수를 정의할 수 있으며, 콜백에 전달되는 값은 업종 선택기(문자열 유형, 쉼표로 구분)에서 선택한 항목의 숫자 집합이며, 옵션은 boxy 플러그인의 선택적 매개변수입니다.

호출 예: 1번과 2번 산업을 선택하고 선택기 제목을 "Industry Category Selector"로 정의합니다.

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

$("#industry").click(function() {
Boxy.industry("1,2", function(val) {
alert("선택한 항목: " val); { title: "산업 카테고리 선택기" })
return false

작업 선택기: 2단계 연결, 호출 문은 Boxy.job(값, 표시, 콜백, 옵션), 매개변수 값은 선택된 값 숫자 집합(문자열 유형, 숫자 사이) 쉼표- 구분, b로 시작하는 것은 주요 직업 범주 선택을 나타내고, s로 시작하는 것은 하위 범주 선택을 나타냅니다. 표시된 매개변수는 표시된 직업 범주의 수를 나타내며, 매개변수 callback은 정의 가능한 콜백 함수이며, 콜백에 전달되는 값은 다음과 같습니다. 위치 선택기. 선택된 항목에 대한 숫자 세트(문자열 유형, 쉼표로 구분), 옵션은 박스형 플러그인의 선택적 매개변수입니다.
호출 예: 직업 하위 범주 번호 1, 직업 범주 번호 2를 선택하고 선택기 이름을 직위 범주 선택기로 정의

코드 복사 코드는 다음과 같습니다. $("#job").click(function() {

Boxy.job("s1,b2" , "2", function(val) {

alert("선택함: " val);
}, { title: "위치 카테고리 선택기" })
return false;




위치 선택기: 세 개의 캐스케이드, 호출 문은 Boxy.area(value, 표시, 콜백, 옵션), 매개변수 값은 선택한 값입니다. 숫자 집합(문자열 유형) , 쉼표로 구분되며, p로 시작하는 것은 지방 선택을 의미하고, c로 시작하는 것은 도시 선택을 의미하고, d로 시작하는 것은 카운티 선택을 의미합니다. 표시된 매개변수는 표시되는 지역의 수를 나타내며, 매개변수 콜백은 정의 가능합니다. 콜백 함수, 콜백에 전달된 값은 지역 선택기에서 선택한 항목의 숫자 집합(문자열 유형, 숫자는 쉼표로 구분됨)이고 옵션은 boxy 플러그인의 선택적 매개 변수입니다.

호출 예: 1과 2번 카운티 또는 구역을 선택하고 선택기의 이름을 작업 영역 선택기로 정의



코드 복사

코드는 다음과 같습니다. $("#city").click(function() { Boxy.area("d1,c7", "1,724", function (val) {

alert("선택함: " val)

}, { title: "작업 영역 선택기" })
return false



버그가 있습니다:

1. IE6 체크박스의 여백 설정이 왜곡됩니다. IE6의 체크박스 테두리 지우기는 유효하지 않지만 다른 브라우저에서는 유효합니다. 사람들은 스타일을 통일하기 위해 전체적으로 입력 여백/패딩을 0으로 설정합니다. IE6은 무시할 수만 있습니다.

2. IE8 환경에서 CSS 설정 옵션 의 호버 효과가 느리거나 응답하지 않는 경우가 있습니다. 이 문제는 IE6을 포함한 다른 브라우저에서는 발생하지 않으며, js 코드 솔루션은 다음과 같습니다. 옵션이 아닙니다. 코드 호버 응답이 여전히 약간 느립니다. IE8에 왜 이런 문제가 있는지 이해가 되지 않습니다.

3. IE6에서는 지나치게 긴 선택 항목의 표시 영역이 부족하여 상위 태그에 자동으로 표시되지 않고 대신 표시되는 텍스트가 선택한 항목 자체에 표시됩니다. 스타일에 앨리어싱이 발생합니다. 이 문제를 해결하는 방법을 모르겠습니다. 누구든지 알려주실 수 있나요?

4. 아직 찾지 못했습니다. (아마도 IE6에서 OK 버튼의 호버 효과에 대해 이야기하실 것입니다. 이것은 버그는 아니지만 관련이 없으며 너무 게으른 것이므로 변경할 수 없습니다. 레이블을 로 변경했지만 가 정말 마음에 들지 않아서 하루 종일 IE6에서 쓸데없는 일을 했습니다.

장점 :

1. 당연히 예쁘죠!

2. 세 개의 선택자는 각각 세 개의 계단식 관계의 선택자를 나타냅니다. 데모의 데이터 소스와 메인 프레임의 텍스트를 직접 수정하여 다른 선택자로 변경할 수 있습니다.

3. 아직 개선의 여지가 있는 데모의 CSS 스타일을 통합하여 게시할 수 있는 사람은 누구입니까?

선택기 외부 프레임의 둥근 모서리 효과는 png 이미지를 사용하여 구현된다는 점을 조용히 말씀드리겠습니다. 투명도를 변경하려면 IE6을 그대로 두고 이미지를 다시 실행해야 합니다. , 일반적으로 사용되는 또 다른 방법을 사용할 수 있습니다. 둥근 모서리 방법(그림 없음, CSS 스타일만), 이 방법은 boxy 플러그인에 작성되었으며(스타일 파일을 포함하여 주석 처리했습니다) 데모의 round-corner.html 파일에도 도입된 둥근 모서리 방법 이제 ExtendedBoxy.html이 선택기의 데모 파일입니다. Boxy에 대한 다른 두 개의 HTML 파일은 Zhang Xinxu가 작성했습니다. Zhang Xinxu의 블로그 http://www.zhangxinxu.com/php/에 좋은 내용이 많이 있습니다.

데모 다운로드 주소: /201011/yuanma/jquery-plugin-ExtendedBoxy.rar