Sluit CSS, JavaScript-lêer in Yii Raamwerk

Question

Hoe om 'n Javascript of CSS-lêer in Yii raamwerk sluit?

Ek wil 'n bladsy oor my site wat 'n bietjie Javascript aansoek hardloop het te skep, so ek wil .js en .css lêers sluit in 'n spesifieke siening.

Answer 1

Iets soos hierdie:

<?php  
  $baseUrl = Yii::app()->baseUrl; 
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
  $cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>

Answer 2

Jy kan dit doen deur die toevoeging van

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/script');

Answer 3

Ek wou hierdie vraag te beantwoord.

Hulle is baie plekke waar ons css & JavaScript-lêers, soos in css gids wat buite die beskermde gids, css & JS lêers van uitbreiding & widgets wat ons nodig het om buite iewers sluit wanneer gebruik Ajax 'n baie, JS & css lêers van kern raamwerk wat ook ons ??moet ekstern iewers in te sluit. So hulle is 'n paar maniere om dit te doen.

Sluit kern js lêers van raamwerk soos jquery.js, jquery.ui.js

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

Sluit lêers van css gids buite beskermde gids.

<?php 
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/example.css');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/css/example.js');
?>

Sluit css & JS lêers van uitbreiding of widgets.

Hier fancybox is 'n uitbreiding wat onder beskermde gids geplaas. Lêers ons insluitende het pad: / beskerm / uitbreidings / fancybox / bates /

<?php
// Fancybox stuff.
$assetUrl = Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('ext.fancybox.assets'));
Yii::app()->clientScript->registerScriptFile($assetUrl.'/jquery.fancybox-1.3.4.pack.js'); 
Yii::app()->clientScript->registerScriptFile($assetUrl.'/jquery.mousewheel-3.0.4.pack.js'); 
?>  

Kan ons ook insluit kern raamwerk lêers: Byvoorbeeld:. Ek insluitend CListView JS lêer

<?php
$baseScriptUrl=Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('zii.widgets.assets'));
Yii::app()->clientScript->registerScriptFile($baseScriptUrl.'/listview/jquery.yiilistview.js',CClientScript::POS_END);  
?>

• Ons moet js lêers van zii widgets of uitbreiding sluit ekstern soms wanneer ons dit gebruik in gelewer siening wat ontvang word vanaf Ajax oproep, want laai elke keer nuwe Ajax lêer konflik te skep in 'n beroep JS funksies.

Vir meer detail Kyk na my blog artikel

Answer 4

Easy in jou conf / main.php. Dit is my voorbeeld met bootstrap. Jy kan sien dat hier

'components'=>array(
    'clientScript' => array(
        'scriptMap' => array(
            'jquery.js'=>false,  //disable default implementation of jquery
            'jquery.min.js'=>false,  //desable any others default implementation
            'core.css'=>false, //disable
            'styles.css'=>false,  //disable
            'pager.css'=>false,   //disable
            'default.css'=>false,  //disable
        ),
        'packages'=>array(
            'jquery'=>array(                             // set the new jquery
                'baseUrl'=>'bootstrap/',
                'js'=>array('js/jquery-1.7.2.min.js'),
            ),
            'bootstrap'=>array(                       //set others js libraries
                'baseUrl'=>'bootstrap/',
                'js'=>array('js/bootstrap.min.js'),
                'css'=>array(                        // and css
                    'css/bootstrap.min.css',
                    'css/custom.css',
                    'css/bootstrap-responsive.min.css',
                ),
                'depends'=>array('jquery'),         // cause load jquery before load this.
            ),
        ),
    ),
),

Answer 5

In die oog, voeg die volgende:

<?php  
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile('/js/yourscript.js', CClientScript::POS_END);
  $cs->registerCssFile('/css/yourcss.css');
?>

Let asseblief kennis van die tweede parameter wanneer jy die lêer JS registreer, dit is die posisie van jou script, wanneer jy dit CClientScript :: POS_END stel, jy laat die HTML lewer voor die javascript gelaai.

Answer 6

Daar is baie metodes wat ons kan insluit javascript , css in jou Yii App . Vandag sal ek demonstreer drie eenvoudige en helpul metodes.

'n eenvoudige manier om JS voeg, css deur redigering config / main.php

// application components
  'components'=>array(
         // ...
        'clientScript'=>array(
            'packages'=>array(
                'jquery'=>array(
                    'baseUrl'=>'//ajax.googleapis.com/ajax/libs/jquery/1/',
                    'js'=>array('jquery.min.js'),
                )
            ),
        ),
        // ...
  ),

