Ajax tabs?
Mon, 03/30/2009 - 02:48
First here's an example:
http://getsatisfaction.com/getsatisfaction
When you click on "Ask a Question", "Share a Idea", "Report a Problem", or "Give a Praise,"
notice how the tabs change without refreshing the whole page.
Is this possible with Qcubed?
Take a look at this extension: http://qcodo.com/downloads/item.php/184
There are several other jQuery effects/controls already integrated into QCubed, and will be released as a part of QCubed 1.1. If you have time, please download the latest QCubed bits from SVN, and help us integrate this QTabPanel control into the core. We'd very much appreciate your help.
Hello guys
Actually I checked this control and I did some improves , check the ticket: http://trac.qcu.be/projects/qcubed/ticket/205
Check the example running at: http://qcubed.anexusit.com/examples/advanced_ajax/tab_panel.php.
Enjoy it.
enzo
www.anexusit.com/blog/1
After try to implement the OOPMan solution with out success.
I did some changes in the class and other tweaks to try implement in a easy way :P IMHO.
List of changes:
* Jquery UI Implemented (OOPMAN contribution)
* Create a QTabSection class (one object per tab)
* Auto Add control (We just need pass the QTabSection as Parent control)
This change was tested on FF3 and IE7
could you check at http://qcubed.anexusit.com/examples/advanced_ajax/tab_panel.php
To Do:
* Test on IE6, IE8, Safari and Opera
* Add content cache.
To implement last change is necessary implement ticket # http://trac.qcu.be/projects/qcubed/attachment/ticket/256
In order to enable custom style sheet by control.
enzo
Very exciting work. Just tested on IE8 and Chrome and it works well. Also added a comment on ticket #256 - looking forward to your response.
Example works on Opera 9.64 too.
Don't know if the functionality of disabling a tab or showing an error-css when no successfull validation of a control in a tab is integrated. If so, it should be shown in the example too, because we had problems with it when using the qcodo based addon QTab implementation on IE7.
Hello Akron
Current implementation don't able to disble tabs, if you have a good example I could try to implement.
I'm not a jquery developer expert :P
Regards
enzo
Hello Enzo,
we used this modification of the QTab addon to disable tabs:
http://www.qcodo.com/downloads/item.php/118
But I looked at the jquery doc and the method to disable a tab is already implemented.
http://jqueryui.com/demos/tabs/#option-disabled
But as a jquery expert you did already know this, right?! :p
Maybe you could use this and not the old, and for sure more buggy, addon of qcodo.
Regarding the showing of an error state when the validation of a tab fails, we made some additions based on the QCodo addon:
QTabPanel.class.php:
/**
* Mark Tab with errorstate
*
* @param string $tab Tab with errorstate
*
*/
public function ErrorTab($tab){
QApplication::ExecuteJavaScript("document.getElementById('".$this->strControlId."_tab_".$tab."').className='tabs-error'");
}
/**
* Iterate over all tabs and validates them. If it fails, a special css class is used
*
*/
public function Validate() {
$blnOk = true;
foreach ($this->GetChildControls() as $objChild) {
if ($objChild->Visible) {
if (!$objChild->Validate()) {
$this->ErrorTab($objChild->CurrentSection);
$blnOk = false;
}
}
}
return $blnOk;
}
qtabpanel.css:
Could not work with the jquery ui css styles
/*ERROR TAB STYLES
*/
.anchors .tabs-error a:link, .anchors .tabs-error a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: default !important;
color:#000;
background: #f33;
font-weight: bold;
}
.anchors .tabs-error {
opacity: .4;
}
.anchors .tabs-error a:hover, .anchors .tabs-error a:focus, .anchors .tabs-error a:active {
background: #dcc;
}
Hope this helps.
Cheers,
Andreas
Hello pal
I did a mistype I'm not a jquery developer expert, could you create a new patch with your suggestions ?
regards
Hello guys!
I'm just needing tab control. But I think need to add some additional functionality. I think I will start with this one and see, whether I can modify for my needs. I can publish my outcome. Just have a question, that is there someone else, who is working on it? That way we might save some time (not adding both the same functionality etc).
Hey Agsel,
till now I had no time to add this. Don't if any other is working on it, maybe OOPMan.
Cheers,
Andreas
Hi Enzo. Could you let me know what kind of problems my base version of the QTabPanel was giving you? I'm surprised that it didn't work, as I am using it at the moment with no problems...
Hello OOPMan
well without an example running, is more difficult.
I tried to implement and I find some missing stuff, so I decide reuse your core and extend some stuff to try people could implement in a way.
My approach use your idea with Jquery UI with some improvement + an example.
Regards
enzo
Hello guys,
I tried implementing QTabPanel as mentioned by enzo, and I figured out that I need to implement JQueryUI before it. Then I tried to implement JQueryUI through http://www.qcodocoder.com/node/5. But I am getting errors on:
Error on AddJavascript was solved on using the function from the Owen's post on http://qcu.be/content/jquery-ui-integration. But I could not find AddStyleSheet function. Please let me know if I am on correct path. I am confused on seeing multiple methods to implement JQueryUI.
Please help.
Thank you.
Qcubed gurus,
It will be great if anybody of you could help me with implementing QTabPanel from scratch?
Thank you.
Anybody? Please help.
If its very difficult I am planning to create menu through javascript and css and then using redirect method to call my Qcubed pages with data. But it does not look very good and secure, if users are involved and I need to pass userids. Please, please help me..
Thanks.
meetsang,
What you seem to be asking for here is for someone to implement a tab panel - this is a non-trivial task, and I doubt that folks would be willing to drop everything and spend a couple days implementing it for you. This sounds more like a consulting job - if you have the budget to outsource it, post a note on the Jobs Forum.
On the implementation idea you had: you don't have to pass User ID's around, you can just save them in a session variable. That makes things more secure.
Alex,
Thank you. I created a posting: http://qcu.be/content/qtabpanel-implementation-qcubed-10.
Enzo/akrohn/OOPMan/VexedPanda please help by replying on my mail on the job.
Thank you all.
I have implemented alternative QTabsPanel, which I created from scratch. I needed possibility to load tab contents via Ajax. I mean, I have tabs visible, but when I open one, the contents of it will just then be loaded. If I have about 10 tabs and I know, that people only tend to use some of them, it's pointless to load all (and some of those 10 take somewhat long time to load).
But I have created my files in hurry for my project. For example, current tab panel has some more options you can modify. But adding those is not hard to do. I was planning cleaning my code up and make it public, but just haven't had enough time. Hopefully I will get some.
If you are interested, let me know and I will drop you an email.
Agsel,
Yeah, those server side tabs will be pretty efficient. Though I am interested only in 3-4 tabs on my page right now. Please contact me.
Thanks.
Just for gurus. Who can implement these things:
http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
That's yet another thing I'd post onto the Jobs forum, along with your budget / timeline.
meetsang,
I'm not even sure on what you are asking here?
Would you like to see a QMenu plugin? Where you can do something like
$objMenu = new QTopMenu;
$objHome = new QTopNavMenu;
$objHome->Text = "Home";
$objHome->Url = "http://www.qcu.be";
$objSubItem = new QSubNavMenu;
$objSubItem ->Text = "Sub nav link";
$objSubItem ->Url = "http://www.qcu.be";
$objHome->AddSubmenuItem($objSubItem);
$objMenu->AddMenuItem($objHome);
And in the template:
$objMenu->Render();Not sure why you are not coding the list manually, and simply copy the related scripts/css to the page? Menus tend to be rather static.
I have some sub-pages, just like dashboard panel of drafts. And instead of their selection through listbox I want to create a menu in my index file and call the index file only with different list/edit panels on every click.
I require a drop down menu or a tab view with a left menu for it. But I don't know which one would be better, simpler to code, secure and easy to change in future (for both editing menu and editing its layout).
Thanks.