BsHelpers - created by Web and Cow
This plugin is designed to CakePHP. It is an open source project available on Github and Packagist
Github Project - Issues - Packagist
Build the begin of a html's doctype or html5's doctype.
<?php echo
$this->Bs->html('My Title', 'Here is my description', 'fr');
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Description">
<?php echo
$this->Bs->html5('Title', 'Description', 'fr');
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Description">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
[string] titre - Name of the page (default = '')[string] description - Description of the page (default = '')[string] lang - Change the language (default = 'fr')Close head tag and open body tag.
<?php echo
$this->Bs->body();
?>
</head>
<body>
[string] classBody - Add a class to body tag (default = '')Close body and html tags
<?php echo
$this->Bs->end();
?>
</body>
</html>
Like the CakePHP's css function but preload by default Font Awesome, Bootstrap3 and an addon for Bootstrap3. You can easily uncheck those preloads here.
<?php echo
$this->Bs->css(array('mystyle.css'));
?>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/myproject/bs_helpers/css/bs_addon.css">
<link rel="stylesheet" type="text/css" href="/myproject/css/mystyle.css">
[mixed] path - Either a string of the CSS file to link, or an array with multiple files (default = array())[array] options - An array of options or html attributes (default = array())Like the CakePHP's script function but preload by default JQuery and Bootstrap3. You can easily uncheck those preloads here.
<?php echo
$this->Bs->js(array('myscript.js'));
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/myproject/js/myscript.js"></script>
[array] arrayJs - Either a string to a single JavaScript file, or an array of strings for multiple files (default = array())Close end div tags.
<?php echo
$this->Bs->close(2);
?>
</div>
</div>
[int] nb - Number of div you want to close (default = 1)Open a div with container class.
<?php echo
$this->Bs->container();
?>
<div class="container">
[array] options - Options of the div element (default = array())Open a div with row class.
<?php echo
$this->Bs->row();
?>
<div class="row">
[array] options - Options of the div element (default = array())Create a div element with grid system class of Bootstrap.
<?php echo
$this->Bs->col('xs12', 'sm4 of3', 'md2 pl1', 'lg9 ph3', array('class' => 'myClass', 'id' => 'myId'));
?>
<div class="col-xs-12 col-sm-4 col-sm-offset-3 col-md-2 col-md-pull-1 col-lg-9 col-lg-push-3 myClass" id="myId">
Params are differents layouts, but they are not all obligatory. For example, you can just defined classes for xs and md layouts.
To define a layout class, write the bootstrap shortcut layout (xs, sm, md or lg) and the lenght of the column (1 to 12, in case of 12 columns).
You can add offset, push or pull to the layout class by writing of, ph, pl and then the number of the length to generate respectively offset, push or pull.
[string] layouts - You can define as many layout you want by separating them with a comma. (ex : 'xs12', 'md3')
[array] options - Options of the div element (default = array())
Initialize the table.
<?php
$columns = array(
array(
'title' => 'First column',
'width' => '10',
'hidden' => array('xs')
),
array(
'title' => 'Second column',
'width' => '90'
)
);
echo
$this->Bs->table($columns);
?>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="l_10 hidden-xs">First column</th>
<th class="l_90">Second column</th>
</tr>
</thead>
<tbody>
[array] titles - Create the thead of the table[string] title --> name of the column[string] width --> width of the column (5 to 100 and 5 by 5. The total of columns' width should be 100)[array] hidden --> different layouts where the column is invisible (default = array())[array] class - Classes of the table (hover, striped, etc)[bool] rowlink
- False by default, set the table row as clickable if true (check setCellLink and cell for more information, or see the example here)
Create a cell.<tr> and </tr> elements are auto-generated by default.
<?php echo
$this->Bs->cell('Content of my cell', 'cellClass');
?>
<td class="cellClass">Content of my cell</td>
[string] content - Informations in the cell[string] class - Class(es) of the cell (default = '')[bool] rowlink
- True by default, define if a cell will be clickable when rowlink on table is true. See the example here.
[boolean] autoformat - Autogenerate </tr> in the end of the line (default = true)Set the link of a cell for a whole row
<?php echo
$this->Bs->setCellLink('thisIsAGreatLink');
?>
[string] link - Set the link of every cell in a rowColor a line. (the <tr> element)
<?php echo
$this->Bs->lineColor('success');
?>
<tr class="success">
[string] color - Color of the line (active, success, warning, danger)Close the table.
<?php echo
$this->Bs->endTable();
?>
</tbody>
</table>
</div>
Show a bootstrap alert.
<?php echo
$this->Bs->alert('Oops, something is wrong here !', 'warning');
?>
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Oops, something is wrong here !
</div>
[string] text - Text displayed.[string] state - Color of the alert (info, success, warning, danger)[array] options - Some options like "class", "data-*", "id", or "dismiss" (boolean true by default, to display or not the cross). (default = array())Show an image. Like $this->Html->image(), but add the class "img-responsive" by default.
<?php echo
$this->Bs->image('/mypicture');
?>
<img src="/myproject/mypicture" class="img-responsive" alt="">
[string] path - Path to the image.[array] options - An array of html attributes. (default = array())Show a Font Awesome Icon.
<?php echo
$this->Bs->icon('user', array('2x'), array('id' => 'myIcon'));
?>
<i class="fa fa-user fa-2x" id="myIcon"></i>
[string] iconLabel - Label of the icon.[array] classes - Font Awesome classes. (default = array())[array] attributes - An array of html attributes. (default = array())Create a Bootstrap button.
<?php echo
$this->Bs->btn('Try it !', array('controller' => 'myController', 'action' => 'myAction'), array('size' => 'md', 'tag' => 'button', 'type' => 'success'));
?>
<button class="btn btn-success btn-md">Try it !</button>
[string] text - Text in the button.[mixed] url - URL of the link, in case of <a> tag. It can be a url like CakePHP (with array). (default = array())[array] options - Options button. (default = array())[string] type --> Success, info, danger, warning, default, link, primary[string] size --> xs, sm, md, lg[array] tag --> a (for a link), button (for a button), etc.[boolean] confirmMessage - In case of <a> tag, you can define a native confirmation message. (default = false)Create a Bootstrap modal.
<?php echo
$this->Bs->modal(
'My awesome modal',
'This is not a lorem ipsum. There are so many informations in that modal !',
array('class' => 'awesomeModal'),
array('open' => 'See it', 'close' => 'Back', 'confirm' => array('name' => 'Send !', 'class' => 'btn-warning', 'link' => array('controller' => 'myController', 'action' => 'myAction')))
);
?>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#e447e7pjeroaldf">See it</button> <div class="modal fade awesomeModal" id="e447e7pjeroaldf" tabindex="-1" role="dialog" aria-labelledby="e447e7pjeroaldfLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="e447e7pjeroaldfLabel">My awesome modal</h4> </div> <div class="modal-body"> <p>This is not a lorem ipsum. There are so many informations in that modal !</p> </div> <div class="modal-footer"> <button class="btn btn-link" data-dismiss="modal">Back</button> <a href="/myProject/myController/myAction" class="btn btn-warning">Send !</a> </div> </div> </div> </div>
An other example, with a form inside. It's recommended to not define your submit button in the modal body. It will be generated with a button in the modal footer if in options 'form' => true.
<?php
$form =
$this->BsForm->create('Model', array('action' => 'myAction')).
$this->BsForm->input('field', array('value' => 'Whatever you want')).
$this->BsForm->end();
echo
$this->Bs->modal('My awesome modal 2', $form, array('form' => true), array('open' => array('name' => 'Form modal', 'class' => 'btn-danger'), 'confirm' => array('name' => 'Send', 'link' => array('controller' => 'myController', 'action' => 'myAction'))));
?>
<button class="btn btn-danger" data-toggle="modal" data-target="#ffvr4jn9z6r1p2p">Form modal</button> <div class="modal fade" id="ffvr4jn9z6r1p2p" tabindex="-1" role="dialog" aria-labelledby="ffvr4jn9z6r1p2pLabel" aria-hidden="true" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <form action="/myProject/models/myAction" role="form" class="form-horizontal" id="ModelMyActionForm" method="post" accept-charset="utf-8"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="ffvr4jn9z6r1p2pLabel">My awesome modal 2</h4> </div> <div class="modal-body"> <div style="display:none;"> <input type="hidden" name="_method" value="POST"> </div> <div class="form-group"> <label for="ModelField" class="control-label col-md-3">Field</label> <div class="col-md-9"> <input name="data[Model][field]" value="Whatever you want" class="form-control" type="text" id="ModelField"> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-submit btn-success">Send</button> </div> </form> </div> </div> </div>
[string] header - Text of the header.[string] body - Content of the body.[array] options - Used to add custom ID, class or a form into the modal. (default = array())[boolean] form --> Useful to place the submit button in modal footer.[string] id --> An id is auto-generated by default, but you can replace it if you want.[string] classes --> Different classes for the modal.[array] buttons - To customize the buttons. By default, no button is displayed except the open button. (default = array())For open and close button, you can just edit their name without associatives array if it's like that : array('open' => 'My text')
[mixed] open --> The button to open the modal.[string] name --> The text of the button (or the name of icon if the index "button" is false.[boolean] button --> Select if you want a button or an icon to open the modal. (default = true)[string] class --> Different classes.[mixed] close --> The button to close the modal (default none).[string] name --> The text of the button.[string] class --> Different classes.[array] confirm --> The button to confirm the modal.[string] name --> The text of the button. (obligatory if you define a confirm button)[mixed] link --> URL to go (can be a CakePHP URL array). (obligatory if you define a confirm button)[string] class --> Different classes.Create a Bootstrap button with a confirm like a Bootstrap Modal.
<?php echo
$this->Bs->confirm('Send', array('controller' => 'myController', 'action' => 'myAction'), array('texte' => 'Do you want to confirm ?'));
?>
<button class="btn btn-success" data-toggle="modal" data-target="#r884jrjd1f4azja">Send</button> <div class="modal fade " id="r884jrjd1f4azja" tabindex="-1" role="dialog" aria-labelledby="r884jrjd1f4azjaLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="r884jrjd1f4azjaLabel">Send</h4> </div> <div class="modal-body"> <p>Do you want to confirm ?</p> </div> <div class="modal-footer"> <button class="btn btn-link" data-dismiss="modal">Fermer</button> <a href="/myProject/myController/myAction" class="btn btn-success">Send</a> </div> </div> </div> </div>
[string] button - Text in the button.[mixed] link - URL of the link. It can be a url like CakePHP (with array).[array] options - Options button. (default = array())[string] texte --> The text inside the modal[string] button --> The name of the confirm button[string] color --> The color of the open button and the confirm button ("success", "danger", etc)[string] header --> The text of the modal headerBsHelpers - created by Web and Cow
This plugin is designed to CakePHP. It is an open source project available on Github and Packagist
Github Project - Issues - Packagist