This extension is a wrapper for the XBreadcrumb JQuery plugin. It is compatible with the core CBreadcrumbs widget, so no change is needed if you want to turn your old breadcrumbs into super cool extended ones.
Check out the demo !
Requirements ¶
tested with Yii 1.1.3 (but I see no reason why it would not work for previous Yii versions)
Installation ¶
- Download and unzip the archive into your protected/extension folder
- ...there is nothing else to do !
Usage ¶
To turn your default breadcrumbs into super cool extended breadcrumbs, just replace the reference to 'zii.widgets.CBreadcrumbs' by 'application.extensions.exbreadcrumbs.ExBreadcrumbs', which should be located in your main layout (protected/views/layout/main.php).
<?php
$this->widget('application.extensions.exbreadcrumbs.EXBreadcrumbs', array(
'links'=>$this->breadcrumbs,
));
?>
But (hopefully) there's more :
- add a dropdown menu to all (or some) breadcrumbs
- make your breadcrumbs 'collapsible'
- define your own custom style
Below is an example where the crumb1 has a dropdown menu containing 2 links. The link associated with crumb2 is defined as a classical Yii url array and at last, the yii crumb url is a simple string.
$this->widget('application.extensions.exbreadcrumbs.EXBreadcrumbs', array(
'links'=>array(
'crumb1' => array('controller/route1','param1'=>'value1',
'menu'=>array(
'menu1'=> array('controller/routeMenu1','paramM1' => 'valueM1'),
'menu2'=> array('controller/routeMenu2','paramM2' => 'valueM2'),
)
),
'crumb2' => array('controller/route2','param2'=>'value2'),
'yii' => 'http://www.yiiframework.com/',
'end'
),
));
Changes ¶
version 1.0.0.1
- change Client script registration to be compatible with previous Yii version (trejder)
version 1.0.0.0
- initial release
Thanks!
works perfectly, thanks!
so great...
wonderful Extension...
thank you, but i have some trouble with jquerymenu about stacking position..
where should i put z-index option on your CSS so it still below jquerymenu CSS?
thx..
Updated: ooopppssss... its done :-D just change xbreadcrumbs.css and
.xbreadcrumbs {
position: relative; z-index: 1;}
Please change the check the letter case.
<?php
$this->widget('application.extensions.exbreadcrumbs.ExBreadcrumbs', array( 'links'=>$this->breadcrumbs, ));?>
to
<?php
$this->widget('application.extensions.exbreadcrumbs.EXBreadcrumbs', array( 'links'=>$this->breadcrumbs, ));?>
Required Yii 1.1.5
Hi there,
Yes, this extension looks very good! :] But also yes - I DO see reason, why it should not work in previous versions of Yii! :]
In EXBreadcrumbs.php's line 175 (and I think that only there) you're using method chaining, available since version 1.1.5. So, users of earlier versions can't use your extension, if they don't make a simple change to your code. I.e. changing:
$cs->registerCoreScript('jquery') ->registerScriptFile($baseUrl.'/xbreadcrumbs.js', CClientScript::POS_HEAD) ->registerCssFile($baseUrl.'/xbreadcrumbs.css') ->registerScript('Yii.EXBreadcrumbs#'.$id,"$(\"#{$id}\").xBreadcrumbs($options);");(line 174 of EXBreadcrumbs.php) to:
$cs->registerCoreScript('jquery'); $cs->registerScriptFile($baseUrl.'/xbreadcrumbs.js', CClientScript::POS_HEAD); $cs->registerCssFile($baseUrl.'/xbreadcrumbs.css'); $cs->registerScript('Yii.EXBreadcrumbs#'.$id,"$(\"#{$id}\").xBreadcrumbs($options);");You should consider changing this by yourself in next release of extension, because this simple change will open it for users of earlier versions of Yii.
And of course there is problem reported by peterjkambey two days ago, that your extension (or rather jQuery code behind it) interferes with jQuery menu or any other menu systems related on it.
thanks
@trejder : you're right, thanks for pointing me this ... I'll update the extension as soon as possible
@peterjkambey : I'll take your modification into account too ...
itemCssClass option
Hi!
It would be super nice to have a itemCssClass option just like the CMenu widget.
very helpful
very helpful
Cool!
Very nice.
Css not align in multilingual
In Css
.xbreadcrumbs LI A { font-size: 11px; color: #666666; text-decoration: none; }in my testdrive change to
.xbreadcrumbs LI A { font-size: 11px; color: #666666; text-decoration: none; vertical-align: text-bottom; }If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.