Fügen Sie CSS, Javascript-Datei in Yii Framework ein

Wie füge ich eine Javascript- oder CSS-Datei in Yii Framework ein?

Ich möchte eine Seite auf meiner Website erstellen , die ein wenig Javascript - Anwendung ausgeführt hat, so möchte ich schließen .jsund .csseine bestimmte View - Dateien in.

Etwas wie das:

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

Sie können dies tun, indem Sie hinzufügen

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

Ich habe diese Frage gerne beantwortet.

Es gibt viele Orte, an denen wir CSS- und Javascript-Dateien haben, wie im CSS-Ordner, der sich außerhalb des geschützten Ordners befindet, CSS- und JS-Dateien mit Erweiterungen und Widgets, die wir irgendwann extern einschließen müssen, wenn wir Ajax häufig verwenden, JS- und CSS-Dateien mit Kern Rahmen, den wir auch irgendwann extern einbeziehen müssen. Es gibt also einige Möglichkeiten, dies zu tun.

Fügen Sie Core-JS-Dateien des Frameworks wie jquery.js, jquery.ui.js hinzu

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

Fügen Sie Dateien aus dem CSS-Ordner außerhalb des geschützten Ordners ein.

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

Fügen Sie CSS- und JS-Dateien aus Erweiterungen oder Widgets hinzu.

Hier ist Fancybox eine Erweiterung, die unter einem geschützten Ordner abgelegt wird. Dateien, die wir einschließen, haben den Pfad: / protected / extensions / fantasievolle Box / Assets /

<?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'); 
?>  

Wir können auch Kern-Framework-Dateien einschließen : Beispiel: Ich füge die CListView js-Datei hinzu.

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

• Wir müssen js-Dateien von zii-Widgets oder -Erweiterungen manchmal extern einfügen, wenn wir sie in gerenderten Ansichten verwenden, die vom Ajax-Aufruf empfangen werden, da das Laden jedes Mal, wenn eine neue Ajax-Datei geladen wird, zu Konflikten beim Aufrufen von js-Funktionen führt.

Weitere Informationen finden Sie in meinem Blog-Artikel

Einfach in Ihrer conf / main.php. Dies ist mein Beispiel mit Bootstrap. Das können Sie hier sehen

'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.
            ),
        ),
    ),
),

Fügen Sie in der Ansicht Folgendes hinzu:

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

Bitte beachten Sie den zweiten Parameter, wenn Sie die js-Datei registrieren. Dies ist die Position Ihres Skripts. Wenn Sie CClientScript :: POS_END festlegen, lassen Sie den HTML-Code rendern, bevor das Javascript geladen wird.

Es gibt viele Methoden, mit denen wir Javascript und CSS in Ihre Yii-App aufnehmen können . Heute werde ich drei einfache und hilfreiche Methoden demonstrieren.

Eine einfache Möglichkeit, js, css hinzuzufügen, indem Sie config / main.php bearbeiten

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

GetClientScript verwenden

Normalerweise fügen wir einen Codeblock in den Controller oder das Layout Ihres Themas ein

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

Oder kürzer:

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');

Fügen Sie Core-JS-Dateien hinzu

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

Schnelleres Yii-API-Dokument: http://yii.codexamples.com/

Um JS- und CSS-Dateien in eine bestimmte Ansicht aufzunehmen, können Sie dies über den Controller tun, indem Sie die Parameter übergeben false, true, die CSS und JS enthalten, z.

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

Hier ist eine gute Lösung für die Verwendung von CDN- und Offline-Skripten

Ich verwende diesen Code in jeder Anwendung, die ich erstelle, sodass Sie ihn in jeder App verwenden können.

Enthaltene Skripte:

• main.css
• main.js
• jQuery
• jQuery / CD
• Bootstrap 3.1
• Bootstrap 3.1 / CDN
• Fancybox 2
• Fancybox 2 / CDN
• FontAwesome 4
• FontAwesome 4 / CDN
• Google Analytics-Skript

SCHRITT 1:

Fügen Sie diesen Code in config / main.php ein

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

SCHRITT 2:

Erstellen Sie einen Resoreses-Ordner im Root-App-Ordner und legen Sie Ihr Skript dort ab

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

SCHRITT 3:

Fügen Sie diesen Code in components / controller.php ein

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');
        ");
    }
}

SCHRITT 4:

Rufen Sie die folgenden Funktionen in //layouts/main.php auf

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

Führen Sie diese Schritte aus, indem Sie diese Zeile zu Ihren Ansichtsdateien hinzufügen.

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

Wenn Sie sowohl CSS als auch JS Modul-Assets hinzufügen möchten, können Sie die folgende Logik verwenden. Sehen Sie, wie Sie den richtigen Pfad zu getPathOfAlias ​​angeben müssen :

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;
}

Der obige Code stammt aus der GPLed Yii-basierten Webshop- App.

Sie können auch Skripte aus der Controller-Aktion hinzufügen. Fügen Sie diese Zeile einfach in eine Aktionsmethode ein, damit das Skript nur in dieser Ansicht angezeigt wird:

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

Dabei teilt POS_HEAD dem Framework mit, dass das Skript in den Kopfbereich eingefügt werden soll

Im Yii-Framework können Sie js und css mithilfe der folgenden Methode einschließen.

Einschließlich CSS:

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

Einschließlich JS:

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

Einschließlich Bild:

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

Hinweis: Wenn Sie das Layoutkonzept in yii verwenden, können Sie CSS und JS hinzufügen, anstatt in der Ansichtsvorlage anzugeben.

Fügen Sie CSS und JS im Layoutordner hinzu. Zugriff auf eine beliebige Stelle im Projekt

  <!--// 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>

<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>

Der Link muss über das erste PHP-Tag in der Ansichtsseite eingegeben werden

Verwenden der Bootstrap-Erweiterung

meine CSS-Datei: Themes / Bootstrap / CSS / Style.css

meine js-Datei: root / js / script.js

unter theme / bootstrap / views / layouts / 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>

Dies war auch eine einfache Möglichkeit, Skript und CSS in main.php hinzuzufügen

<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">

Wenn Sie Theme verwenden, können Sie die folgende Syntax verwenden

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

CSS-Datei einschließen:

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

JS-Datei einschließen

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

Wenn Sie kein Thema verwenden

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

Verwenden Sie wie folgt

<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>

• In Yii werden Assets in engine / assets / Appassets.php deklariert. Dies erleichtert die Verwaltung all Ihrer CSS- und JS-Dateien