Die gebruik van getClientScript

Gewoonlik Ons voeg in blok kode in Controller of uitleg van jou tema

$baseUrl = Yii::app()->baseUrl; 
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/js/yourscript.js');
$cs->registerCssFile($baseUrl.'/css/yourcss.css');

of korter:

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/javascript/file',CClientScript::POS_END);
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/path/to/css/file');

Sluit kern js lêers

Yii::app()->clientScript->registerCoreScript('jquery');     
Yii::app()->clientScript->registerCoreScript('jquery.ui');

Faster Yii API Document: http://yii.codexamples.com/

Answer 7

Om JS en CSS lêers sluit in 'n spesifieke siening jy kan dit doen via kontroleerder deur verby die parameters false, true, wat die CSS en JS vir, Bv sal die volgende insluit:.

$this->renderPartial(
    'yourviewname',
    array(
        'model' => $model,
        false,
        true
    )
);

Answer 8

hier is 'n goeie oplossing vir CDN en af ??skrifte

gebruik

Ek gebruik hierdie kode in elke aansoek I bou, sodat jy dit kan gebruik in enige app.

Ingesluit Scripts:

• main.css
• main.js
• jQuery
• jQuery / CD
• Skoenlus 3.1
• Skoenlus 3.1 / CDN
• Fancybox 2
• Fancybox 2 / CDN
• FontAwesome 4
• FontAwesome 4 / CDN
• Google Analytics Script

Stap1:

