Yii फ्रेमवर्क में CSS, जावास्क्रिप्ट फ़ाइल शामिल करें

99

Yii फ्रेमवर्क में जावास्क्रिप्ट या CSS फ़ाइल कैसे शामिल करें?

मैं अपनी साइट पर एक पेज बनाना चाहता हूं जिसमें एक छोटा जावास्क्रिप्ट एप्लिकेशन चल रहा है, इसलिए मैं एक विशिष्ट दृश्य में शामिल करना चाहता हूं .jsऔर .cssफाइल करना चाहता हूं ।

— विजी
स्रोत

168

कुछ इस तरह:

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

— अलेक्जेंडर हरामोव
स्रोत

1

क्या मुझे इसे देखने के नियंत्रक से कॉल करना चाहिए?

— user1077220

3

आपको इसे एक दृश्य से कॉल करना चाहिए

— अलेक्जेंडर हरामोव

2

@ user1077220 इससे कोई फर्क नहीं पड़ता।

— Dzhuneyt

11

सीएसएस और जेएस पंजीकरण देखने से संबंधित हैं। तो तार्किक रूप से इसे एक दृश्य से कॉल करने के लिए।

— अलेक्जेंडर हरामोव

1

इसे प्रति पृष्ठ एक बार जोड़ा जाना चाहिए (कोई बात नहीं जिसमें आप स्निपेट के ऊपर जोड़ेंगे)

— अलेक्जेंडर हरामोव

47

आप ऐसा करके जोड़ सकते हैं

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

— ysing
स्रोत

33

मुझे इस सवाल का जवाब देना अच्छा लगा।

उनकी कई जगहें हैं जहां हमारे पास सीएसएस और जावास्क्रिप्ट फाइलें हैं, जैसे सीएसएस फ़ोल्डर में जो संरक्षित फ़ोल्डर के बाहर है, एक्सटेंशन और विजेट्स की सीएसएस और जेएस फाइलें जो हमें कुछ समय में बाह्य रूप से शामिल करने की आवश्यकता होती हैं जब अजाक्स का उपयोग करें, कोर के जेएस और सीएसएस फाइलें ढांचा जिसे हमें कुछ समय के लिए बाह्य रूप से शामिल करने की भी आवश्यकता होती है। तो ऐसा करने के लिए उनके कुछ तरीके हैं।

Jquery.js, jquery.ui.js जैसे चौखटे की कोर js फाइलें शामिल करें

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

सुरक्षित फ़ोल्डर के बाहर सीएसएस फ़ोल्डर से फ़ाइलें शामिल करें।

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

एक्सटेंशन या विजेट्स से सीएसएस और जेएस फाइलें शामिल करें।

यहां फैंसीबॉक्स एक एक्सटेंशन है जिसे संरक्षित फ़ोल्डर में रखा गया है। हमारे पास मौजूद फ़ाइलें पथ हैं: / संरक्षित / एक्सटेंशन / फैंसीबॉक्स / संपत्ति /

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

इसके अलावा, हम कोर फ्रेमवर्क फाइलें शामिल कर सकते हैं: उदाहरण: मैं CListView js फाइल सहित हूं।

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

हमें कभी-कभी जब हम उन्हें रेंडर व्यू में उपयोग करते हैं, जो कि ajax कॉल से प्राप्त होते हैं, तो jii विजेट्स या एक्सटेंशन की js फाइलों को शामिल करने की आवश्यकता होती है, क्योंकि हर बार नई ajax फाइल लोड करने पर js फ़ंक्शन को कॉल करने में संघर्ष पैदा होता है।

अधिक विस्तार के लिए मेरे ब्लॉग के लेख को देखें

— ओंकार जनवा
स्रोत

21

आपके कॉन्फिडेंस / मेन.फपी में आसान है। यह बूटस्ट्रैप के साथ मेरा उदाहरण है। आप यहां देख सकते हैं

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

— नितो औरोन
स्रोत

तो फिर आप जावास्क्रिप्ट को "कॉल" कैसे करेंगे जहां आपको इसे लागू करने की आवश्यकता है?

— Novica89

4

आप इस तरह से उपयोग कर सकते हैं: Yii :: app () -> clientScript-> registerCoreScript ('बूटस्ट्रैप');

— नितो औरोन

7

दृश्य में, निम्नलिखित जोड़ें:

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

जब आप js फ़ाइल को पंजीकृत करते हैं तो कृपया दूसरे पैरामीटर पर ध्यान दें, यह आपकी स्क्रिप्ट की स्थिति है, जब आप इसे CClientScript :: POS_END सेट करते हैं, तो आप HTML को जावास्क्रिप्ट लोड होने से पहले रेंडर करते हैं।

— मोहम्मद अनीनी
स्रोत

6

कई तरीके हैं जो हम जावास्क्रिप्ट, सीएसएस को अपने वाईआई ऐप में शामिल कर सकते हैं । आज मैं तीन सरल और सहायक विधियों का प्रदर्शन करूंगा।

Config / main.php को एडिट करके js, css जोड़ने का एक सरल तरीका

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

GetClientScript का उपयोग करना

आमतौर पर, हम कोड के नियंत्रक या आपकी थीम के लेआउट में जोड़ते हैं

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

या कम:

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

कोर जेएस फाइलें शामिल करें

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

तेज़ Yii API दस्तावेज़: http://yii.codexamples.com/

— Truongnq
स्रोत

4

@Christian यह एक मंच नहीं है, और यदि आप नई और उपयोगी जानकारी का योगदान कर रहे हैं, तो आपको सवालों में जोड़ने के लिए प्रोत्साहित किया जाता है ।

— शमूएल ल्यू

@ ट्रोंगनक अगर मैं इस ब्लॉक

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

को कंट्रोलर में रखता हूं , तो मैं कहां काम करूंगा $cs? इसके अलावा, actionViewमेरे नियंत्रक में मेरे पास यह रेखा है $this -> render('view', array('model' => $this -> loadModel($id), ));, क्या मुझे इसे यहाँ रखना चाहिए?

— कॉम्पैक LE2202x

6

जेएस और सीएसएस फ़ाइलों को एक विशिष्ट दृश्य में शामिल करने के लिए आप इसे मापदंडों के माध्यम से नियंत्रक के माध्यम से कर सकते हैं false, true, जिसमें सीएसएस और जेएस शामिल होंगे, जैसे:

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

— वसीम पठान
स्रोत

6

सीडीएन और ऑफलाइन स्क्रिप्ट का उपयोग करने के लिए यहां एक अच्छा समाधान है

मैं इस कोड का उपयोग मेरे द्वारा बनाए गए प्रत्येक एप्लिकेशन में करता हूं, इसलिए आप इसे किसी भी ऐप में उपयोग कर सकते हैं।

शामिल लिपियों:

main.css
main.js
jQuery
jQuery / सीडी
बूटस्ट्रैप 3.1
बूटस्ट्रैप 3.1 / CDN
फैंसीबॉक्स 2
फैंसीबॉक्स 2 / सीडीएन
FontAwesome 4
FontAwesome 4 / सीडीएन
Google Analytics स्क्रिप्ट

चरण 1:

इस कोड को config / main.php में डालें

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

चरण 2:

रूट एप फोल्डर में रिसोर्स फोल्डर बनाएं और वहां अपनी स्क्रिप्ट लगाएं

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

चरण 3:

इस कोड को कंपोनेंट्स / कंट्रोलर में डालिए। एफपी

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

चरण 4:

इस तरह के कार्यों को //layouts/main.php पर कॉल करें

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

— Abudayah
स्रोत

आंशिक रेंडर का उपयोग करते समय मैं सर्वश्रेष्ठ दृष्टिकोण पर अटक गया हूं। मेरे जेएस फाइलें परस्पर विरोधी हैं। इसके लिए सबसे अच्छा तरीका कौन सा है

— चाप्सकेव

अच्छा समाधान। मैं इसे अपने आवेदन में कोशिश करूंगा

— डेवलपर

6

इन लाइन को अपनी दृश्य फ़ाइलों में जोड़कर कुछ इस तरह से करें;

Yii :: एप्लिकेशन () -> clientScript-> registerScriptFile (Yii :: एप्लिकेशन () -> baseurl '/ path / to / अपने / जावास्क्रिप्ट / फ़ाइल'।);
Yii :: एप्लिकेशन () -> clientScript-> registerCssFile (Yii :: एप्लिकेशन () -> baseurl '/ path / to / सीएसएस / फ़ाइल'।);

— राम कृष्ण चुलगई
स्रोत

5

साथ ही, यदि आप CSS और JS दोनों में मॉड्यूल एसेट जोड़ना चाहते हैं, तो आप निम्न तर्क का उपयोग कर सकते हैं। देखें कि आपको getPathOfAlias के सही रास्ते को कैसे इंगित करना है :

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

उपरोक्त कोड GPLed Yii आधारित Webshop ऐप से लिया गया है ।

— आंख
स्रोत

1

आप नियंत्रक क्रिया से स्क्रिप्ट भी जोड़ सकते हैं। बस इस पंक्ति को एक क्रिया विधि में जोड़ें, तो वह स्क्रिप्ट केवल उस दृश्य में दिखाई देगी:

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

जहां POS_HEAD स्क्रिप्ट को हेड सेक्शन में रखने के लिए फ्रेमवर्क बताता है

— gSorry
स्रोत

1

Yii फ्रेमवर्क में, आप नीचे विधि का उपयोग करके js और css शामिल कर सकते हैं।

सीएसएस सहित:

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

जेएस सहित:

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

छवि सहित:

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

नोट: yii में लेआउट कॉन्सेप्ट का उपयोग करके, आप व्यू टेम्प्लेट में निर्दिष्ट करने के बजाय css और js जोड़ सकते हैं।

— शुरुआती
स्रोत

0

परियोजना में कहीं भी लेआउट फ़ोल्डर में CSS और JS जोड़ें

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

— एलंगो मणि
स्रोत

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>

लिंक को दृश्य पृष्ठ में पहले php टैग पर इनपुट करना होगा

— ट्राई बुई
स्रोत

0

बूटस्ट्रैप एक्सटेंशन का उपयोग करना

मेरी सीएसएस फ़ाइल: थीम / बूटस्ट्रैप / सीएसएस / style.css

मेरी js फ़ाइल: रूट / js / script.js

पर विषय / बूटस्ट्रैप / विचारों / लेआउट / 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>

— विक्टर अज़ेवेदो
स्रोत

0

यह main.php में स्क्रिप्ट और सीएसएस जोड़ने का एक आसान तरीका भी था

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

— रोजिन थॉमस
स्रोत

0

यदि आप Theme का उपयोग कर रहे हैं तो आप Syntax के नीचे कर सकते हैं

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

CSS फ़ाइल शामिल करें:

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

जेएस फाइल शामिल करें

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

यदि आप थीम का उपयोग नहीं कर रहे हैं

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

इस तरह का उपयोग करें

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

— डेवलपर
स्रोत

0

Yii में एसेट्स को इंजन / परिसंपत्तियों / Appassets.php में घोषित किया जाता है। इससे आपकी सभी css और js फ़ाइलों को प्रबंधित करना अधिक आसान हो जाता है

— अहमद मुजतबा
स्रोत