Js/Cssファイルの読み込みや出力する方法

CakePHPのHTMLヘルパーにはjsファイルやcssファイルを読み込むためのメソッドが用意されています。ファイルを読み込むのに加えて、出力先を複数指定できるようになっています。
また、インラインに出力する関数も用意されており、動的に出力する際にも便利なようにつくられているようです。
javascriptファイルの読み込み
javascriptファイルの読み込みを行うには以下のようにHtmlヘルパーのscriptにパスを指定します。
echo $this->Html->script( 'jsファイル(パス)');
// パスに//が含まれている場合は、CDNから取得される。 echo $this->Html->script( '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'); // App.jsBaseUrl(JS_URL)以下のパスを指定。標準では、app/webroot/js echo $this->Html->script( 'jquery.min.js');
出力する場所を指定
inline指定なしの場合は、scriptメソッドを記述した場所に出力されます。(デフォルトでtrue)
falseにした場合は、デフォルトで$this->fetch('script')に出力されます。
blockを指定することで出力場所を複数分割指定することも可能でhead/body内などそれぞれ指定が可能になります。('block' => 'script'がデフォルト)
// 記述場所に出力する echo $this->Html->script( 'jquery.min.js', array( 'inline' => true)); // 出力場所を指定 // /app/View/Layouts/default.ctpの$this->fetch('script')に出力される echo $this->Html->script( 'jquery.min.js', array( 'inline' => false)); // $this->fetch('script')以外に出力 echo $this->Html->script( 'jquery.min.js', array( 'inline' => false, 'block' => 'footer')); // 出力させたい場所に記述 echo $this->fetch( 'footer')
インラインで出力する「scriptBlock」「scriptStart」「scriptEnd」
以下のようにするとHTML内に直接出力することができます。
<?php echo $this->Html->scriptBlock( 'alert( "alert");', array( 'inline' => false)); ?> <?php echo $this->Html->scriptStart( array( 'inline' => false)); ?> alert( "alert"); <?php echo $this->Html->scriptEnd(); ?>
Cssファイルの読み込み
CSSファイルの読み込みもJSファイルとほぼ同じです。
echo $this->Html->css( 'cssファイル');
// パスに//が含まれている場合は、URL(CDNなど)から取得される。 echo $this->Html->css( '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'); // App.cssBaseUrl(CSS_URL)以下のパスを指定。標準では、app/webroot/css echo $this->Html->css( 'bootstrap.min.css');
出力する場所を指定
inline/blockオプションの使用方法はscriptと同じです。inlineをfalseに指定した場合は、デフォルトで$this->fetch('css')に出力されます。
('block' => 'css'がデフォルト)
インラインで出力する「style」
以下のようにキーと値で配列の組み合わせによりスタイルを出力することができます。必要なところでstyleタグは囲って下さい。
動的にスタイルを変えたい場合などに便利です。
<?php echo $this->Html->style(array( 'background' => '#633', 'border-bottom' => '1px solid #000', 'padding' => '10px' ), // 'oneline' => true // 1行で出力される(デフォルト) );
関連記事
-
-
Blowfishを使用してハッシュ化する
使用方法 Blowfishを採用してハッシュ化を行う場合、Securityクラスのhashメソッドを呼び出します。第2引数に'blowfish'を指定し、第3引数を指定しないもしくはfalseにしま
-
-
HttpSocketを使用してリクエスト送信
CakePHPには、Webサービスへのリクエスト送信のためのHttpSocketクラスが用意されています。 HttpSocket get HTTP GETリクエストを発行します。デモ H
-
-
パス定数と変更方法やURLの取得
CakePHPは基本的にはディレクトリそのまま配置することで構築が可能ではありますが、設定パスを変更することでセキュリティに考慮した構成にすることや運用性をもたせたものにすることが可能になります。
-
-
FormヘルパーのMagicOption (マジックオプション)
Formヘルパーでは、「フィールド名」,「テーブルカラムのデータ型」もしくはモデルの「バリデーション設定」によりフォーム要素を決定したり、自動で属性を付与する「マジックオプション」と呼ばれるものがある
-
-
CSS/JSをひとまとめにして軽量化するプラグイン「Minify plugin for CakePHP」
「Minify plugin for CakePHP」は、インクルードするCSSもしくはJSファイルをひとまとめにしてキャッシュ化してくれるプラグインです。 導入 ダウンロード・解凍し
-
-
CakeEmailでメール送信(@gmail)
CakePHP 2になって追加されたクラスCakeEmailがシンプルに使えます。これを使用してメール送信を行う処理を実装してみました。 CakeEmailクラスの読み込み /app/Config
-
-
数値系バリデーション
CakePHP 2になっていくつか数値用バリデーションルールが追加されています。 数値用 (コア)バリデーション decimal - 十進数であること numeric - 数値であること
-
-
テーブルからランダムにデータを取り出す(find)
CakePHPでテーブルから特定件数のレコードをランダムに取得するには以下のように指定するとできます。 $this->data = $this->Bulkdata->find( 'all',
-
-
Syslogログエンジン
2.4から「Syslog」ログクラスが追加され、簡単にSyslogを使用できるようになりました。 CakePHP側の設定はbootstrap.php内のCakeLogコンフィグのengineを'Sy
-
-
入力文字列の長さ(文字数)をバリデーション
CakePHP 2には、コアバリデーションに文字列の長さを検証する関数が用意されています。 文字列長(コア)バリデーション minLength - 最小文字数以上であること maxLengt
Comment
Js/Cssファイルの読み込みや出力する方法 https://t.co/iKbIui7QsX #pocket2twitter
Js/Cssファイルの読み込みや出力する方法 https://t.co/hXlV79kCPj
CakePHP 2.x - Js/Cssファイルの読み込みや出力する方法 http://t.co/ddbMAYp4GS
Js/Cssファイルの読み込みや出力する方法 http://t.co/waogq7AsRv
view,html helper
cakephp