Jquery Mobile Widgets

Yii 1.1 General Discussion
1

I’d like to continue using zii widgets for the full site then add support for mobile devices. Using jQuery mobile seemed to be the most direct path. I have not yet figured out the best way to use jQuery Mobile instead of jQuery UI for zii widgets. Simply changing a widget’s ‘cssFile’ and ‘scriptFile’ is insufficient. The site detects the use of a mobile device and can switch as necessary. I’ve read that jQuery UI and jQuery Mobile should be able to coexist but in my case and others they interfere with each other. I also tried including the jQuery UI stylesheet before the jQuery Mobile stylesheet as recommended but there is still contention between the two. Adding and modifying jQuery UI styles to jQuery Mobile is tedious and just seems to be the wrong way to solve this problem.

Anyone have ideas? Should zii widgets be replaced with something else when mobile?

2

Hi

I’ve started a small experiment once and my idea was to create widgets for jQueryMobile.

This is not exactly a reply to your question which is about co-existance of jQuery-ui and jQuery-mobile, but the idea is sharing about the ‘jQueryMobile’ topic.

I made a PageWidget for instance:





class JM_PageWidget extends CWidget {

    public $header;

    public $footer;


    public $title;


    public function init() {

    }


    public function run() {

        $this->renderContent();

        $content=ob_get_clean();


        $pageOptions = array('data-role'=>'page','id'=>$this->getId());

        if(isset($this->title)) {

            $pageOptions['data-title']=$this->title;

        }

        echo CHtml::openTag('div',$pageOptions);

        $this->renderHeader();

        echo CHtml::tag('div',array('data-role'=>'content'),$content);

        $this->renderFooter();

        echo CHtml::closeTag('div');

    }


    public function renderHeader() {

        if(isset($this->header)) {

            echo CHtml::tag('div',array('data-role'=>'header'),$this->header);

        }

    }


    public function renderFooter() {

        if(isset($this->footer)) {

            echo CHtml::tag('div',array('data-role'=>'footer'),$this->footer);

        }

    }


    public function renderContent() {

    }

}

And I overloaded CHtml to change the button implementation:




class jHtml extends CHtml {

    public static function button($label='button', $htmlOptions=array()) {

        if(!isset($htmlOptions['name'])) {

            $htmlOptions['name']=self::ID_PREFIX.self::$count++;

        }

        if(isset($htmlOptions['icon'])) {

            $iconref=$htmlOptions['name'].'-icon';

            $htmlOptions['data-icon']=$iconref;

            Yii::app()->clientScript->registerCss($iconref, ".ui-icon-$iconref {background-image:url({$htmlOptions['icon']});}");

            unset($htmlOptions['icon']);

        }

        if(isset($htmlOptions['height'])) {

            $h=intval($htmlOptions['height']);

            $mt=intval(-$h/2);

            Yii::app()->clientScript->registerCss(

            $htmlOptions['name'].'#height',

            "a[name='{$htmlOptions['name']}'] .ui-icon {height:{$h}px; margin-top:{$mt}px;}"

            ."a[name='{$htmlOptions['name']}'] .ui-btn-inner {height:{$h}px;}"

            );

            unset($htmlOptions['height']);

        }

        if(isset($htmlOptions['width'])) {

            $h=$htmlOptions['width'];

            $mt=-$h/2;

            Yii::app()->clientScript->registerCss(

            $htmlOptions['name'].'#width',

            "a[name='{$htmlOptions['name']}'] .ui-icon {width:{$h};" // margin-top:{$mt}px;}

            ."a[name='{$htmlOptions['name']}'] .ui-btn-inner {width:{$h}px;}"

            );

            unset($htmlOptions['width']);

        }


        $htmlOptions['data-role']='button';

        return self::tag('a',$htmlOptions,$label);

    }

}

and ended up with a different layout:





<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<?php Yii::app()->clientScript->registerCoreScript('jquery');

Yii::app()->clientScript->registerCssFile("http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css");

Yii::app()->clientScript->registerScriptFile("http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js");

Yii::app()->clientScript->registerScript('jquery-cors', 'jQuery.support.cors=true',CClientScript::POS_READY);

?>

<title><?php echo CHtml::encode($this->pageTitle); ?></title>

</head>

<body>

<?php echo $content;?>

</body>

</html>
3

Maurizio Domba stated in another post here

I believe this is what I’m facing. I was just hoping this had already been done by now to avoid reinventing the wheel.