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

99

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.

javascript  php  css  yii 
— viji
quelle

Antworten:

168

Etwas wie das:

<?php  
  $baseUrl = Yii::app()->baseUrl; 
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
  $cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
— Alexander Hramov
quelle
1
soll ich das vom controller aus der ansicht aufrufen?
— user1077220
3
Sie sollten dies aus einer Sicht nennen
— Alexander Hramov
2
@ user1077220 Es macht keinen Unterschied.
— Dzhuneyt
11
CSS- und JS-Registrierungen beziehen sich auf die Ansicht. Also logischer, um es aus einer Sicht aufzurufen.
— Alexander Hramov
1
Dies sollte einmal pro Seite hinzugefügt werden (egal in welcher Ansicht Sie das obige Snippet hinzufügen)
— Alexander Hramov
47

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

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

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

— Onkar Janwa
quelle
21

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.
            ),
        ),
    ),
),
— Knito Auron
quelle
Wie würden Sie dann das Javascript dort "aufrufen", wo es implementiert werden muss?
— Novica89
4
Sie können folgendermaßen vorgehen: Yii :: app () -> clientScript-> registerCoreScript ('bootstrap');
— Knito Auron
7

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.

— Mohammad Anini
quelle
6

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/

— Truongnq
quelle
4
@Christian Dies ist kein Forum, und Sie werden aufgefordert, Fragen zu ergänzen, wenn Sie neue UND nützliche Informationen beitragen .
— Samuel Liew
@Truongnq Wenn ich diesen Block $baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/yourscript.js'); $cs->registerCssFile($baseUrl.'/css/yourcss.css');im Controller platziere, wo ordne ich ihn $csdanach zu? Außerdem habe ich actionViewin meinem Controller diese Zeile $this -> render('view', array('model' => $this -> loadModel($id), ));, sollte ich sie hier platzieren?
— Compaq LE2202x
6

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
    )
);
— Wasim Pathan
quelle
6

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();
— Abudayah
quelle
Ich bin auf dem besten Ansatz bei der Verwendung von Teilrender. Ich habe meine JS-Dateien in Konflikt. Welches ist der beste Ansatz dafür
— Chapskev
Schöne Lösung. Ich werde es in meiner Anwendung
— Entwickler
6

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');
— Ram Krishna Chaulagai
quelle
5

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.

— Auge
quelle
1

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

— gSorry
quelle
1

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.

— Anfänger
quelle
0

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>
— Elango Mani
quelle
0 
<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

— trai bui
quelle
0

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>
— Victor Azevedo
quelle
0

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">
— Rogin Thomas
quelle
0

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>
— Entwickler
quelle
0
  • In Yii werden Assets in engine / assets / Appassets.php deklariert. Dies erleichtert die Verwaltung all Ihrer CSS- und JS-Dateien Geben Sie hier die Bildbeschreibung ein
— Ahmed Mujtaba
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.