Visualização combinada Visão plana Exibição em árvore
Tópicos [ Anterior | Próximo ]
toggle
Muthu RP
RE: How to use alloy UI Step by step
22 de Maio de 2013 06:21
Resposta

Muthu RP

Ranking: New Member

Mensagens: 17

Data de entrada: 2 de Maio de 2013

Mensagens recentes

Hi...
I wanted to use alloy ui Application....
example, I need to use tab menu from alloy UI, how can bring from alloy ui folder to my liferay page...................


Thanks
Muthu
Vishal Panchal
RE: How to use alloy UI Step by step
22 de Maio de 2013 12:00
Resposta

Vishal Panchal

Ranking: Expert

Mensagens: 280

Data de entrada: 20 de Maio de 2012

Mensagens recentes

Hi Muthu,

You can refer below link.
http://deploy.alloyui.com/demos

And for the tab-menu refer this http://deploy.alloyui.com/demos/tabs-menu-plugin/
You can got the code for specific demo that how it has implemented by right click > view page source

Hope it helps.!

Thanks&Regards,
Vishal R. Panchal
Johan de jong
RE: How to use alloy UI Step by step
26 de Maio de 2013 07:51
Resposta

Johan de jong

Ranking: Junior Member

Mensagens: 41

Data de entrada: 6 de Fevereiro de 2012

Mensagens recentes

You DON'T need to include the Alloyui in your pages if you use it with Liferay.

Just visit the demo-site of alloyui, pick what you want and include it on the page you created. Liferay puts all Alloyui code in the header of every page, so you only have to create smart thingies with Alloyui.

for example (as descibed in the post above) enter this on your page:
 1
 2<div id="wrapper">
 3    <h1>Alloy - tabs Demo</h1>
 4
 5    <div id="demo">
 6        <h2>From markup</h2>
 7        <div class="aui-button-holder">
 8            <input id="disable1" name="disable1" type="button" value="Disable Tab 2" />
 9            <input id="add1" name="add1" type="button" value="Add a new tab" />
10            <input id="remove1" name="remove1" type="button" value="Remove the last tab" />
11        </div>
12        <div id="markupTabs">
13            <ul class="aui-tabview-list aui-widget-hd" id="test">
14                <li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Hello A</a></li>
15                <li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Hello B</a></li>
16                <li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Hello C</a></li>
17            </ul>
18
19            <div class="aui-tabview-content aui-widget-bd" id="testContent">
20                <div class="aui-tabview-content-item">
21                    <h3>1. New tab content</h3><br />
22                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
23                </div>
24                <div class="aui-tabview-content-item">
25                    <h3>2. New tab content</h3><br />
26                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
27                </div>
28                <div class="aui-tabview-content-item">
29                    <h3>3. New tab content</h3><br />
30                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
31                </div>
32            </div>
33        </div>
34
35        <h2>From script</h2>
36        <div id="scriptTabs"></div>
37    </div>
38</div>

The above will create a bunch of DIV's on your page.
After that put this Javascript code block on your page:
 1
 2<script type="text/javascript" charset="utf-8">
 3
 4AUI().ready(
 5    'aui-tabs', 'substitute',
 6    function(A) {
 7        var tabs1 = new A.TabView(
 8            {
 9                boundingBox: '#markupTabs',
10                listNode: '#test',
11                contentNode: '#testContent'
12            }
13        );
14
15        tabs1.render();
16
17        A.on(
18            'click',
19            function(event) {
20                var buttonValue = this.get('value');
21
22                if (this.hasClass('enableTab')) {
23                    tabs1.enableTab(1);
24                    buttonValue = buttonValue.replace(/Enable/, 'Disable');
25                }
26                else {
27                    tabs1.disableTab(1);
28                    buttonValue = buttonValue.replace(/Disable/, 'Enable');
29                }
30
31                this.toggleClass('enableTab');
32                this.set('value', buttonValue);
33            },
34            '#disable1'
35        );
36
37        var dummyContent = '<h3>{tabNumber}. New tab content</h3><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
38
39        A.on(
40            'click',
41            function(event) {
42                var tabNumber = (tabs1.get('items').length + 1);
43
44                tabs1.addTab(
45                    {
46                        label: 'Tab' + tabNumber,
47                        content: A.Lang.substitute(dummyContent, {tabNumber: tabNumber}),
48                        active: true
49                    }
50                );
51            },
52            '#add1'
53        );
54
55        A.on(
56            'click',
57            function(event) {
58                var tabNumber = (tabs1.get('items').length - 1);
59
60                tabs1.removeTab(tabNumber);
61            },
62            '#remove1'
63        );
64
65        window.tabs2 = new A.TabView(
66            {
67                boundingBox: '#scriptTabs',
68                items: [
69                    {label: 'Hello 1', content: 'This my content 1'},
70                    {label: 'Hello 2', content: 'This my content 2'},
71                    {label: 'Hello 3', content: 'This my content 3'}
72                ]
73            }
74        );
75
76        tabs2.render();
77    }
78);
79
80</script>

This will firestart the ALLOYUI scripts, and do the magic.

Every component of ALLOYUI has a name, if you want to use it you have to give the name of this component in the beginning:
1AUI().ready(
2    ]'aui-tabs', 'substitute',
3    function(A) {

Now you can play around with all DIV's on your page:
A.one tells the code there is one element on the page (or the first) that you want to play with
A.all tells the code there is one or more elements on the page that you want to play with.

Read more here: search Alloyui working with Ajax on google ( my post was marked as spam when i included a link)
Subhash Pavuskar
RE: How to use alloy UI Step by step
26 de Maio de 2013 09:49
Resposta

Subhash Pavuskar

Ranking: Regular Member

Mensagens: 234

Data de entrada: 12 de Março de 2012

Mensagens recentes

Hi ,

For your reference

Demo

Tutorial

Example

Hope this may help you !!