Maison > interface Web > js tutoriel > Tutoriel pratique jQuery EasyUi layout_jquery

Tutoriel pratique jQuery EasyUi layout_jquery

WBOY
Libérer: 2016-05-16 15:17:51
original
1180 Les gens l'ont consulté

jQuery EasyUI Layout est un framework de mise en page basé sur jQuery. J'ai utilisé Jquery EasyUi pour la première fois aujourd'hui. J'ai simplement créé une page de mise en page et je voulais la partager avec vous, mais je ne sais pas comment. la compatibilité du navigateur de Jquery EasyUi est.

Le rendu final est le suivant :

Avant d'utiliser Jquery EasyUi pour développer, vous devez d'abord citer les fichiers Js et Css de Jquery EasyUi. La citation est la suivante :

1

2

3

4

<script src="../jquery.min.js" type="text/javascript"></script>

<script src="../jquery.easyui.min.js" type="text/javascript"></script>

<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />

<link href="../themes/icon.css" rel="stylesheet" type="text/css" />

Copier après la connexion

OK, commençons notre mise en page.

1. Utilisez le panneau de mise en page pour la mise en page globale et collez directement le code :

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

<title>LayOut</title>

<script src="../jquery.min.js" type="text/javascript"></script>

<script src="../jquery.easyui.min.js" type="text/javascript"></script>

<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />

<link href="../themes/icon.css" rel="stylesheet" type="text/css" />

<script language="JavaScript">

$(document).ready(function () {

});

</script>

<style>

.footer {

width: 100%;

text-align: center;

line-height: 35px;

}

.top-bg {

background-color: #d8e4fe;

height: 80px;

}

</style>

 

 

<div region="north" border="true" split="true" style="overflow: hidden; height: 80px;">

<div class="top-bg"></div>

</div>

<div region="south" border="true" split="true" style="overflow: hidden; height: 40px;">

<div class="footer">版权所有:<a href="http://www.kwstu.com">酷网工作室</a></div>

</div>

<div region="west" split="true" title="导航菜单" style="width: 200px;">

</div>

<div id="mainPanle" region="center" style="overflow: hidden;">

</div>

Copier après la connexion

L'effet du code ci-dessus est le suivant (terminez la première étape partielle) :

2. Ajouter le menu de gauche

Le menu de gauche utilise une combinaison du contrôle de panneau évolutif et du contrôle d'arborescence de jquery easyui. Placez simplement le contrôle de panneau évolutif et le contrôle d'arborescence directement dans le domaine ouest et écrivez un événement de clic :

.

Code de la page :

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

<div region="west" split="true" title="导航菜单" style="width: 200px;">

<div id="aa" class="easyui-accordion" style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;">

<div title="博文管理" iconcls="icon-save" style="overflow: auto; padding: 10px;">

<ul class="easyui-tree">

<li>

<span>Folder</span>

<ul>

<li>

<span>Sub Folder 1</span>

<ul>

<li>

<span><a target="mainFrame" href="http://www.baidu.com">审核博客</a></span>

</li>

<li>

<span><a href="#">File 12</a></span>

</li>

<li>

<span>File 13</span>

</li>

</ul>

</li>

<li>

<span>File 2</span>

</li>

<li>

<span>File 3</span>

</li>

</ul>

</li>

<li>

<span><a href="#">File21</a></span>

</li>

</ul>

</div>

<div title="新闻管理" iconcls="icon-reload" selected="true" style="padding: 10px;">

content2

</div>

<div title="资源管理">

content3

</div>

</div>

</div>

Copier après la connexion

Code événement clic 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

<script language="JavaScript">

$(document).ready(function () {

$('.easyui-accordion li a').click(function () {

var tabTitle = $(this).text();

var url = $(this).attr("href");

addTab(tabTitle, url);

$('.easyui-accordion li div').removeClass("selected");

$(this).parent().addClass("selected");

}).hover(function () {

$(this).parent().addClass("hover");

}, function () {

$(this).parent().removeClass("hover");

});

function addTab(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();

}

function createFrame(url) {

var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';

return s;

}

function tabClose() {

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

$(".tabs-inner").dblclick(function () {

var subtitle = $(this).children("span").text();

$('#tabs').tabs('close', subtitle);

})

$(".tabs-inner").bind('contextmenu', function (e) {

$('#mm').menu('show', {

left: e.pageX,

top: e.pageY,

});

var subtitle = $(this).children("span").text();

$('#mm').data("currtab", subtitle);

return false;

});

}

//绑定右键菜单事件

function tabCloseEven() {

//关闭当前

$('#mm-tabclose').click(function () {

var currtab_title = $('#mm').data("currtab");

$('#tabs').tabs('close', currtab_title);

})

//全部关闭

$('#mm-tabcloseall').click(function () {

$('.tabs-inner span').each(function (i, n) {

var t = $(n).text();

$('#tabs').tabs('close', t);

});

});

//关闭除当前之外的TAB

$('#mm-tabcloseother').click(function () {

var currtab_title = $('#mm').data("currtab");

$('.tabs-inner span').each(function (i, n) {

var t = $(n).text();

if (t != currtab_title)

$('#tabs').tabs('close', t);

});

});

//关闭当前右侧的TAB

$('#mm-tabcloseright').click(function () {

var nextall = $('.tabs-selected').nextAll();

if (nextall.length == 0) {

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

alert('后边没有啦~~');

return false;

}

nextall.each(function (i, n) {

var t = $('a:eq(0) span', $(n)).text();

$('#tabs').tabs('close', t);

});

return false;

});

//关闭当前左侧的TAB

$('#mm-tabcloseleft').click(function () {

var prevall = $('.tabs-selected').prevAll();

if (prevall.length == 0) {

alert('到头了,前边没有啦~~');

return false;

}

prevall.each(function (i, n) {

var t = $('a:eq(0) span', $(n)).text();

$('#tabs').tabs('close', t);

});

return false;

});

//退出

$("#mm-exit").click(function () {

$('#mm').menu('hide');

})

}

});

Copier après la connexion

Rendu du code ci-dessus :

3. Lorsque vous cliquez enfin sur le menu, vous devez afficher la page de contenu cliquée dans le champ central. Le code est le suivant :

1

2

3

4

5

<div id="tabs" class="easyui-tabs" fit="true" border="false">

<div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">

<h1>Welcome to jQuery UI!</h1>

</div>

</div>

Copier après la connexion

Cet article se termine ici. J'espère que partager cet article sera utile à tout le monde.

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal