jQuery EasyUI widget mise en page - Mise en page Mise en page

Fiez

• panneau
• redimensionnable

usage

Créer la mise en page (mise en page)

1, créer la mise en page (mise en page) tags.

Ajouter classe 'easyui-layout' à la balise <div>.

<Div id = class "cc" style = "easyui-layout" = "width: 600px; height: 400px;">
    <Div data-options = "région: 'nord', titre: 'Nord Titre', split: true" style = "height: 100px;"> </ div>
    <Div data-options = "région:« sud », titre: 'South Title', split: true" style = "height: 100px;"> </ div>
    <Div data-options = "région: 'est', titre:« Est », split: true" style = "width: 100px;"> </ div>
    <Div data-options = "région: 'west', titre: 'West', split: true" style = "width: 100px;"> </ div>
    <Div data-options = "région: 'centre', titre: 'title center'" style = "padding: 5px; fond: #EEE;"> </ div>
</ Div>

2, créer la mise en page (mise en page) sur toute la page.

<Class Body = "easyui-layout">
    <Div data-options = "région: 'nord', titre: 'Nord Titre', split: true" style = "height: 100px;"> </ div>
    <Div data-options = "région:« sud », titre: 'South Title', split: true" style = "height: 100px;"> </ div>
    <Div data-options = "région: 'est', titre:« Est », split: true" style = "width: 100px;"> </ div>
    <Div data-options = "région: 'west', titre: 'West', split: true" style = "width: 100px;"> </ div>
    <Div data-options = "région: 'centre', titre: 'title center'" style = "padding: 5px; fond: #EEE;"> </ div>
</ Body>

3, créer une mise en page imbriquée.

Notez que la disposition interne des panneaux West End sont repliés.

<Class Body = "easyui-layout">
    <Div data-options = "région: 'nord'" style = "height: 100px"> </ div>
    <Div data-options = "région: 'centre'">
		<div class = "easyui-layout" data-options = "ajustement: true">
			<Div data-options = "région: 'ouest', se sont effondrés: true" style = "width: 180px"> </ div>
			<Div data-options = "région: 'centre'"> </ div>
		</ Div>
    </ Div>
</ Body>

4, le contenu de la charge via ajax.

Mise en page (layout) est basé sur le panneau (panneau) a été créé. Chaque zone du panneau pour fournir un soutien intégré pour le chargement dynamique du contenu de l'URL. Utiliser la technologie de chargement dynamique, les utilisateurs peuvent faire leur mise en page affiche plus rapidement.

<Class Body = "easyui-layout">
    <Div data-options = "région:« west »href: 'west_content.php'" style = "width: 180px"> </ div>
    <Div data-options = "région:« centre », href: 'center_content.php'"> </ div>
</ Body>

Pliage disposition du panneau (Collpase Disposition du panneau)

. $ ( '# Cc') layout ();
// Réduire le panneau de l'ouest
. $ ( '# Cc') mise en page ( «effondrement», «west»);

Bouton pour ajouter un outil par le panneau occidental

$ ( '# Cc'). Mise en page ( 'ajouter', {
    région: «west»,
    largeur: 180,
    Titre: 'West Titre',
    scission: true,
    outils: [{
		iconCls: 'icône ajoutée »,
		gestionnaire: function () {alert ( 'ajouter')}
    }, {
		iconCls: «icon-remove ',
		gestionnaire: function () {alert ( 'supprimer')}
    }]
});

Options de mise en page (Options de mise en page)

Panneau Options régional (Région Options de panneau)

Panneau Options régional (options du panneau de région) est définie dans le composant panneau (panneau), la quelques propriétés communes et de nouvelles suivent:

manière