Пример за Javascript базиран сайт ( Ver.: 1.0.1 )

1. Начало

Accordion и InfoPanel са компоненти, които могат да бъдат използвани във браузъри с активиран JavaScript : Firefox, Opera и Internet Explorer.

2. Компоненти

Тези компоненти не са самостоятелни и изискват Ext JS библиотеките за да работят. За повече детайли вижте Ext JS - JavaScript Library. Те съдържат също много други компоненти.

3. Употреба

Accordion може да бъде използван навсякъде във уеб страници за:

Навигация
Прозорци с инструменти
Детайли
Логин форми
Диалози с опции
Бележки

... или всичко друго, което талантливи уеб дизайнери могат да измислят.

4. Дърпане и влачене

Всички панели могат да се дърпат и влачат и веднъж откачени са с променлив размер (default). Ако нямате нужда от тази функция можете да я изключите.

Можете и да завлачите откачен панел до полето Accordions вдясно.

5. Настройки

Има много настройки на вида и функционалността като сенки, pin и независим режим, анимации и други.

Вие можете да ги активирате и изключвате от толбара горе.

Панелите също запазват своя статус (размер, позиция, разгъване) при презареждане на страницата.

7. Цветова схема

Изберете тема:

8. Пари и други такива

Авторът на този инфо панел и акордеон демонстрация ги е разработил за лична употреба, а не за пари.

9. Google търсене

10. Полезни връзки

Въведение

Тази страница е Инфо панел за Accordion javascript класовете и употребата им. Тя сащо така съдържа инструкции стъпка по стъпка за интеграцията на Accordion във вашата уеб страница.

За повече информация: Ext JS - JavaScript Library

These classes and example are discussed in details in this Ext JS Forum thread.

The version 1.0 class names were Ext.InfoPanel and Ext.Accordion what was directly under the root name of the Ext JS Library: Ext. This might cause name conflicts in the future. After discussion with author of Ext JS Library Jack Slocum I have decided to put them in the separate name space Ext.ux. ux was recommended by Jack and stands for user extensions.

New names of classes are now Ext.ux.InfoPanel and Ext.ux.Accordion and new file names are Ext.ux.InfoPanel.js and Ext.ux.Accordion.js.

Users upgrading from version 1.0 will have to change include links in the heads of pages to read:

<script type="text/javascript" src="Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="Ext.ux.Accordion.js"></script>

However, they do not need to rewrite the code of their applications but they can add next lines at the beginning of their code as there is no namespace conflict yet:

Ext.InfoPanel = Ext.ux.InfoPanel;
Ext.Accordion = Ext.ux.Accordion;
Ext.AccordionStateManager = Ext.ux.AccordionStateManager;

These lines are not required for new users who have not written their applications yet.

Software on this page is provided as is in the hope that it will be useful with no direct or implied warranty whatsoever. You can use it, modify it, copy it or do anything else with it.

This is the example of the fixed height Accordion. Panels undocked from this Accordion are local to the tab "Accordions"; they hide when you change the tab. Left-hand panels are global to the page; they stay visible when you change the tab.

The Accordion is resizable down and right.

This example also shows how to use the wrapped Accordion. The html markup consists of three nested divisions each with its purpose.

<div id="acc2-ct">
<div id="acc2-wrap">
<div id="acc2-body">
</div>
</div>
</div>

acc2-ct is outermost container div that should have size and it is the div which is resized. Its id is used in new Ext.ux.Accordion('acc2-ct', {...});

acc2-wrap is div that will be wrapped with nice surrounding. This div should have a border if you want one and its id is passed as wrapEl:'acc2-wrap' to the Accordion configuration.

acc2-body should not have any border nor margin and it is passed as body:'acc2-body' to the Accordion configuration. Panels are direct children of this division.

Panel 2-1

Morbi eros nunc, adipiscing vitae, adipiscing quis, feugiat ac, erat. Pellentesque auctor, ligula quis commodo egestas, urna risus luctus ante, nec rutrum tortor ante eget erat. Donec venenatis elit sed justo.

Panel 2-2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pellentesque. Duis fermentum metus nec nisl. Suspendisse potenti. Vivamus id nibh ut neque sollicitudin ullamcorper. Vivamus quis augue.

Panel 2-3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pellentesque. Duis fermentum metus nec nisl. Suspendisse potenti. Vivamus id nibh ut neque sollicitudin ullamcorper. Vivamus quis augue.

Panel 2-4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pellentesque. Duis fermentum metus nec nisl. Suspendisse potenti. Vivamus id nibh ut neque sollicitudin ullamcorper. Vivamus quis augue.

Panel 2-5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pellentesque. Duis fermentum metus nec nisl. Suspendisse potenti. Vivamus id nibh ut neque sollicitudin ullamcorper. Vivamus quis augue.

This page shows independent panels, panels without an Accordion, and various methods of panel creation. The creation method of each panel is explained in its body. Panel that comes last in the DOM is always the topmost panel.

These are independent panels placed in the plain div. They are neither draggable nor resizable and there is no Accordion used here.

1. Panel - expanded by default

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pellentesque. Duis fermentum metus nec nisl. Suspendisse potenti. Vivamus id nibh ut neque sollicitudin ullamcorper. Vivamus quis augue. Nulla quis ante ut nunc scelerisque interdum. Phasellus sit amet eros. Aenean sodales nulla vel sem. Quisque posuere.

2. Panel - animation disabled

Nam venenatis nonummy quam. Integer semper. Ut eget dolor sed nunc ornare egestas. Donec eget quam eget ipsum semper tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sodales velit ac dolor. Fusce et odio in massa ultricies vehicula. Donec dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

3. Panel - only button expands

Ut placerat. Aenean quis erat. Suspendisse pede turpis, cursus at, dignissim eget, vulputate nec, turpis. Nunc ut nibh consectetuer nunc accumsan consequat. Quisque id purus. Mauris a lacus placerat libero dictum eleifend. Aenean sit amet pede vitae lectus egestas convallis. Phasellus vel quam vitae leo lobortis aliquet. Etiam imperdiet augue in orci. Aliquam vitae risus et lorem rutrum tincidunt. Ut ut dolor ac nisi eleifend pretium. Cras feugiat, erat a ornare vulputate, nisi ligula consequat odio, at lacinia nisl eros in libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla velit mauris, tempor nec, viverra porttitor, vestibulum posuere, tortor. Pellentesque facilisis. Vestibulum rutrum velit at lectus. Praesent leo.

5. Title and body from markup

Panel created from html markup

Markup:

<div>5. Panel</div>
<div>
<div class="text-content">
	This text.
</div>
</div>

Code:

new Ext.ux.InfoPanel('ipanel-5', {
useShadow: true
, draggable: true
, duration: 1.0
});

7. Auto-created, body from markup

Markup:

<div id="ipanel-7-body">
<div class="text-content">
	<h3>7. Auto-created...</h3>
<p>&nbsp;</p>
<p>Markup:</p>
...
</div>
</div>

Code:

new Ext.ux.InfoPanel({
	title: '7. Auto-created...'
, id: 'ipanel-7'
, desktop: 'panels-tab'
, bodyEl: 'ipanel-7-body'
, autoCreate: true
, draggable: true
, useShadow: true
, resizable: true
});

You are visitor number 1924752 since 13 Jul 07.