Table of contents
| Table of Contents | This Page was viewed: 4656 Times |
Introduction
I wanted a way that I could create an FAQ (Question/Answer) on a page without all the hassle of switching to source mode, multiple templates, adding div's, worrying about xml literals, etc. And hence the SimpleFAQ template was born. All that is required for this FAQ template is a table on a page with a row for questions and the next row for answers. The table must also have a class of tablefaq. I know I said no source mode and I meant it. In the table properties dialog there is an advanced tab where you can add the tablefaq class without ever switching to source mode. Go ahead read on to see just how easy this is.
History
| Version | Date | Author | Description |
| 2.0 | 10/25/2009 | rberinger | Added Searching, Added some padding between questions to help break things up visually. |
| 1.0 | 09/23/2009 | rberinger | Initial Release |
Requirements
- This template requires MindTouch version: Only tested on MindTouch Core (Lyons)
How do I install it?
- Create a template, call it "Template:SimpleFAQ" (or rename as you desire). You must have UNSAFECONTENT permission for this to work.
- Create a "DekiScript" block on the template page (use the "Style" menu in the editor")
- Copy the code from the end of this page and paste it into the DekiScript block. To copy, click "expand source", then mouse over the top right corner of the source code, and click the "view source" button. This will pop up a window with the source code. Select all, then copy to clipboard.
- Make sure there isn't an extra blank paragraph after the DekiScript block! Do this every time you edit!!!
- Save.
- I also recommend downloading the attached image file and saving somewhere on your site.
- Then you must update the template with the new image location.
A quick note about the examples on this page
For all the examples on this page, the code is shown before the working example. The code is shown with the syntax extension, and looks like this:
SimpleFAQ{};
This means that the actual code on the page should be enclosed in a DekiScript block. If you want to copy the code from this page, then use the same procedure as described in steps 2-4 above.
How do I use it?
Create a table using the table dialog. This table should have 1 column and an even number of rows (1 for Question 1 for Answer). Switch to the Advanced tab in the Table Properties dialog and in the area labeled "Stylesheet Classes" enter tablefaq. Now click ok to create your table.
Arguments
| Name | Type | Default | Description |
| AnswerColor | str | #bcd4ec | Back Ground color for the answers |
| QuestionColor | str | #ecf6fc | Back Ground Color for the Questions |
| AnswerTextSize | str | 0.9em | Text size to present the Answers in. |
| QuestionSize | str | 1.5em | Text size to present the Questions in. |
Examples
In a DekiScript Block: This will transform any table on this page with the tablefaq clas
SimpleFAQ{};
| Q: Do I have to Worry About the Format of my content? | ||||||
| Answer: No, you should be able to edit with a free format type style and zero worry about source mode. its WYSIWYG all the way (Well I hope) | ||||||
| Question: Can I have a table inside my Q&A? | ||||||
| Answer: Yes you should be able to, Lets see together
Yep, looks like you can! And the Quick Search will look inside that table also!
|
Reference(s)
Please refer all question, comments to this forum thread.
Credits/Special Thanks
Everyone on the Forums for all their help and ideas.
Template/Extension Source Code
var AnswerBackGround = ($AnswerColor ?? $0 ?? '#bcd4ec');
var QuestionBackGround = ($QuestionColor ?? $1 ?? '#ecf6fc');
var AnswerSize = ($AnswerTextSize ?? $2 ?? '0.9em');
var QuestionSize = ($QuestionTextSize ?? $3 ?? '1.5em');
<p><label>'Quick Search: '</label><input type="text" id="FilterTextBox" name="FilterTextBox" /></p>
<html><head>
<script type="text/javascript">"
$(document).ready(function(){
$('.tablefaq').attr('border',0);
$('.tablefaq tr:even').addClass('tblQuestion');
$('.tablefaq tr:odd').addClass('tblAnswer');
$('.tblAnswerDiv').hide();
$('tr.tblQuestion').click(function() {
$('.arrow').removeClass('up'); $('div.tblAnswerDiv').hide();
$(this).find('.arrow').toggleClass('up'); $(this).find('div.tblAnswerDiv').toggle(); $('.tblAnswer').show();
});
$('.tablefaq tr:even').each(function() {
var QuestionCnts = $(this).find('td').eq(0).html();
var AnswerCnts = $(this).next('tr.tblAnswer').html();
$(this).next('tr.tblAnswer').html('');
$(this).find('td').eq(0).html('<span class=\"arrow\"></span><div class=\"tblQuestionDiv\">' + QuestionCnts + '</div><div class=\"tblAnswerDiv\">' + AnswerCnts + '</div><div> </div>');
$(this).find('td').eq(0).find('.tblAnswerDiv').hide();
});
//add index column with all content.
$('.tablefaq tr:has(td)').each(function(){
var t = $(this).text().toLowerCase(); //all row text
$('<td class=\"indexColumn\"></td>')
.hide().text(t).appendTo(this);
});//each tr
$('#FilterTextBox').keyup(function(){
var s = $(this).val().toLowerCase().split(' ');
//show all rows.
$('.tablefaq tr:hidden').show();
$.each(s, function(){
$(\".tablefaq tr:visible .indexColumn:not(:contains('\" + this + \"'))\").parent().hide();
});//each
});//key up.
});
"</script>
<style type="text/css">"
.tablefaq {border-style:none; border:0;}
.tblQuestion span.arrow { float:left; margin-top: 10px; margin-right:5px; background:transparent url(http://developer.mindtouch.com/@api/deki/files/4810/=arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
.tblQuestion span.up { background-position:0px 0px;}
.tblAnswerDiv {padding-left:20px; background:"..AnswerBackGround.."; font-size:"..AnswerSize.."; font-weight:normal; }
.tblQuestionDiv { background:"..QuestionBackGround.."; font-size:"..QuestionSize.."; font-weight: bold; width=100%; }
"</style>
</head></html>
Disclaimers
None.
- Was this page helpful?
- Tag page
- What links here
Files 2
| File | Version | Size | Modified | |
|---|---|---|---|---|
| ||||
| ||||
Copyright © 2011 MindTouch, Inc. Powered by