JQuery EasyDrag를 사용하여 드래그 가능한 Div를 팝업하고 동시에 Div에 값을 전달한 다음 Div_jquery의 선택된 값을 반환합니다.

原来我们要写一个客户端的特效，要写一两天的JavaScript，然后再调试一两天，才可以看见端倪。现在我们只要使用JQuery和他的 plugin，就可以任意的实现我们脑海中的特效，感谢他们的编写者对人类的贡献（一百个西红柿砸过来。。。。。。。。。。。。。。）。

　　我今天实现的需求是一个需要从列表页面中选择要导出到word中的列，然后在将选中列的内容导出到word中，同时为了增加通用性，列的个数不是固定的，也就是说这张表格可能是4列，也可能是5列，待选择的列数目不固定。例如：有下面的一张表格，然后我们要打印除薪水外的其他列。　　

姓名	年龄	性别	薪水
张三	19	男	10000
张三	19	男	10000
张三	19	男	10000

내 디자인은 먼저 배경 코드를 사용하여 이 테이블의 헤더를 반복하여 다음 문자열을 형성하는 것입니다.

1-이름--2-나이--3-성별--4-급여, 이 문자열을 히든필드에 저장한 후 자바스크립트로 읽어 팝업 Div의 체크박스에 해당하는 html을 동적으로 추가하고,

<

 

그런 다음 선택 후 선택한 값이 해당 문자열로 구성됩니다. 예를 들어 이름, 나이, 성별을 선택하여 구성합니다. 1-이름--2-나이--3Sex, 다른 숨겨진 필드에 저장하고, 배경 코드에서 선택한 문자열을 읽고, 테이블의 해당 열을 단어로 내보냅니다.

동시에 이 팝업 페이지를 드래그 가능하게 만들기 위해 EasyDrag jQuery 플러그인이 사용되며 http에서 다운로드할 수 있습니다. ://fromvega.com/wordpress/2007 /07/14/easydrag-jquery-plugin/다운로드하세요.

이 플러그인은 매우 유용하고 간단합니다.

                                                                                                             >
}

) HTML 코드

코드 복사


코드는 다음과 같습니다.

제목

EasyDrag는 드래그 가능한 영역을 지정할 수도 있습니다. 예를 들어 전체 div는 제목을 통해서만 드래그할 수 있습니다.

코드 복사


코드는 다음과 같습니다.


$(document).ready ( function()

{
$("#divPanel").easydrag() ;
$("#divPanel").setHandler("divTitle")

} ); 코드 복사

코드는 다음과 같습니다.

새 웹 프로젝트 페이지

;제목

="butonPanel" style="text-align:right;">

<필드세트>
<전설>






<br>





源代码下载