ইআই ফ্রেমওয়ার্কে জাভাস্ক্রিপ্ট বা সিএসএস ফাইল কীভাবে অন্তর্ভুক্ত করবেন?
আমি আমার সাইটে এমন একটি পৃষ্ঠা তৈরি করতে চাই যাতে সামান্য জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন চলছে, সুতরাং আমি একটি নির্দিষ্ট দৃশ্যে ফাইল .js
এবং .css
ফাইলগুলি অন্তর্ভুক্ত করতে চাই ।
উত্তর:
এটার মতো কিছু:
<?php
$baseUrl = Yii::app()->baseUrl;
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/js/yourscript.js');
$cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
আমি এই প্রশ্নের উত্তর দিতে পছন্দ।
এগুলির অনেকগুলি জায়গা যেখানে আমাদের সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল রয়েছে যেমন সিএসএস ফোল্ডারের মতো যা সুরক্ষিত ফোল্ডারের বাইরে থাকে, এক্সটেনশান এবং উইজেটের সিএসএস এবং জেএসএস ফাইল যা এজেন্ট যখন আমাদের প্রচুর পরিমাণে এজ্যাক্স ব্যবহার করে তখন বাহ্যিকভাবে অন্তর্ভুক্ত করা দরকার, জেএস এবং সিএসএস ফাইলের মূল ফাইল ফ্রেমওয়ার্ক যা আমাদের কিছু সময় বাইরে থেকে অন্তর্ভুক্ত করা দরকার। সুতরাং এটি করার কিছু উপায় তাদের।
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);
?>
আরও বিশদ জন্য আমার ব্লগ নিবন্ধ দেখুন
আপনার কনফারেন্স / মেইন.পিপিতে সহজ। এটি বুটস্ট্র্যাপ সহ আমার উদাহরণ। আপনি এটি এখানে দেখতে পারেন
'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.
),
),
),
),
ভিউতে, নিম্নলিখিতগুলি যুক্ত করুন:
<?php
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile('/js/yourscript.js', CClientScript::POS_END);
$cs->registerCssFile('/css/yourcss.css');
?>
আপনি যখন জেএস ফাইলটি নিবন্ধভুক্ত করবেন তখন দ্বিতীয় প্যারামিটারটি লক্ষ্য করুন, এটি আপনার স্ক্রিপ্টের অবস্থান, যখন আপনি এটি স্লাইডস্ক্রিপ্ট :: POS_END সেট করেন, আপনি জাভাস্ক্রিপ্ট লোড হওয়ার আগে এইচটিএমএল রেন্ডার করতে দিন।
এমন অনেকগুলি পদ্ধতি রয়েছে যা আমরা আপনার 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/
$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), ));
, আমি কি এটি এখানে রেখে দেব?
নির্দিষ্ট ভিউতে জেএস এবং সিএসএস ফাইলগুলি অন্তর্ভুক্ত করতে আপনি প্যারামিটারগুলি পাস করে কন্ট্রোলারের মাধ্যমে এটি করতে পারেন false, true
, যার জন্য সিএসএস এবং জেএস অন্তর্ভুক্ত থাকবে, যেমন:
$this->renderPartial(
'yourviewname',
array(
'model' => $model,
false,
true
)
);
সিডিএন এবং অফলাইন স্ক্রিপ্টগুলি ব্যবহার করার জন্য এখানে একটি ভাল সমাধান
আমি তৈরি প্রত্যেকটি অ্যাপ্লিকেশনটিতে আমি এই কোডটি ব্যবহার করি, যাতে আপনি এটি কোনও অ্যাপ্লিকেশনটিতে ব্যবহার করতে পারেন।
অন্তর্ভুক্ত লিপি:
ধাপ 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();
আপনার দেখার ফাইলগুলিতে এই লাইনটি যুক্ত করে এরকম কিছু করুন;
ইআইআই :: অ্যাপ্লিকেশন () -> ক্লায়েন্টস্ক্রিপ্ট-> নিবন্ধস্ক্রিপ্ট ফাইল (ইআইআই :: অ্যাপ () -> বেসআরল। '/ পাথ / টু / আপনার / জাভাস্ক্রিপ্ট / ফাইল'); ইআইআই :: অ্যাপ্লিকেশন () -> ক্লায়েন্টস্ক্রিপ্ট-> রেজিস্ট্রেশনসিএসফিল (ইআইআই :: অ্যাপ () -> বেসআরল। '/ পাথ / টু / সিএসএস / ফাইল');
এছাড়াও, আপনি যদি সিএসএস এবং জেএস উভয়ই মডিউল সম্পদ যুক্ত করতে চান তবে আপনি নিম্নলিখিত যুক্তিটি ব্যবহার করতে পারেন। প্যাথঅফএলিয়াস পাওয়ার সঠিক উপায়টি কীভাবে আপনাকে নির্দেশ করতে হবে তা দেখুন :
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 অ্যাপ্লিকেশান।
আপনি নিয়ামক পদক্ষেপ থেকে স্ক্রিপ্ট যোগ করতে পারেন। কেবলমাত্র কোনও ক্রিয়া পদ্ধতিতে এই লাইনটি যুক্ত করুন তারপরে সেই স্ক্রিপ্টটি কেবল সেই দৃশ্যেই উপস্থিত হবে:
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/custom.js', CClientScript::POS_HEAD);
যেখানে POS_HEAD প্রধান বিভাগে স্ক্রিপ্ট স্থাপনের কাঠামোটি বলে
ইআই কাঠামোর মধ্যে আপনি নীচের পদ্ধতিটি ব্যবহার করে জেএস এবং সিএসএস অন্তর্ভুক্ত করতে পারেন।
সিএসএস সহ:
{Yii::app()->request->baseUrl}/css/styles.css
জেএস সহ:
{Yii::app()->request->baseUrl}/js/script.js
চিত্র সহ:
{Yii::app()->request->baseUrl}/images/logo.jpg
দ্রষ্টব্য: yii এ বিন্যাস ধারণাটি ব্যবহার করে আপনি ভিউ টেমপ্লেটে নির্দিষ্ট করার পরিবর্তে CSS এবং js যুক্ত করতে পারেন।
লেআউট ফোল্ডারে সিএসএস এবং জেএস যুক্ত করুন 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>
<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>
লিঙ্কটি অবশ্যই ভিউ প্যাগের প্রথম পিএইচপি ট্যাগের উপর ইনপুট করতে হবে
বুটস্ট্র্যাপ এক্সটেনশন ব্যবহার করা
আমার সিএসএস ফাইল: থিম / বুটস্ট্র্যাপ / সিএসএস / স্টাইল
আমার জেএস ফাইল: রুট / জেএস / স্ক্রিপ্ট.জেএস
এ থিম / বুটস্ট্র্যাপ / মতামত / লেআউট / 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>
এটি মূল.পিপিতে স্ক্রিপ্ট এবং সিএসএস যুক্ত করার একটি সহজ উপায় ছিল
<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">
আপনি যদি থিম ব্যবহার করছেন তবে নীচের সিনট্যাক্সটি করতে পারেন
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>