সিআইএস, জাভাস্ক্রিপ্ট ফাইল ইয়ে ফ্রেমওয়ার্কে অন্তর্ভুক্ত করুন


100

ইআই ফ্রেমওয়ার্কে জাভাস্ক্রিপ্ট বা সিএসএস ফাইল কীভাবে অন্তর্ভুক্ত করবেন?

আমি আমার সাইটে এমন একটি পৃষ্ঠা তৈরি করতে চাই যাতে সামান্য জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন চলছে, সুতরাং আমি একটি নির্দিষ্ট দৃশ্যে ফাইল .jsএবং .cssফাইলগুলি অন্তর্ভুক্ত করতে চাই ।

উত্তর:


168

এটার মতো কিছু:

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

4
আমি কি ভিউ এর কন্ট্রোলার থেকে কল করব?
ব্যবহারকারী 1077220

4
আপনার এটিকে কোনও দর্শন থেকে কল করা উচিত
আলেকজান্ডার হারমভ

4
@ user1077220 এটি কোনও পার্থক্য করে না।
ডিজনেয়েট

11
সিএসএস এবং জেএস নিবন্ধগুলি দেখার সাথে সম্পর্কিত। তাই আরও যুক্তিযুক্তভাবে একটি ভিউ থেকে কল।
আলেকজান্ডার হারমভ

4
এটি প্রতি পৃষ্ঠায় একবার যুক্ত করা উচিত (আপনি যে চিত্রটি স্নিপেটের উপরের
অংশে যুক্ত করবেন তা নয়

47

আপনি যোগ করে এটি করতে পারেন

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

34

আমি এই প্রশ্নের উত্তর দিতে পছন্দ।

এগুলির অনেকগুলি জায়গা যেখানে আমাদের সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল রয়েছে যেমন সিএসএস ফোল্ডারের মতো যা সুরক্ষিত ফোল্ডারের বাইরে থাকে, এক্সটেনশান এবং উইজেটের সিএসএস এবং জেএসএস ফাইল যা এজেন্ট যখন আমাদের প্রচুর পরিমাণে এজ্যাক্স ব্যবহার করে তখন বাহ্যিকভাবে অন্তর্ভুক্ত করা দরকার, জেএস এবং সিএসএস ফাইলের মূল ফাইল ফ্রেমওয়ার্ক যা আমাদের কিছু সময় বাইরে থেকে অন্তর্ভুক্ত করা দরকার। সুতরাং এটি করার কিছু উপায় তাদের।

Jquery.js, jquery.ui.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');
?>

এক্সটেনশন বা উইজেটগুলি থেকে CSS এবং js ফাইল অন্তর্ভুক্ত করুন।

এখানে fancybox হ'ল একটি এক্সটেনশন যা সুরক্ষিত ফোল্ডারে রাখা হয়। আমাদের সহ যে ফাইলগুলি অন্তর্ভুক্ত রয়েছে তার পথ রয়েছে: / সুরক্ষিত / এক্সটেনশানস / অভিনব বাক্স / সম্পদ /

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

এছাড়াও আমরা মূল কাঠামো ফাইলগুলি অন্তর্ভুক্ত করতে পারি: উদাহরণ: আমি ক্লিস্টভিউ জেএস ফাইল অন্তর্ভুক্ত করছি।

<?php
$baseScriptUrl=Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('zii.widgets.assets'));
Yii::app()->clientScript->registerScriptFile($baseScriptUrl.'/listview/jquery.yiilistview.js',CClientScript::POS_END);  
?>
  • আমাদের যখন জাই উইজেটস বা এক্সটেনশনের জেএস ফাইলগুলি বহির্মুখী অন্তর্ভুক্ত করা দরকার তখনই যখন আমরা এজেক্স কল থেকে প্রাপ্ত রেন্ডার ভিউতে তাদের ব্যবহার করি কারণ প্রতিটি সময় নতুন এজ্যাক্স ফাইল লোড করা জেএস ফাংশনগুলিতে কলহের বিরোধ সৃষ্টি করে।

আরও বিশদ জন্য আমার ব্লগ নিবন্ধ দেখুন


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

সুতরাং আপনি যেখানে জাভাস্ক্রিপ্টটি প্রয়োগ করার প্রয়োজন সেখানে কীভাবে "কল" করবেন?
নভিকা 89

4
আপনি এই উপায়ে ব্যবহার করতে পারেন: Yii :: অ্যাপ () -> ক্লায়েন্টস্ক্রিপ্ট-> নিবন্ধকরেস্ক্রিপ্ট ('বুটস্ট্র্যাপ');
নাইটো অরন 20

7

ভিউতে, নিম্নলিখিতগুলি যুক্ত করুন:

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

আপনি যখন জেএস ফাইলটি নিবন্ধভুক্ত করবেন তখন দ্বিতীয় প্যারামিটারটি লক্ষ্য করুন, এটি আপনার স্ক্রিপ্টের অবস্থান, যখন আপনি এটি স্লাইডস্ক্রিপ্ট :: POS_END সেট করেন, আপনি জাভাস্ক্রিপ্ট লোড হওয়ার আগে এইচটিএমএল রেন্ডার করতে দিন।


6

