Codeigniter-adding-js-css
提供:Dev Guides
CodeIgniter-JSとCSSの追加
CodeIgniterでのJavaScriptおよびCSS(カスケードスタイルシート)ファイルの追加は非常に簡単です。 図に示すように、ルートディレクトリにJSおよびCSSフォルダーを作成し、JSフォルダーにあるすべての.jsファイルとCSSフォルダーにある.cssファイルをコピーする必要があります。
たとえば、1つのJavaScriptファイル sample.js と1つのCSSファイル style.css を作成したと仮定します。 次に、これらのファイルをビューに追加するには、以下に示すようにコントローラーにURLヘルパーをロードします。
$this->load->helper('url');
コントローラにURLヘルパーをロードした後、以下に示すように、ビューファイルに以下の行を追加して、ビューにsample.jsおよびstyle.cssファイルをロードします。
<link rel = "stylesheet" type = "text/css"
href = "<?php echo base_url(); ?>css/style.css">
<script type = 'text/javascript' src = "<?php echo base_url();
?>js/sample.js"></script>
例
*Test.php* というコントローラーを作成し、 *application/controller/Test.php* に保存します
<?php
class Test extends CI_Controller {
public function index() {
$this->load->helper('url');
$this->load->view('test');
}
}
?>
*test.php* という名前のビューファイルを作成し、 *application/views/test.php* に保存します。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>CodeIgniter View Example</title>
<link rel = "stylesheet" type = "text/css"
href = "<?php echo base_url(); ?>css/style.css">
<script type = 'text/javascript' src = "<?php echo base_url();
?>js/sample.js"></script>
</head>
<body>
<a href = 'javascript:test()'>Click Here</a> to execute the javascript function.
</body>
</html>
*style.css* というCSSファイルを作成し、 *css/style.css* に保存します
body {
background:#000;
color:#FFF;
}
*sample.js* というJSファイルを作成し、 *js/sample.js* に保存します
function test() {
alert('test');
}
*application/config/routes.php* の *routes.php* ファイルを変更して、上記のコントローラーのルートを追加し、ファイルの最後に次の行を追加します。
$route['profiler'] = "Profiler_controller";
$route['profiler/disable'] = "Profiler_controller/disable"
ブラウザで次のURLを使用して、上記の例を実行します。
http://yoursite.com/index.php/test