10px;">

                content2

                content3

Js点击事件代码：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

       $（document）.ready（function（）{

           $（'.easyui-accordionlia'）.click（function（）{

               vartabTitle=$（this）.text（）;

               varurl=$（this）.attr（"href"）;

               addTab（tabTitle,url）;

               $（'.easyui-accordionlidiv'）.removeClass（"selected"）;

               $（this）.parent（）.addClass（"selected"）;

           }）.hover（function（）{

               $（this）.parent（）.addClass（"hover"）;

           },function（）{

               $（this）.parent（）.removeClass（"hover"）;

           }）;

           functionaddTab（subtitle,url）{

               if （!

$（'#tabs'）.tabs（'exists',subtitle））{

                   $（'#tabs'）.tabs（'add',{

                       title:

subtitle,

                       content:

createFrame（url）,

                       closable:

true,

                       width:

$（'#mainPanle'）.width（）-10,

                       height:

$（'#mainPanle'）.height（）-26

                   }）;

               }else {

                   $（'#tabs'）.tabs（'select',subtitle）;

              }

               tabClose（）;

           }

           functioncreateFrame（url）{

               vars='

100%;height:

100%;">';

               return s;

           }

           functiontabClose（）{

               /*双击关闭TAB选项卡*/

               $（".tabs-inner"）.dblclick（function（）{

                   varsubtitle=$（this）.children（"span"）.text（）;

                   $（'#tabs'）.tabs（'close',subtitle）;

               }）

               $（".tabs-inner"）.bind（'contextmenu',function（e）{

                   $（'#mm'）.menu（'show',{

                       left:

e.pageX,

                       top:

e.pageY,

                   }）;

                   varsubtitle=$（this）.children（"span"）.text（）;

                   $（'#mm'）.data（"currtab",subtitle）;

                   return false;

               }）;

           }

           //绑定右键菜单事件

      functiontabCloseEven（）{

               //关闭当前

        $（'#mm-tabclose'）.click（function（）{

                   varcurrtab_title=$（'#mm'）.data（"currtab"）;

                   $（'#tabs'）.tabs（'close',currtab_title）;

               }）

               //全部关闭

        $（'#mm-tabcloseall'）.click（function（）{

                   $（'.tabs-innerspan'）.each（function（i,n）{

                       vart=$（n）.text（）;

                      $（'#tabs'）.tabs（'close',t）;

                   }）;

               }）;

               //关闭除当前之外的TAB

               $（'#mm-tabcloseother'）.click（function（）{

                   varcurrtab_title=$（'#mm'）.data（"currtab"）;

                   $（'.tabs-innerspan'）.each（function（i,n）{

                       vart=$（n）.text（）;

                       if （t!

=currtab_title）

                           $（'#tabs'）.tabs（'close',t）;

                   }）;

               }）;

               //关闭当前右侧的TAB

               $（'#mm-tabcloseright'）.click（function（）{

                   varnextall=$（'.tabs-selected'）.nextAll（）;

                   if （nextall.length==0）{

                      //msgShow（'系统提示','后边没有啦~~','error'）;

                       alert（'后边没有啦~~'）;

                       return false;

                   }

                   nextall.each（function（i,n）{

                       vart=$（'a:

eq（0）span',$（n））.text（）;

                       $（'#tabs'）.tabs（'close',t）;

                   }）;

                   return false;

              }）;

               //关闭当前左侧的TAB

               $（'#mm-tabcloseleft'）.click（function（）{

                   varprevall=$（'.tabs-selected'）.prevAll（）;

                   if （prevall.length==0）{

                       alert（'到头了，前边没有啦~~'）;

                       return false;

                   }

                   prevall.each（function（i,n）{

                       vart=$（'a:

eq（0）span',$（n））.text（）;

                       $（'#tabs'）.tabs（'close',t）;

                   }）;

                   return false;

               }）;

               //退出

               $（"#mm-exit"）.click（function（）{

                   $（'#mm'）.menu（'hide'）;

               }）

           }

       }）;

以上代码效果图：

三、最后点击菜单时需要在center域显示点击后的内容页面,代码如下：

20px;overflow:

hidden;"id="home">

WelcometojQueryUI!

本文已完到此结束。

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

Jquery EasyUi实战教程布局篇 EasyUi 实战 教程 布局

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。