> 웹 프론트엔드 > JS 튜토리얼 > JQuery EasyDrag를 사용하여 드래그 가능한 Div를 팝업하고 동시에 Div에 값을 전달한 다음 Div_jquery의 선택된 값을 반환합니다.

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

WBOY
풀어 주다: 2016-05-16 18:43:49
원래의
1367명이 탐색했습니다.

原来我们要写一个客户端的特效,要写一两天的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/다운로드하세요.

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

                                                                                                             >
}

코드 복사


코드는 다음과 같습니다.



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


코드 복사


코드는 다음과 같습니다.


$(document).ready ( function()
{
$("#divPanel").easydrag() ;
$("#divPanel").setHandler("divTitle")
} ); 코드 복사
코드는 다음과 같습니다.





New Web Project





새 웹 프로젝트 페이지




;제목


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





<필드세트>
<전설>












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