How to add your favorite jQuery UI plugin as a Raxan widget

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!

Stella
Posts: 824
Comment
I read your <a href=
Reply #1 on : Sat April 15, 2017, 19:09:30
I read your <a href="http://ptneqs.com">ponistg</a> and was jealous
First | Previous | Showing comments 781 to 781 of 781

Leave a Comment

Required fields are marked with *.
If you have trouble reading the code, click on the code itself to generate a new random code.