I am trying to figure out how to add some tabbed content to the main moodle homepage Topic Section.
I was hoping that someone might have a step sheet to just copy and paste using the More theme.
I have looked here: http://jshirley.github.io/bootstrap/javascript.html#tabs
and here: http://getbootstrap.com/javascript/#tabs
I guess I am missing a step and I cannot quite get it to work properly.
You might prefer something simple like this...
Thanks Mary.
I was hoping to find an easy solution using bootstraps built in functionality and the More theme without doing too many hacks. Is there any info on how to do this?
Not for tabs...at least not that I know of. However there are tutorials how to add JS and jQuery into Moodle along with all the other theme related issues. You will find the link to those documentation filesat the top of the this Forum page.
Cheers
Mary
Hi Chris,
This depends on the bootstrap version that your theme is based on. Essential is based on Bootstrap 2.3. Search for Tabbable example HERE and copy and paste the code into the topic section of your homepage. Nothing else is needed. You should see the tabs immediately.
If you switch to a theme based on Bootstrap 3, you will find the components HERE.
With kind regards,
Hartmut
Duh! I forgot about that!
So easy...
I'm in Section 1.
Howdy, I'm in Section 2.
It wont work here as this is a forum but it does in a the site topic area!
This is the code I copied from the link Hartmut added...
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
I have tried copy/pasting the code but the tabs do not toggle.
Moodle 2.7 using More theme.
I was able to get tabs working but I had to paste in this code in the footer in Code View:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
I got the example from here:
Is there an easier or better way of handling this?
Hi Chris,
That is the BS V3 code and More like Clean uses BS 2.3.2. If you want to use BS3 jQuery code then that will conflict with the YUI port of the code. So you have to exclude it in the 'config.php' file and use the full jQuery version instead. When using jQuery with Moodle follow this: http://docs.moodle.org/dev/jQuery - as any other solution will lead to issues. But get the V2.3.2 version of the jQuery from http://getbootstrap.com/2.3.2/index.html.
Cheers,
Gareth
Does Moodle or specifically the More theme come with the Bootstrap.min.js and if so how do we activate it?
Also, I did see where in lib.php I add this to load in Jquery to the theme.
function theme_sometheme_page_init(moodle_page $page) {
$page->requires->jquery();
}
So now in order to get tabs working I am assuming I just need the final piece which is the bootstrap js and I am wondering the best way to do that.
I believe Clean and More both come with the YUI ports of the javascript from Bootstrap and not the jquery verions.
If there are parts of the jquery which are not available in the yui port and you need to implement the jquery for that particular item, it may be that you will need to separate out and just download that section of the bootstrap jquery rather than the full bootstrap.min.js to avoid yui/jquery clashes - Gareth/David/Bas, any suggestions? - I haven't tried this yet, so far I've stuck with using the provided yui in Clean or the full bootstrap3 jquery, I haven't tried this kinkd of mix and match, so happy to learn from anyone who has
Pragmatically, you could run a cut down version of jQuery BS along side YUI. But if you are going to go to the effort of implementing jQuery, then what's the point? It's relatively easy to add the jQuery version:
1. So, get the JS from inside the 'js' folder of the archive from: http://getbootstrap.com/2.3.2/index.html.
2. Rename the '.min' version to use a middle underscore, i.e. 'bootstrap.min.js' -> 'bootstrap_min.js' as Moodle does not like periods in the middle of filenames.
3. In 'config.php' of the theme add:
$THEME->parents_exclude_javascripts = array(
'bootstrapbase' => array(
'moodlebootstrap'
)
); // Exclude YUI Boostrap code.
I know it's a YUI module, but it's actually loaded another way - long story.
4. Create a 'jquery' folder in your theme's folder and place in there the 'bootstrap.js' file.
5. Still in the 'jquery' folder, create a file called 'plugins.php' with:
$plugins = array(
'bootstrap' => array('files' => array('bootstrap_min.js'))
);
6. At the top of your layout files add:
$PAGE->requires->jquery();
$PAGE->requires->jquery_plugin('bootstrap', 'theme_YOURTHEMENAME');
Changing 'YOURTHEMENAME' as appropriate.
Job done!
Gareth
Thanks Gareth for the detailed instructions but it didn't work for me.
Maybe I should explain more about what I am trying to do and maybe an easier solution is possible.
Ok, ignore step 6 and change:
function theme_sometheme_page_init(moodle_page $page) {
$page->requires->jquery();
}
to
function theme_sometheme_page_init(moodle_page $page) {
$page->requires->jquery();
$page->requires->jquery_plugin('bootstrap', 'theme_sometheme');
}
Thanks Gareth but that didn't work either.
What ends up happening is that the plugins.php file you had me create in the jquery folder has it's text displayed above the site title.
So I guess the only thing left is to try and get the bootstrap_min.js file to load properly.
I was able to get the bootstrap_min.js file to load by adding this to config.php and renaming the jquery folder to javascript:
$THEME->javascripts = array( 'bootstrap_min' );
Do you think keeping your other steps to load the jquery are fine? I also removed :
$page->requires->jquery_plugin('bootstrap', 'theme_dps'); and the plugins.php file.
Attached is the entire theme as it is now.
No, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
That is not how it is done and will only lead to more of a mess.
I suspect the 'plugins.php' file has a missing '<?php' which is why it is failing. Please see: http://docs.moodle.org/dev/jQuery#Add_the_plugin_information_to_the_plugins.php_file and https://github.com/moodleman/moodle-theme_essential/blob/master/jquery/plugins.php type thing.
I'll have a quick look at the theme.
Ok, this fixes the loading of the jQuery. 'plugins.php' now working and 'init' function uses 'bootstrap' instead of 'bootstrap_min' to reference the key in the array in 'plugins.php'. It's only the filename that has '_min'.
Thanks Gareth,
I was able to get this working and it was a stupid issue on my end - Folder/file permissions!
I had copied and tried to mimic the way Essential includes the individual jquery files. I didn't catch it right away but the jquery folder and files didn't allow access to anyone but my account on Ubuntu.
Now that I fixed the file permissions things are working as expected. Thanks for you help in guiding the proper inclusion of the files.
Essential use both Richard
I had forgotten that Mary - It uses the individual 'bits' though, rather than the full bootstrap.min.js
So Chris - take a look at Essential and how the jquery/bootstrap_plugins/tab_2.3.2.js file has been added there. Should do exactly what you need!