html: false,
active: false,
- weight: 'default',
+ weight: '',
size: '',
tag: 'button',
href: '',
return cfg;
}
- if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) < 0) {
- Roo.log("Invalid value for weight: " + this.weight + ". must be default, primary, success, info or warning.");
- this.tag = 'button';
- } else {
+ if (this.parentType != 'Navbar') {
+ this.weight = this.weight.length ? this.weight : 'default';
+ }
+ if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
+
cfg.cls += ' btn-' + this.weight;
+ } else {
+
}
if (this.active) {
} else {
cfg.tag = this.tag;
}
-
- if (this.tag !== 'a' && this.href !== '') {
- Roo.log("Tag must be a to set href.");
- } else {
- cfg.href = this.href;
+
+ Roo.log(this.parentType);
+ if (this.parentType == 'Navbar') {
+ cfg.tag = 'li';
+ cfg.cls = '';
+ cfg.cn = [ {
+ tag : 'a',
+ html : this.html,
+ href : this.href || '#'
+ }];
+ if (this.menu) {
+ cfg.cn[0].html = this.html + ' <span class="caret"></span>';
+ cfg.cls += ' dropdown'
+ }
+
+ delete cfg.html;
+
}
+
+
if (this.disabled) {
cfg.disabled = 'disabled';
}
if (this.items) {
+ Roo.log('changing to ul' );
cfg.tag = 'ul';
-
this.glyphicon = 'caret';
}
if (this.badge) {
cfg.html += ' ';
+ cfg.tag = 'a';
+
+ cfg.cls='';
+
+ cfg.href=this.href;
+
cfg.cn = [
cfg.html,
{
cfg.html='';
}
+ if (cfg.tag !== 'a' && this.href !== '') {
+ throw "Tag must be a to set href.";
+ } else {
+ cfg.href = this.href;
+ }
+
return cfg;
}
addxtype : function (tree) {
var cn = this;
if (tree.xtype != 'Body') {
- var tt = Roo.apply({}, tree);
- delete tt.items;
+
cn = Roo.factory(tree);
+ cn.parentType = this.xtype;
cn.onRender(this.getChildContainer());
// then add the element..
}
+ if (typeof (tree.menu) != 'undefined') {
+ tree.menu.parentType = cn.xtype;
+ tree.menu.triggerEl = cn.el;
+ this.items.push(cn.addxtype(Roo.apply({}, tree.menu)));
+
+ }
+
if (!tree.items || !tree.items.length) {
return this;
}
+ var items = tree.items;
+ delete tree.items;
+ this.items = [];
+ Roo.log(items.length);
// add the items..
- for(var i =0;i < tree.items.length;i++) {
- cn.addxtype(Roo.apply({}, tree.items[i]));
+ for(var i =0;i < items.length;i++) {
+ this.items.push(cn.addxtype(Roo.apply({}, items[i])));
}
+ // if it has a menu?
+
+
+
return this;
}
+++ /dev/null
-/*
- * - LGPL
- *
- * row
- *
- */
-Roo.bootstrap.Navbar.Dropdown.Item = function(config){
- Roo.bootstrap.Navbar.Dropdown.Item.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.bootstrap.Navbar.Dropdown.Item, Roo.bootstrap.Component, {
-
- href : false,
- html : false,
-
- autoCreate : {
- // cls: '',
- tag : 'li',
- cn : [
- {
- tag : 'a',
- href : '#',
- html : 'Link'
- }
- ]
- },
-
- getAutoCreate : function(){
-
- var cfg = Roo.apply({}, Roo.bootstrap.Navbar.Dropdown.Item.superclass.getAutoCreate.call(this));
- cfg.cn[0].href = this.href || cfg.cn[0].href ;
- cfg.cn[0].html = this.html || cfg.cn[0].html ;
- return cfg;
- }
-
-});
-
-
-
-
\ No newline at end of file
+++ /dev/null
-/*
- * - LGPL
- *
- * row
- *
- */
-Roo.bootstrap.Navbar.Dropdown = function(config){
- Roo.bootstrap.Navbar.Dropdown.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.bootstrap.Navbar.Dropdown, Roo.bootstrap.Component, {
-
- html : false,
- align : 'left',
-
- autoCreate : {
- cls: 'dropdown',
- tag : 'li',
- cn : [
- {
- tag : 'a',
- href : '#',
- cls : 'dropdown-toggle',
- 'data-toggle' : 'dropdown',
- cn : [
- 'Link',
- {
- tag: 'strong',
- cls : 'caret'
- },
-
- ]
-
- },
- {
- tag : 'ul',
- cls : 'dropdown-menu',
-
- }
- ]
- },
-
- getChildContainer : function() {
- return this.el.select('ul', true).first();
- },
-
- getAutoCreate : function(){
- var cfg = Roo.bootstrap.Navbar.Dropdown.superclass.getAutoCreate.call(this);
-
- cfg.cn[0].cn[0] = this.html || cfg.cn[0].cn[0];
- return cfg;
- },
- initEvents : function() {
- Roo.log("ADD event");
- Roo.log(this.el.dom);
- this.el.on('click', this.toggle, this);
-
- },
- toggle : function(e)
- {
- Roo.log(e.getTarget());
- Roo.log(this.el.dom);
- if (Roo.get(e.getTarget()).findParent('ul.dropdown-menu')) {
- return;
- }
- var isActive = this.el.hasClass('open');
- // if disabled.. ingore
- this.clearMenus(e);
- //if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
- // if mobile we use a backdrop because click events don't delegate
- // $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
- // }
-
- //var relatedTarget = { relatedTarget: this }
- //$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
-
- //if (e.isDefaultPrevented()) return;
-
- this.el.toggleClass('open');
-
- // .trigger('shown.bs.dropdown', relatedTarget)
-
- this.el.focus();
- Roo.log(e);
- e.preventDefault();
-
-
- },
- clearMenus : function()
- {
- //$(backdrop).remove()
- this.el.select('a.dropdown-toggle',true).each(function(aa) {
- if (!aa.hasClass('open')) {
- return;
- }
- // triger close...
- aa.removeClass('open');
- //var parent = getParent($(this))
- //var relatedTarget = { relatedTarget: this }
-
- //$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
- //if (e.isDefaultPrevented()) return
- //$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
- })
- }
-
-
-});
-
-
-
-
\ No newline at end of file
href : false,
html : false,
+ badge : '',
autoCreate : {
- cls: 'nav navbar-nav',
- tag : 'li',
- cn : [
- {
- tag : 'a',
- href : '#',
- html : 'Link'
- }
- ]
+ tag : 'li'
},
getAutoCreate : function(){
var cfg = Roo.apply({}, Roo.bootstrap.Navbar.Item.superclass.getAutoCreate.call(this));
- cfg.cn[0].href = this.href || cfg.cn[0].href ;
+ cfg.cn = [
+ {
+ tag: 'p',
+ html: 'Text'
+ }
+ ];
+
cfg.cn[0].html = this.html || cfg.cn[0].html ;
+
+ if (!this.href) {
+ cfg.cn[0].tag='p';
+ cfg.cn[0].cls='navbar-text';
+ } else {
+ cfg.cn[0].tag='a';
+ cfg.cn[0].href=this.href;
+ cfg.cn[0].html=this.html;
+ }
+
+ if (this.badge !== '') {
+
+ cfg.cn[0].cn=[
+ cfg.cn[0].html + ' ',
+ {
+ tag: 'span',
+ cls: 'badge',
+ html: this.badge
+ }
+ ];
+ cfg.cn[0].html=''
+ }
+
+
return cfg;
}
};
Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, {
-
- autoCreate : {
- cls: 'navbar navbar-default',
- tag : 'nav',
- role : 'navigation',
- cn : [
- {
- cls: 'nav navbar-nav',
- tag : 'ul'
- }
-
- ]
+
+ type: 'nav',
+ arrangement: '',
+ position: '',
+ inverse: false,
+ collapse: false,
+ align: '',
+
+ autoCreate : {
+ cls: 'navbar navbar-default',
+ tag : 'nav',
+ role : 'navigation'
},
+
+ getAutoCreate : function(){
+ var cfg = Roo.apply({}, Roo.bootstrap.Navbar.superclass.getAutoCreate.call(this));
+
+ cfg.cn = [
+ {
+ cls: 'nav',
+ tag : 'ul'
+ }
+ ]
+
+ if (['tabs','pills'].indexOf(this.type)!==-1) {
+ cfg.cn[0].cls += ' nav-' + this.type
+ } else {
+ if (this.type!=='nav') {
+ Roo.log('nav type must be nav/tabs/pills')
+ }
+ cfg.cn[0].cls += ' navbar-nav'
+ }
+
+ if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
+ cfg.cn[0].cls += ' nav-' + this.arrangement;
+ }
+
+ if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)!==-1) {
+ cfg.cn[0].cls += ' navbar-' + this.position;
+ }
+
+ if (this.collapse) {
+ cfg.tag = 'div';
+ cfg.cls = 'collapse navbar-collapse ';
+
+
+ }
+
+ if (this.align === 'right') {
+ cfg.cn[0].cls += ' navbar-right';
+ }
+
+ /* type: nav | tabs | pills
+ * arrangement: stacked | justified
+ * position: fixed/static etc
+ * inverse: true/false
+ */
+
+ return cfg;
+ },
+
getChildContainer : function() {
return this.el.select('ul', true).first();
},
** add hook? afterChildRender to Component..
Button.js
- active: true/false
- weight : default (or empty) | primary | success | info | warning
- size : lg / sm / xs (default empty)
- tag: button (default) | a | input | submit
- href: // if set then and tag != 'a' = then show error
- disabled : true/false
- isClose: true/false
- glyphicon: volume-up (see components styling)
- (( if button has items[] then show a carret and crete the ul/ for dropdown))
- dropdirection : default empty (down) can be 'dropup'
- badge: (empty) or value
+ active: true/false --- good
+ weight : default (or empty) | primary | success | info | warning --- good
+ size : lg / sm / xs (default empty) --- good
+ tag: button (default) | a | input | submit --- input + submit (form)
+ href: // if set then and tag != 'a' = then show error --- good
+ disabled : true/false --- good
+ isClose: true/false --- good
+ glyphicon: volume-up (see components styling) --- good
+ (( if button has items[] then show a carret and crete the ul/ for dropdown)) --- not done, how to I create ul for dropdown?
+ dropdirection : default empty (down) can be 'dropup' --- .dropup class must be added to parent .btn-group div. .pull-right?
+ badge: (empty) or value --- converts to tag a, add pull-right?
-Navbar.Dropdown
- - add align: left (defualt) right
- - add aligh
+Navbar.Dropdown --- problem: has autocreate
+ - add align: left (default) right --- problem: parent must have navbar-collapse
+ - add pull-right --- what to call it?
-Navbar.Button (extends Button)
+Navbar.Button (extends Button) --- how do I do this
Navbar.Item
- add
- disabled
- - if href is empty - then do not use <a> tags. (and use navbar-text)
- - add align : right
- - add badge
+ disabled --- no navbar item disabled
+ - if href is empty - then do not use <a> tags. (and use navbar-text) --- problem: if href is empty, it uses default from autocreate instead
+ - add align : right --- the alignment of the parent ul is set, not the li items
+ - add badge --- good
Navbar -
- type : tabs | pills | stacked | justified | fixed-top | fixed-bottom | static-top | inverse (default empty)
+ type : tabs | pills | stacked | justified | fixed-top | fixed-bottom | static-top | inverse (default empty) --- +collapse problem: justified must have <a> children
BreadCrumb
BreadCrumb.Item
ButtonGroup.js
size : lg / sm / xs (default empty)
align: (empty) or vertical | justified
-
Navbar.Dropdown.Divider.js
<script type="text/javascript" src="../../Roo/bootstrap/Container.js"></script>
<script type="text/javascript" src="../../Roo/bootstrap/Column.js"></script>
<script type="text/javascript" src="../../Roo/bootstrap/Navbar.js"></script>
-<script type="text/javascript" src="../../Roo/bootstrap/Navbar.Dropdown.js"></script>
-<script type="text/javascript" src="../../Roo/bootstrap/Navbar.Dropdown.Item.js"></script>
+<script type="text/javascript" src="../../Roo/bootstrap/Menu.js"></script>
+<script type="text/javascript" src="../../Roo/bootstrap/MenuItem.js"></script>
<script type="text/javascript" src="../../Roo/bootstrap/Navbar.Item.js"></script>
<script type="text/javascript" src="../../Roo/bootstrap/Row.js"></script>
<script type="text/javascript" src="../../Roo/bootstrap/Button.js"></script>
+<script type="text/javascript" src="../../Roo/bootstrap/ButtonGroup.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
{
xtype: 'Item',
xns: Roo.bootstrap.Navbar,
+ href: '',
html: "hello",
- href : 'http://roojs.com'
+ badge: 'test'
},
{
- xtype: 'Dropdown',
- xns: Roo.bootstrap.Navbar,
- items : [
- {
- xtype: 'Item',
- xns: Roo.bootstrap.Navbar.Dropdown,
- html: "hello",
- href : 'http://roojs.com'
- },
- {
- xtype: 'Item',
- xns: Roo.bootstrap.Navbar.Dropdown,
- html: "hello",
- href : 'http://roojs.com'
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+
+ html: "hellox",
+
+ menu: {
+ xtype: 'Menu',
+ xns: Roo.bootstrap,
+ // badge: 'test',
+ items : [
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello aaa",
+ href : 'http://roojs.com'
+ },
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ href : 'http://roojs.com'
+ }
+ ]
}
- ]
}
]
+
},
{
xtype: 'Container',
xtype: 'Navbar',
xns: Roo.bootstrap,
items : [
-
{
xtype: 'Item',
xns: Roo.bootstrap.Navbar,
- html: "hello",
- href : 'http://roojs.com'
+ html: "nav",
+ href : 'http://roojs.com',
+
+ menu: {
+ xtype: 'Menu',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ href : 'http://roojs.com'
+ } ,
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ href : 'http://roojs.com'
+ }
+ ]
+ }
},
-
{
- xtype: 'Dropdown',
- xns: Roo.bootstrap.Navbar,
- items : [
- {
- xtype: 'Item',
- xns: Roo.bootstrap.Navbar.Dropdown,
- html: "hello",
- href : 'http://roojs.com'
- } ,
- {
- xtype: 'Item',
- xns: Roo.bootstrap.Navbar.Dropdown,
- html: "hello",
- href : 'http://roojs.com'
- }
- ]
- }
- ]
- }
-
-
- ]
+ xtype: 'Navbar',
+ xns: Roo.bootstrap,
+ align: 'right',
+ collapse : true,
+ items : [
+ {
+ xtype: 'Item',
+ xns: Roo.bootstrap.Navbar,
+ html: "nav",
+ href : 'http://roojs.com',
+ menu : {
+ xtype: 'Menu',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ href : 'http://roojs.com'
+ } ,
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ href : 'http://roojs.com'
+ }
+ ]
+ }
+
+ }
+ ]
+
+ }
+ ]
+
+
+ },
+
+ ]
}
]
-
}
]
},
{
xtype: 'Button',
xns : Roo.bootstrap,
- tag: 'input',
- html: 'active'
+ disabled: true,
+ html: 'disabled'
},
{
xtype: 'Button',
xns : Roo.bootstrap,
- tag: 'submit',
- html: 'active',
+ isClose: true,
},
{
xtype: 'Button',
xns : Roo.bootstrap,
- disabled: true,
- html: 'disabled'
+ glyphicon: 'volume-up',
+ html: 'glyphicon'
},
{
xtype: 'Button',
xns : Roo.bootstrap,
- isClose: true,
+ menu: {
+ xtype : 'Menu',
+ xns : Roo.bootstrap,
+ items : [
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ }
+ ]
+ }
},
{
xtype: 'Button',
xns : Roo.bootstrap,
- glyphicon: 'volume-up',
- html: 'glyphicon'
- },
+ badge: '42',
+ href: '#'
+ }
+ ]
+ },
+ {
+ xtype: 'Container',
+ xns: Roo.bootstrap,
+ style : 'margin-top:60px',
+ items : [
{
- xtype: 'Button',
+ xtype: 'ButtonGroup',
xns : Roo.bootstrap,
items: [
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ },
{
xtype: 'Button',
xns : Roo.bootstrap,
]
},
{
- xtype: 'Button',
+ xtype: 'ButtonGroup',
xns : Roo.bootstrap,
- badge: '42',
+ size: 'lg',
+ align: 'justified',
+ items: [
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ }
+ ]
}
]
- },
+ }
]
};
}
projects / roojs1 / commitdiff