sit hierdie kode in config / main.php

        'params'=>array(
            'cdn'=>true, // or false
...

STEP2:

skep resoreses gids in die wortel app gids en sit jou script daar

res/
--js
--css
--img
--lib
--style
..

Stap3:

sit hierdie kode in komponente / controller.php

public function registerDefaults() 
{
    $cs = Yii::app()->clientScript;

    if (Yii::app()->params['cdn']){
        $cs->scriptMap = array(
            'jquery.js' => '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
            'jquery.min.js' => '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
        );
        $cs->packages = array(
            'bootstrap' => array(
                'basePath' => 'application.res',
                'baseUrl' => '//netdna.bootstrapcdn.com/bootstrap/3.1.1/',
                'js' => array('js/bootstrap.min.js'),
                'css' => array('css/bootstrap.min.css'),
                'depends' => array('jquery')
            ),
        );
    } else {
        $cs->packages = array(
            'bootstrap' => array(
                'basePath' => 'application.res',
                'baseUrl' => Yii::app()->baseUrl . '/res/lib/bootstrap/',
                'js' => array('js/bootstrap.js'),
                'css' => array('css/bootstrap.css'),
                'depends' => array('jquery')
            ),
        );
    }

    $cs->registerPackage('bootstrap');

    $cs->registerCSSFile(Yii::app()->baseUrl . '/res/style/main.css');
    $cs->registerScriptFile(Yii::app()->baseUrl . '/res/js/main.js');
}

public function registerFancybox($buttons = false, $thumbs = false) 
{
    $cs = Yii::app()->clientScript;

    $cs->packages = array(
        'fancybox' => array(
            'basePath' => 'application.res',
            'baseUrl' => Yii::app()->baseUrl . '/res/lib/fancybox/',
            'js' => array('lib/jquery.mousewheel-3.0.6.pack.js', 'source/jquery.fancybox.pack.js'),
            'css' => array('source/jquery.fancybox.css'),
            'depends' => array('jquery')
        ),
        'fancybox-buttons' => array(
            'basePath' => 'application.res',
            'baseUrl' => Yii::app()->baseUrl . '/res/lib/fancybox/source/helpers/',
            'js' => array('jquery.fancybox-buttons.js'),
            'css' => array('jquery.fancybox-buttons.css'),
        ),
        'fancybox-thumbs' => array(
            'basePath' => 'application.res',
            'baseUrl' => Yii::app()->baseUrl . '/res/lib/fancybox/source/helpers/',
            'js' => array('jquery.fancybox-thumbs.js'),
            'css' => array('jquery.fancybox-thumbs.css'),
        )
    );

    $cs->registerPackage('fancybox');
    if ($buttons)
        $cs->registerPackage('fancybox-buttons');
    if ($thumbs)
        $cs->registerPackage('fancybox-thumbs');
}

public function registerFontAwesome(){

    $cs = Yii::app()->clientScript;

    if (Yii::app()->params['cdn']):
        $cs->packages = array(
            'fontAwesome' => array(
                'basePath' => 'application.res',
                'baseUrl' => '//netdna.bootstrapcdn.com/font-awesome/4.0.0/',
                'css' => array('css/font-awesome.min.css'),
            )
        );
    else:
        $cs->packages = array(
            'fontAwesome' => array(
                'basePath' => 'application.res',
                'baseUrl' => Yii::app()->baseUrl . '/res/lib/font-awesome/',
                'css' => array('/css/font-awesome.min.css'),
            )
        );
    endif;

    $cs->registerPackage('fontAwesome');
}

public function registerGoogleAnalytics()
{
    if($this->config('settings_google_analytics_id')){
        Yii::app()->clientScript->registerScript('GA',"
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', '".Yii::app()->params['cdn']."', '{$_SERVER['SERVER_NAME']}');
            ga('send', 'pageview');
        ");
    }
}

Stap4:

noem die funksies soos hierdie in //layouts/main.php

Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();

Answer 9

Doen iets soos hierdie by te voeg hierdie lyn om jou siening lêers;

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/javascript/file');
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/path/to/css/file');

Answer 10

Ook, as jy wil module bates beide CSS en JS voeg, kan jy die volgende logika gebruik. Sien hoe jy nodig het om die korrekte pad na getPathOfAlias ?? dui:

public static function register($file)
{
    $url = Yii::app()->getAssetManager()->publish(
    Yii::getPathOfAlias('application.modules.shop.assets.css'));

    $path = $url . '/' . $file;
    if(strpos($file, 'js') !== false)
        return Yii::app()->clientScript->registerScriptFile($path);
    else if(strpos($file, 'css') !== false)
        return Yii::app()->clientScript->registerCssFile($path);

    return $path;
}

Die bogenoemde kode is geneem uit GPLed Yii gebaseer Webwinkel inligting.

Answer 11

Jy kan ook skrifte voeg by kontroleerder aksie. voeg net hierdie lyn in 'n aksie metode dan dat script kry as net in daardie oog:

Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/custom.js', CClientScript::POS_HEAD);

waar POS_HEAD vertel raamwerk om script in die kop gedeelte sit

Answer 12

In Yii raamwerk, Jy kan die volgende insluit js en css met behulp van onder metode.

Insluitend CSS:

{Yii::app()->request->baseUrl}/css/styles.css

Insluitend JS:

{Yii::app()->request->baseUrl}/js/script.js

Insluitend Image:

{Yii::app()->request->baseUrl}/images/logo.jpg

Nota:. Deur die gebruik van uitleg konsep in yii, Jy kan css en JS plaas voeg van die spesifiseer in die lig sjabloon

Answer 13

  

Voeg die CSS en JS in Die uitleg Folder.Access oral in die projek

  <!--// Stylesheets //-->
    <?php
        $themepath=Yii::app()->theme->baseUrl;
        Yii::app()->clientScript->registerCoreScript("jquery");
    ?>

        <link href="<?php echo $themepath."/css/custom.css"; ?>" rel="stylesheet" media="all" />


<!--// Javascript //-->
<?php Yii::app()->clientScript->registerCoreScript("jquery"); ?>
</script> -->
<script type="text/javascript" src="<?php echo $themepath; ?>/js/video.min.js"></script>

Answer 14

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="/news/js/popup.js"></script>

skakel moet insette oor die eerste PHP tag in die oog pag

Answer 15

Die gebruik van bootstrap uitbreiding

my css lêer: temas / bootstrap / css / style.css

my js lêer: wortel / js / script.js

by tema / bootstrap / sienings / uitleg / main.php

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/styles.css" />

<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/script.js"></script>

Answer 16

Dit was ook 'n maklike manier om script en css in main.php voeg

<script src="<?=Yii::app()->theme->baseUrl; ?>/js/bootstrap.min.js"></script>
<link href="<?=Yii::app()->theme->baseUrl; ?>/css/bootstrap.css" rel="stylesheet" type="text/css">

Answer 17

As jy 'Tema dan kan jy die onderstaande Syntax

Yii::app()->theme->baseUrl

sluit CSS lêer:

<link href="<?php echo Yii::app()->theme->baseUrl;?>/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">

Neem JS lêer

<script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery-2.2.3.min.js"></script>

As jy nie die gebruik van tema

Yii::app()->request->baseUrl

Gebruik Soos dit

<link href="<?php echo Yii::app()->request->baseUrl; ?>/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery-2.2.3.min.js"></script>

Answer 18

• In Yii bates verklaar in enjin / bates / Appassets.php Dit maak makliker om al jou css en JS-lêers te bestuur