এমন অনেকগুলি পদ্ধতি রয়েছে যা আমরা আপনার Yii অ্যাপে জাভাস্ক্রিপ্ট, সিএসএস অন্তর্ভুক্ত করতে পারি । আজ আমি তিনটি সহজ এবং হেল্পুল পদ্ধতি প্রদর্শন করব।

কনফিগারেশন / মেইন.পিপি সম্পাদনা করে জেএস, সিএসএস যুক্ত করার একটি সহজ উপায়

// 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.codex નમૂના.com/


4
@ খ্রিস্টিয়ান এটি কোনও ফোরাম নয় এবং আপনি যদি নতুন এবং দরকারী তথ্য অবদান রাখছেন তবে আপনাকে প্রশ্নগুলিতে যুক্ত হতে উত্সাহিত করা হবে ।
স্যামুয়েল লিউ

@ ট্রুঙ্গনক যদি আমি এই ব্লকটি $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 / CD
  • বুটস্ট্র্যাপ ৩.১
  • বুটস্ট্র্যাপ ৩.১ / সিডিএন
  • ফ্যান্সিবক্স 2
  • অভিনবতা 2 / সিডিএন
  • ফন্টউইজ 4
  • ফন্টআউভিস 4 / সিডিএন
  • গুগল অ্যানালিটিক্স স্ক্রিপ্ট

ধাপ 1:

এই কোডটি কনফিগার / মেইন.পিপিতে রাখুন

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

ধাপ ২:

রুট অ্যাপ ফোল্ডারে রিসোর্সেস ফোল্ডার তৈরি করুন এবং আপনার স্ক্রিপ্টটি সেখানে রাখুন

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

ধাপ 3:

এই কোডটি উপাদান / 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');
        ");
    }
}

পদক্ষেপ 4:

//layouts/main.php এ এই জাতীয় ফাংশন কল করুন

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

আংশিক রেন্ডার ব্যবহার করার সময় সেরা পদ্ধতির উপর আটকে আছি। আমার জেএস ফাইলগুলি বিরোধী হচ্ছে। যা এর জন্য সেরা পন্থা
চ্যাপসকেভ

চমৎকার সমাধান। আমি এটি আমার অ্যাপ্লিকেশনটিতে চেষ্টা করব
বিকাশকারী

6

আপনার দেখার ফাইলগুলিতে এই লাইনটি যুক্ত করে এরকম কিছু করুন;

ইআইআই :: অ্যাপ্লিকেশন () -> ক্লায়েন্টস্ক্রিপ্ট-> নিবন্ধস্ক্রিপ্ট ফাইল (ইআইআই :: অ্যাপ () -> বেসআরল। '/ পাথ / টু / আপনার / জাভাস্ক্রিপ্ট / ফাইল');
ইআইআই :: অ্যাপ্লিকেশন () -> ক্লায়েন্টস্ক্রিপ্ট-> রেজিস্ট্রেশনসিএসফিল (ইআইআই :: অ্যাপ () -> বেসআরল। '/ পাথ / টু / সিএসএস / ফাইল');

5

এছাড়াও, আপনি যদি সিএসএস এবং জেএস উভয়ই মডিউল সম্পদ যুক্ত করতে চান তবে আপনি নিম্নলিখিত যুক্তিটি ব্যবহার করতে পারেন। প্যাথঅফএলিয়াস পাওয়ার সঠিক উপায়টি কীভাবে আপনাকে নির্দেশ করতে হবে তা দেখুন :

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 প্রধান বিভাগে স্ক্রিপ্ট স্থাপনের কাঠামোটি বলে


1

ইআই কাঠামোর মধ্যে আপনি নীচের পদ্ধতিটি ব্যবহার করে জেএস এবং সিএসএস অন্তর্ভুক্ত করতে পারেন।

সিএসএস সহ:

{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

লেআউট ফোল্ডারে সিএসএস এবং জেএস যুক্ত করুন the প্রকল্পের যে কোনও জায়গায় অ্যাক্সেস করুন

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

লিঙ্কটি অবশ্যই ভিউ প্যাগের প্রথম পিএইচপি ট্যাগের উপর ইনপুট করতে হবে


0

বুটস্ট্র্যাপ এক্সটেনশন ব্যবহার করা

আমার সিএসএস ফাইল: থিম / বুটস্ট্র্যাপ / সিএসএস / স্টাইল

আমার জেএস ফাইল: রুট / জেএস / স্ক্রিপ্ট.জেএস

থিম / বুটস্ট্র্যাপ / মতামত / লেআউট / 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

এটি মূল.পিপিতে স্ক্রিপ্ট এবং সিএসএস যুক্ত করার একটি সহজ উপায় ছিল

<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

আপনি যদি থিম ব্যবহার করছেন তবে নীচের সিনট্যাক্সটি করতে পারেন

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

সিএসএস ফাইল অন্তর্ভুক্ত করুন:

<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
  • ইয়েতে সম্পদগুলি ইঞ্জিন / সম্পদ / অ্যাপসেটস.এফপিতে ঘোষিত হয় এটি আপনার সমস্ত সিএসএস এবং জেএস ফাইল পরিচালনা করতে আরও সহজ করে তোলে এখানে চিত্র বর্ণনা লিখুন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.