/www/reference/examples/index-new.html
HTML | 301 lines | 282 code | 19 blank | 0 comment | 0 complexity | 7fc086da6545db363ea5747152916908 MD5 | raw file
Possible License(s): GPL-2.0
- <!DOCTYPE html>
- <html>
- <head>
- <title>JX Example</title>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="lib/mootools-core.js"></script>
- <script type="text/javascript" src="lib/mootools-more.js"></script>
- <script type="text/javascript" src="lib/jxlib.standalone.uncompressed.js"></script>
- <script src="js/locale.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/tests.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- window.addEvent('load', function() {
- //Change this to toggle debug mode.
- Jx.debug = true;
- console.log(Jx.debug);
-
- var mainSplitter = new Jx.Splitter('splitMain', {
- containerOptions: [{resizeWithWindow: true,width: 200},{resizeWithWindow: true}]
- });
-
- mainSplitter.elements[0].set('id','splitMainLeft');
- var mainTabs = new Jx.TabBox({
- parent: mainSplitter.elements[1]
- }).add(new Jx.Tab({
- label : {set:'Examples',key:'navigation',value:'About'},
- // adding custom class 'tabContentExample' to add/remove the background grid on every tab opened
- contentTemplate : '<div class="tabContent tabContentExample"></div>',
- contentURL : 'about.html'
- }));
- // open last open example from cookie ?
- var lastExample = Cookie.read('JxExamples.CurrentExample');
- lastExample = lastExample && lastExample.contains(",") ? lastExample.split(",") : false;
- if(lastExample) {
- /*
- var lastTab = new Jx.Tab({
- label : {set:'Examples',key:'navigation',value:lastExample[1]},
- contentURL : lastExample[0],
- activeTabClass : 'tabContentActive tabContentActiveExamples',
- close : true,
- // setting this to active slows down the page load a bit...
- active : false,
- cacheContent: true,
- loadOnDemand: true
- });
- // event on content loaded to load the scripts
- lastTab.addEvents({
- 'contentLoaded': function() {
- // COMMENT:
- // somehow the custom event is fired too soon so the examples don't find a tabContentActiveExamples class..
- this.content.fireEvent('loadAjax');
- },
- 'down': function() {
- Cookie.write('JxExamples.CurrentExample', [this.options.contentURL,this.options.label.value]);
- },
- 'close': function() {
- if(this.tabSet.tabs.length == 1) {
- Cookie.write('JxExamples.CurrentExample', false);
- }
- }
- });
- mainTabs.add(lastTab);
- */
- }
- // custom function to find out if a tab is already loaded
- mainTabs.hasTabByURL = function(url) {
- var t = this.tabSet.tabs,
- i = t.length;
- while(i--) {
- if(t[i].options.contentURL == url) {
- return t[i];
- }
- }
- return false;
- }
- var mainTree = new Jx.Tree({
- parent: mainSplitter.elements[0],
- select: true,
- onClick: function(el) {
- el = $jx(el);
- if (el instanceof Jx.Tree.Item) {
- openTab(el);
- }
- }});
- var items = {
- 'Jx-Examples': [
- {'About':'about.html'},
- {'Page-Layout' : [
- {'Layout' :'layout.html'},
- {'Splitter' : 'splitter.html'},
- {'Splitter-Integrated' : 'splitter_advanced.html'},
- {'Container-Managers': [
- {'Container' : 'container.html'},
- {'Column-layout': 'columns.html'}
- ]}
- ]},
- {'Panels-and-Dialogs' : [
- {'Panel' :'panel.html'},
- {'Panel-Set' : 'panelset.html'},
- {'Panels-Integrated' : 'panel_advanced.html'},
- {'Dialog' : 'dialog.html'},
- {'Dialogs-Integrated' : 'dialog_advanced.html'}
-
- //{'File-Upload-Panel' : 'file_upload.html' }
- ]},
- {'Lists' : [
- {'Grid' : 'grid.html'},
- //{'Paginated-Grid' : 'paging-grid.html'},
- {'Grid-Inline-Editor' : 'grid_editor.html'},
- {'Tree' : 'tree.html'},
- {'List-View' : 'list.html'}
- ]},
- {'Bars-and-Buttons' : [
- {'Toolbar' :'toolbar.html'},
- {'Buttons' : [
- {'Basic' : 'button.html'},
- {'Flyouts' : 'flyout.html'},
- {'Flyouts-Integrated' : 'flyout_advanced.html'},
- {'Multi' : 'multi.html'},
- {'Color' : 'color.html'}
- ]},
- {'Tabs':[
- {'Tabs' : 'tab.html'},
- {'Tab-Set' : 'tab_set.html'},
- {'Tabs-Integrated' : 'tab_box_advanced.html'}
- ]},
- {'Menus': [
- {'Menu-button' : 'menu.html'},
- {'Menu-bar' : 'menu_bar.html'},
- {'Context-Menu' : 'menu_context.html'}
- ]}
- ]},
- {'Extras' : [
- {'Forms' : 'forms.html'},
- {'Notification' : 'notification.html'},
- {'Custom-Scrollbars' : 'custom_scrollbars.html'},
- {'Progress-Bar' : 'progressbar.html'},
- {'Slider' : 'slider.html'},
- {'Editor' : 'editor.html'}
- ]},
- {'Adaptors' : [
- {'Tree-adaptor': 'tree_adaptors.html'},
- {'Combo-adaptor': 'adaptor_combo.html' }
- ]}
- ]
- };
- var openExamples = [];
-
- function openTab(item) {
- var i = item.options.label.value,
- v = item.options.contentURL;
- item.setBusy(true);
- var tabExists = mainTabs.hasTabByURL(v);
- if(!tabExists) {
- openExamples.push(v);
- var newTab = new Jx.Tab({
- label : {set:'Examples',key:'navigation',value:i},
- contentURL : v,
- activeTabClass : 'tabContentActive tabContentActiveExamples',
- // adding custom class 'tabContentExample' to add/remove the background grid on every tab opened
- contentTemplate : '<div class="tabContent tabContentExample"></div>',
- close : true,
- active : true,
- cacheContent : true
- });
- // event on content loaded to load the scripts
- newTab.addEvents({
- 'contentLoaded': function() {
- newTab.content.fireEvent('loadAjax');
- item.setBusy(false);
- var tagsTmp = this.req.response.text.getTags('script', true),
- tags = [],
- headlines = newTab.content.getElements('h2');
- tagsTmp.each(function(t) {
- // COMMENT: any other better 'regex' test for the script ? :)
- if(t.test('id=')) {
- t = t.split("\n");
- t.pop(); // clear first script line with id
- t.shift(); // clear last script line
- tags.push(t.join("\n"));
- }
- });
- beautifyDemoScripts(headlines, tags);
- makeLinksForApi(newTab.content.getElements('a'));
- },
- // anything we can do when the content load fails? shouldn't happen on the examples page ;)
- 'contentLoadFailed': function() {
- //item.setBusy(false);
- },
- // if a script error occurs, the waiting icon won't stop, here we stop it when the tab is closed
- 'close': function() {
- item.setBusy(false)
- if(this.tabSet.tabs.length == 1) {
- Cookie.write('JxExamples.CurrentExample', false);
- }
- },
- 'down': function() {
- Cookie.write('JxExamples.CurrentExample', [v,i]);
- }
- });
- mainTabs.tabSet.addEvents({
- 'tabChange':function(tabSet, tab) {
- // select the element on the tree to the left when the tab is activated? :)
- //window.console ? console.log(mainTree.findChild([tab.options.label])) : false;
- }
- });
- mainTabs.add(newTab);
- log(i + " loaded");
- }else{
- tabExists.clicked();
- item.setBusy(false);
- }
- Cookie.write('JxExamples.CurrentExample', [v,i]);
- }
- var makeTreeItem = function(o, tree) {
- for (var i in o) {
- var v = o[i];
- if (v instanceof Array) {
- var folder = new Jx.Tree.Folder({label: {set:'Examples',key:'navigation',value:i}, open: true});
- tree.add(folder);
- for (var j=0; j<v.length; j++) {
- makeTreeItem(v[j], folder);
- }
-
- } else {
- var item = new Jx.Tree.Item({
- label: {set:'Examples',key:'navigation',value:i},
- contentURL : v,
- active : lastExample[0] == v ? true : false
- });
- item.options.contextMenu = new Jx.Menu.Context(item.domA, {reference:item}).add(
- new Jx.Menu.Item({
- label : {set:'Examples',key:'navigation',value:'new-window'},
- onClick : function(ev) {
- window.open(item.options.contentURL, item.getText(item.options.label));
- }
- })
- );
- tree.add(item);
- }
- }
- };
- makeTreeItem(items, mainTree);
- //console.log(mainTree);
- /*
- var mainContextMenu = new Jx.Menu.Context(mainTree);
- mainContextMenu.add(
- new Jx.Menu.Item({
- label : {set:'Examples',key:'navigation',value:'new-window'},
- onClick : function(a,b,c) {
- console.log(a,b,c)
- }
- })
- );
- */
- if (Browser.ie && Browser.ie4) {
- new Asset.css('../../lib/themes/crispin/ie6.css', { rel: 'stylesheet' });
- }
- if (Browser.ie && Browser.ie5) {
- new Asset.css('../../lib/themes/crispin/ie7.css', { rel: 'stylesheet' });
- }
- });
- </script>
- <style type="text/css">
- #splitMain { height: 600px !important; }
- #splitMainLeft { overflow: auto; }
- </style>
- </head>
- <body>
- <h1>JxLib Examples</h1>
- <br />
- <div id="splitMain" class="splitterBox" ></div>
- <div id="failure" style="display:none">
- <br />
- <h2>Failure :(</h2>
- </div>
- <script type="text/javascript">
- var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." :
- "http://www.");
- document.write(unescape("%3Cscript src='" + gaJsHost +
- "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
- </script>
- <script type="text/javascript">
- var pageTracker = _gat._getTracker("UA-124914-7");
- pageTracker._trackPageview();
- </script>
- </body>
- </html>