Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
Does anyone know a mature plugin for a treeview in twitter bootstrap? Most things i found so far are
a) not longer maintained
b) looking ugly / have glitches
c) can't be initialized from a html unordered list
d) don't allow an element (node or leaf) to become selected.
Basically i need this to implement something similar to a file-explorer, but for an eCommerce Product catalog.
Thanks in advance!
Seems I'm a little late to the party but you could check out my jQuery plugin based tree view for Twitter Bootstrap.
Imaginatively named bootstrap-treeview.js!!!
It's at version 1 and will only support Bootstrap v3 upwards, but...
it will be maintained,
looks closer to the bootstrap look and feel than any other I've seen,
is data driven,
highly customisable look and feel,
has selectable nodes with event hooks
Check out the project's github page for full documentation, and take a look here for a live demo.
Take a look at the FuelUX tree
var treeDataSource = new DataSource({
data: [
{ name: 'Test Folder 1', type: 'folder', additionalParameters: { id: 'F1' } },
{ name: 'Test Folder 2', type: 'folder', additionalParameters: { id: 'F2' } },
{ name: 'Test Item 1', type: 'item', additionalParameters: { id: 'I1' } },
{ name: 'Test Item 2', type: 'item', additionalParameters: { id: 'I2' } },
{ name: 'Test Item 3', type: 'item', additionalParameters: { id: 'I3' } }
],
delay: 400
});
$('#MyTree').tree({dataSource: treeDataSource});
Here is a working example with data source:
http://bootply.com/60761
If you want a folder or item to be selectable, you'll need to look at the methods/events exposed by the control.
Related
The SVG created by Highcharts has no title, no meaningful desc and no ARIA attributes, or at least I can't find anything in the API to set these. Following the tips at http://www.sitepoint.com/tips-accessible-svg/ I would like to be able to set the title of the SVG when I set http://api.highcharts.com/highcharts#title (or some alternative option). For desc I think I'd need an alternative option for sure - subtitle wouldn't fit the bill. If I set the title the attribute aria-labelledby="title" should be set on the svg tag. If I set title and desc it should be aria-labelledby="title desc" (apparently not all screen readers are compatible with aria-describedby). And the svg tag should also have a role="img" attribute.
Currently we are failing an accessibility review due to these issues.
Here is some info for someone landing to this page.
From high charts version 5 onward there is support for accessibility.
Here is the link with samples
https://www.highcharts.com/docs/chart-concepts/accessibility
It has support for keyboard navigation. It also include a hidden HTML screen reader information section above the chart with details about the chart structure and content. This can be read by screen readers after getting focus on the chart by up or down arrow keys.
One can also provide additional information to the screen reader via chart.description, series.description and point.description through which one can summarize the chart.
See example here which summarizes the chart using the description property.
$.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function (data) {
Highcharts.stockChart('container', {
chart: {
description: 'Chart shows Apple stock prices from mid 2008 to mid 2015. It shows steady growth with one significant peak lasting through most of 2012 before normalizing.'
},
title: {
text: 'Apple Stock Price 2008 to 2015'
},
subtitle: {
text: 'Accessible stock chart demo'
},
rangeSelector: {
selected: 1
},
navigator: {
series: {
description: 'Overview series for navigation' // The navigator series could be confusing to screen reader users.
}
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
});
http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/stock/accessibility/accessible-stock/
Example for support for dash style for better visibility
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-dashstyle/
I'm currently building a Yeoman generator, and although I seem to have mastered the basics, I'm struggling to figure out how to include various dependencies only when the user chooses to include them.
After looking at some existing generators, I've worked out that a checkbox prompt is the standard way of allowing users to select which dependencies they'd like to include in their new app:
var prompts = [{
type: 'checkbox',
name: 'features',
message: 'What more would you like?',
choices: [{
name: 'Sass',
value: 'includeSass',
checked: true
}, {
name: 'Bootstrap',
value: 'includeBootstrap',
checked: true
}, {
name: 'Modernizr',
value: 'includeModernizr',
checked: true
}]
}];
From here on in though, I'm stumped. What I'd like is to allow users to choose what dependencies they'd like to include both using bower, and NPM (through the package.json file).
How would I go about doing this?
Thanks in advance for any help!
Making sure to only include the dependencies the user needs is a good practice!
The easiest way - and also the way the official generators do it - is to make the package.json you're generating a template. The template can then include arbitrary conditions to mix and match the packages you need.
The first step is to export the answers from the prompt, so they're available in the template:
this.prompt(prompts, function (answers) {
var features = answers.features;
function hasFeature(feat) {
return features && features.indexOf(feat) !== -1;
}
this.includeSass = hasFeature('includeSass');
this.includeBootstrap = hasFeature('includeBootstrap');
this.includeModernizr = hasFeature('includeModernizr');
}.bind(this));
The template for the example would then look something like this. The <% ... %> syntax is actual JavaScript and is executed before the result is written to disk.
templates/_package.json
{
"name": "<%= _.slugify(appname) %>",
"dependencies": {
"my-dependency-a": "^0.4.5",<% if (includeModernizr) { %>
"modernizr": "^0.11.0",<% } %><% if (includeBootstrap) { %>
"bootstrap": "^3.3.4",<% } %>
"my-dependency-b": "^0.5.0"
},
"engines": {
"node": ">=0.10.0"
}
}
Back in your generator code, make sure to generate this file from the template:
packageJSON: function () {
this.template('_package.json', 'package.json');
}
And as a final step, you want to actually run npm install in the generated directory. There's a helper available for Yeoman, that does this for you:
this.on('end', function () {
this.installDependencies();
});
If you look at the generator-webapp code that does this, there are a few more subtleties to handle cases where the user might not want to install the dependencies automatically and special handling for test frameworks. But for the case you describe, the above is completely sufficient.
I hope this helps. :)
Is there a way to get the solution referenced here:
Twitter bootstrap typeahead multiple values?
To work with typeahead.js where updater, matcher etc functions are not available?
At https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#custom-events you can read:
typeahead:selected – Triggered when a suggestion from the dropdown
menu is selected. The event handler will be invoked with 3 arguments:
the jQuery event object, the suggestion object, and the name of the
dataset the suggestion belongs to.
demo: http://jsfiddle.net/3hL70h1L/
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
displayKey: 'value',
source: substringMatcher(states)
})
.on('typeahead:selected',
function(event,suggestions) {
$myTextarea.append(suggestions.value, ' ');
$('.typeahead').val('');
}
);
Notice that you also can use The Typeahead plugin from Twitter's Bootstrap 2 ready to use with Bootstrap 3 (can also be integrated with Bloodhound)
Both typeahead plugins also work together with Bootstrap tags support, see https://github.com/bassjobsen/Bootstrap-3-Typeahead#bootstrap-tags-input which seems to offer a similar functionality.
I am trying to display a highchart graph and when rendering in FF or IE, I get the above error, but in Chrome and Safari I works without fail. I think it is to do with the animation, but switching the animation off, then subsequently works for line charts, but pie charts does not show a chart at all.
$(canvas).highcharts({
chart : {
type: 'pie'
},
colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
credits: {
enabled: true
},
title : {
text: title
},
plotOptions : {
series : {
animation : isWebkit()
}
},
series: data
});
......
Thank you for your help, I am still having the issues, but I have coded around it for now. I am sure there is lots I did not tell you in my original question that would influence the answer (such as I am using bootstrap as my UI platform, and the chart is in a tab which is not visible when it is built, also on the page is a spreadJS control, and looking at the stack trace, this might have an influence and finally the data object would need expanding as I am setting more options than just the values in your jsfiddle example), so I think it is better if I ask the question again once I can expose the other challenges on the page.
So, again thank you, and I will need to ask the question more clearly.
I'm moving from sdk 2.0p5 to 2.0rc1 and can't make ranking work in grids.
this.down('#leftSide').add({
xtype:'rallygrid',
enableRanking: true,
model: this._models.TestSet,
storeConfig:{
fetch:['FormattedID', 'Name', 'Rank'],
sorters:[
{property: 'Rank', direction: 'ASC'}
]
},
columnCfgs: [
'FormattedID',
'Name'
]
});
I use enableRanking option to activate drag and drop ranking, and it worked perfectly for 2.0p5, but in 2.0rc1 I see the rallyrankcolumn created but it's empty and the functionality of DND is not enabled, so I can't re-rank anything.
Any advice?
AppSDK 2.0rc2 was just released:
https://rally1.rallydev.com/apps/2.0rc2/sdk.js
https://help.rallydev.com/apps/2.0rc2/doc/
and the drag-n-drop ranking works.
Here is a code fragment where enableRanking is set to true:
this.grid = this.add({
xtype: 'rallygrid',
model: model,
enableRanking: true,
columnCfgs: [
'FormattedID',
'Name',
'Priority'
],
storeConfig: {
fetch: ['FormattedID', 'Name', 'Priority'],
filters : [filter]
}
});
When the "nameless" rank column's header is clicked and the grid is sorted by rank, the drag-n-drop icons become available.