Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagexml
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-912">
			Form Elements here!
		</div>
		<div class="col-sm-3 hidden-xs">
			Disappearing Right Nav here!
		</div>
	</div>
</div>

After doing the above you should have something similar to the image below when you refresh the page

Image Removed

Make sure to note that under the layers of bootstrap we are really seeing what is in the image below

Image Removed

After you can see the two areas are technically "bounded"

Adding "Bootnav"

Ok now let's add the right navigation to this page.

Code Block
languagexml
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-9">
			Form Elements here!
		</div>
		<div class="col-sm-3 hidden-xs bootnav">
			<div class="list-group">
				<a href="?display=extensions" class="list-group-item active">Item One (active!)</a>
				<a href="?display=extensions" class="list-group-item">Item two</a>
			</div>
		</div>
	</div>
</div>

Note that we have now added a class called "bootnav" to the parent div of our "list-group" this is to ensure a consistent look and feel for all bootnavs throughout freepbx.

Each item in the nav is an anchor element as well (<a>). Whatever element is the "active" element should have the class called "active" added to it.

So let's save and refresh the page to see how this looks.

Image Removed

As you can see from our image the item that has our "active" class is highlighted in FreePBX blue.

You can now shrink your view and you should see the bootnav disappear.

Adding Floating Right Nav to Your Module

Adding Tabbable Pages

We are going to throw a lot of html in your face right now but quickly review the below html:

Code Block
languagexml
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-912">
			<div class="fpbx-container">
				<form class="fpbx-submit" name="frm_extensions" action="config.php?display=extensions" method="post" data-fpbx-delete="config.php?display=extensions&amp;extdisplay=1000&amp;action=del" role="form">
					<div class="nav-container">
						<div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
						<div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
						<div class="wrapper">
							<ul class="nav nav-tabs list" role="tablist">
								<li data-name="tab1" class="change-tab active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab1 (active!)</a></li>
								<li data-name="tab2" class="change-tab"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab2</a></li>
							</ul>
						</div>
					</div>
					<div class="tab-content display">
						<div id="tab1" class="tab-pane active">
							Tab 1 Data (Shown)
						</div>
						<div id="tab2" class="tab-pane">
							Tab 2 Data (Hidden)
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="col-sm-3 hidden-xs bootnav">
			<div class="list-group">
				<a href="?display=extensions" class="list-group-item active">Item One (active!)</a>
				<a href="?display=extensions" class="list-group-item">Item two</a>
			</div>
		</div>
	</div>
</div>

You'll notice we've now added a div with a class of "freepbx-container". This is important as it helps our CSS and Javascript match to your page and automatically perform all of the beautifulness that needs to happen. You don't have to do a thing (well besides any special tricks you'd like to perform)

...

Code Block
languagexml
<form 
  method="post"
  action="config.php?display=extensions"
  class="fpbx-submit"
  name="frm_extensions"
  data-fpbx-delete="config.php?display=extensionsmodeule&amp;extdisplay=1000&amp;action=del"
  role="form"
>

...

Code Block
languagexml
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-912">
			<div class="fpbx-container">
				<form class="fpbx-submit" name="frm_extensions" action="config.php?display=extensions" method="post" data-fpbx-delete="config.php?display=extensions&amp;extdisplay=1000&amp;action=del" role="form">
					<div class="nav-container">
						<div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
						<div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
						<div class="wrapper">
							<ul class="nav nav-tabs list" role="tablist">
								<li data-name="tab1" class="change-tab active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab1 (active!)</a></li>
								<li data-name="tab2" class="change-tab"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab2</a></li>
							</ul>
						</div>
					</div>
					<div class="tab-content display">
						<div id="tab1" class="tab-pane active">
							<div class="container-fluid">
								<div class="section-title" data-for="section1"><h3><i class="fa fa-minus"></i> Section 1</h3></div>
								<div class="section" data-id="section1">
									<div class="element-container">
										<div class="row">
											<div class="form-group form-horizontal">
												<div class="col-md-3">
													<label class="control-label" for="element1">Prompt Text</label>
													<i class="fa fa-question-circle fpbx-help-icon" data-for="element1"></i>
												</div>
												<div class="col-md-9">
													<input type="text" class="form-control" id="element1">
												</div>
												<div class="col-md-12">
													<span id="element1-help" class="help-block fpbx-help-block">Help Text</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="tab2" class="tab-pane">
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="col-sm-3 hidden-xs bootnav">
			<div class="list-group">
				<a href="?display=extensions" class="list-group-item active">Item One (active!)</a>
				<a href="?display=extensions" class="list-group-item">Item two</a>
			</div>
		</div>
	</div>
</div>

The above page will output the below result. Let's spend some time dissecting each bit.

...