Imagine you have found the latest jQuery DatePicker that has all of the latest bells & whistles (like the one created by Keith Wood at http://keith-wood.name/datepick.html). Like most jQuery plugins, it comes with the jquery plugin (.js) file, a css file, and an example html file. So, how do you quickly add this to Raxan as a reusable widget? Simple.
Step 1: Copy the jQuery plugin file(s) to the raxan ui/javascripts directory
Step 2: Copy the plugin's css file(s) to the raxan ui/css directory
Step 3: Create the Raxan widget class file
<?php
class DatePickerWidget extends RaxanUIWidget {
protected function _init() {
// load the stylesheet jquery.datepick.css
$this->page->loadCSS('jquery.datepick');
// load the javascript
$this->page->loadScript('jquery.datepick');
// Bind the datepicker to the element
// Note that elmID is created in the RaxanUIWidget constructor so it is
// available here as the jQuery selector
c('#'.$this->elmId)->datepick();
}
}
?>
Step 4: Load the new DatePickerwidget in your page controller class
<?php
require_once 'raxan/pdi/autostart.php';
Raxan::loadWidget('datepickerwidget');
class IndexPage extends RaxanWebPage {
protected function _config() {
$this->masterTemplate ='views/master.html';
}
protected function _init() {
$this->appendView('mypage.html');
}
}
?>
Step 5: Start using your new DatePickerWidget in your views
<div class="container">
<form id="addEmployee" method="post">
<p>
<label class="rax-light-title" for="employeeName">Employee Name</label>
<input id="employeeName" class="textbox c26 round" />
</p>
<p>
<label class="rax-light-title" for="employeeBirthDate">
Employee Birth Date</label>
<br/><input id="employeeBirthDate"
class="textbox c17 round" xt-ui="DatePickerWidget" />
</p>
<p>
<input id="cmdAdd" type="submit" class="left button rtm "
value="Add Employee" xt-bind="#click,saveEmployee,,true" />
</p>
</form>
</div>
Now, when you want to use the DatePickerWidget on any page, all you have to do is call Raxan::loadWidget('datepickerwidget') in the page controller, and add the xt-ui="DatePickerWidget" on the elements that are used to get dates. Really nice!
Posts: 833
Reply #789 on : Thu June 26, 2014, 01:30:08
Posts: 833
Reply #788 on : Thu September 18, 2014, 22:57:46
Posts: 833
Reply #787 on : Thu November 13, 2014, 04:22:08
Posts: 833
Reply #786 on : Thu November 13, 2014, 05:18:41
Posts: 833
Reply #785 on : Thu November 13, 2014, 06:32:23
Posts: 833
Reply #784 on : Thu November 13, 2014, 14:05:41
Posts: 833
Reply #783 on : Fri November 14, 2014, 02:14:18
Posts: 833
Reply #782 on : Fri November 14, 2014, 04:09:31
Posts: 833
Reply #781 on : Sat November 15, 2014, 01:51:02
Posts: 833
Reply #790 on : Tue April 01, 2014, 20:06:24