Yii 프레임워크에 CSS,javascript 파일 포함
Yii Framework에 Javascript 또는 CSS 파일을 포함하려면 어떻게 해야 합니까?
조금 를 만들고 에, Javascript 어플리케이션을 하고 싶습니다..js
★★★★★★★★★★★★★★★★★」.css
파일을 표시합니다.
다음과 같은 경우:
<?php
$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/script');
나는 이 질문에 대답하는 것을 좋아했다.
보호된 폴더 밖에 있는 css 폴더, 확장의 css & js 파일, ajax를 많이 사용할 때 외부적으로 포함해야 하는 widget 파일, 외부적으로도 포함해야 하는 코어 프레임워크의 js & css 파일 등 많은 장소가 있습니다.그래서 그들은 이것을 하기 위한 몇 가지 방법들입니다.
jquery.js, jquery.ui.js와 같은 프레임워크의 핵심 js 파일을 포함합니다.
<?php
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('jquery.ui');
?>
보호된 폴더 외부에 있는 css 폴더의 파일을 포함합니다.
<?php
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/example.css');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/css/example.js');
?>
확장자 또는 위젯에서 css & js 파일을 포함합니다.
여기 fancybox는 보호된 폴더 아래에 있는 확장자입니다.포함된 파일에는 /protected/extensions/fancybox/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');
?>
코어 프레임워크 파일도 포함할 수 있습니다.예: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);
?>
- js 함수를 호출할 때 새로운 ajax 파일이 생성될 때마다 충돌이 발생하기 때문에 때때로 렌더링된 뷰에서 사용할 때 zii 위젯 또는 확장의 js 파일을 외부로 포함해야 합니다.
자세한 내용은 블로그 기사를 참조하십시오.
컨피규레이션/메인.php는 간단합니다.부트스트랩의 예를 다음에 나타냅니다.여기서 보실 수 있습니다.
'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');
?>
js 파일을 등록할 때 두 번째 파라미터는 CClientScript를 설정할 때 스크립트의 위치입니다.POS_END, Javascript가 로드되기 전에 HTML을 렌더링합니다.
yii 앱에 javascript, css를 포함할 수 있는 방법은 많습니다.오늘은 세 가지 간단한 도움말 방법을 시연해 보겠습니다.
config/main을 편집하여 js, css를 추가하는 간단한 방법입니다.php
// 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');
코어 js 파일 포함
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('jquery.ui');
고속 Yii API 문서: http://yii.codexamples.com/
및 하려면 , 「JS」의 「CSS」의 , 할 수 .false, true
예를 들어 다음과 같이 CSS와 JS가 포함됩니다.
$this->renderPartial(
'yourviewname',
array(
'model' => $model,
false,
true
)
);
다음은 CDN과 오프라인 스크립트를 사용하기 위한 좋은 솔루션입니다.
저는 이 코드를 제가 만드는 모든 앱에서 사용하기 때문에 어떤 앱에서도 사용할 수 있습니다.
포함된 스크립트:
- 메인.css
- main.discloss.main.discloss.
- j쿼리
- jQuery / CD
- 부트스트랩 3.1
- 부트스트랩 3.1 / CDN
- 팬시박스 2
- 팬시박스2 / CDN
- 폰트 어썸 4
- FontAwesome 4 / CDN
- Google Analytics 스크립트
순서 1:
이 코드를 config/main에 넣습니다.php
'params'=>array(
'cdn'=>true, // or false
...
순서 2:
루트 앱 폴더에 폴더를 만들고 스크립트를 배치합니다.
res/
--js
--css
--img
--lib
--style
..
순서 3:
이 코드를 컴포넌트/컨트롤러에 넣습니다.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:
//syslog/main과 같은 함수를 호출합니다.php
Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();
뷰 파일에 이러한 행을 추가하는 것으로, 다음과 같은 조작을 실시합니다.
Yii::app()->clientScript->registerScript File(Yii::app()->baseUrl.'/path/to/your/javascript/file'); Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/path/to/css/file');
또한 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 기반의 웹샵 앱에서 가져온 것입니다.
컨트롤러 액션에서 스크립트를 추가할 수도 있습니다.액션 메서드에 다음 행을 추가하면 해당 스크립트는 해당 뷰에만 표시됩니다.
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/custom.js', CClientScript::POS_HEAD);
여기서 POS_HEAD는 헤드 섹션에 스크립트를 넣도록 프레임워크에 지시합니다.
Yii 프레임워크에서는 다음 방법을 사용하여 js와 css를 포함할 수 있습니다.
CSS 포함:
{Yii::app()->request->baseUrl}/css/styles.css
JS 포함:
{Yii::app()->request->baseUrl}/js/script.js
이미지 포함:
{Yii::app()->request->baseUrl}/images/logo.jpg
주의: yii의 레이아웃 개념을 사용하면 뷰 템플릿에서 지정하는 대신 css와 js를 추가할 수 있습니다.
레이아웃 폴더에 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>
<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 태그에 입력해야 합니다.
부트스트랩 확장 사용
my css 파일: 테마/부트스트랩/css/style.css
내 js 파일: root/syslog/script.syslog
주제/부트스트랩/부트스트랩/메인/메인에서.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>
이것은 스크립트나 css를 메인으로 추가하는 간단한 방법이기도 합니다.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">
테마를 사용하는 경우 아래 구문을 사용할 수 있습니다.
Yii::app()->theme->baseUrl
CSS 파일 포함:
<link href="<?php echo Yii::app()->theme->baseUrl;?>/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
JS 파일 포함
<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>
- Yii 자산은 engine/assets/Appassets.php에서 선언됩니다.이것에 의해, 모든 css 및 js 파일을 보다 간단하게 관리할 수 있습니다.
언급URL : https://stackoverflow.com/questions/1998449/include-css-javascript-file-in-yii-framework
'programing' 카테고리의 다른 글
클래스 JavaLaunchHelper는 양쪽에서 구현됩니다.둘 중 하나가 사용됩니다.정의되지 않은 것 (0) | 2022.09.20 |
---|---|
도커 이미지의 mariadb에서 InnoDB 오류 발생 (0) | 2022.09.20 |
RFID 카드가 로그아웃을 위해 두 번째로 읽히는 것을 시스템이 인식하도록 하려면 어떻게 해야 합니까? (0) | 2022.09.20 |
작곡자가 사용하는 PHP 버전을 변경하는 방법 (0) | 2022.09.20 |
Vue $emit 인수를 이미 인수가 있는 함수에 전달 (0) | 2022.09.20 |