如何在codeigniter ci中加载javascript css文件

时间:2012-08-25 04:17:28

标签: php codeigniter

我想将我的网站迁移到CI。 我只是简单地从ci示例文件welcome.php修改 在index()函数中,我加载要显示的视图。 但是,我在头文件中放了许多javascripts和css文件。 并通过$this->load->view('header');调用它 但我无法正确加载javascript文件! 谁能给我一些提示?它很难配置如何设置正确的路径。

<script type="text/javascript" src="/assets/javascripts/order.js"></script> 
<script type="text/javascript" src="../assets/javascripts/order.js"></script>   
<script type="text/javascript" src="../../assets/javascripts/order.js"></script>    

我的控制器代码如下

    class Welcome extends CI_Controller {

public function index()
{
    $this->load->helper('url');     
    $this->base = $this->config->item('base_url');

    $this->load->view('header');
    $this->load->view('welcome_message');


}

}

以下是我的文件夹结构

enter image description here

6 个答案:

答案 0 :(得分:7)

将您的资源文件夹设为applications, system, assets

不在应用程序中并且在控制器中简单地加载url辅助类,其中您调用标题视图部分

$this->load->helper('url');
$this->load->view('header');

并在头文件中使用这样的内容。
因为$this->base_url()会返回/文件夹..

<script src="<?php echo $this->base_url();?>assets/javascript/jquery.js"></script>

更改文件夹结构,因为应用程序文件夹中的访问仅适用于我所知道的核心部分..

如果您想了解有关URL Helper

的更多信息,请点击此链接

答案 1 :(得分:2)

这是使用最少代码的最佳方法

<script src="<?php echo base_url('assets/javascript/jquery.js');?>"></script>
<script src="<?php echo base_url('assets/css/bootstrap.min.js');?>"></script>

答案 2 :(得分:0)

Jogesh_p的答案肯定会解决您的资产加载问题。我想跟进你提出的这个问题

  

感谢您的支持。顺便说一句,如果我想使用一些图书馆   像phpMailler或zend framwork。

您可以输入application / libraries /

然后使用Library的Class'Name

将其加载到控制器中
$this->load->library('phpmailer');

您可以选择加载构造函数或单个方法。

祝你好运!

答案 3 :(得分:0)

为了解决我的问题,我创建了辅助函数来加载资源。这是我在我的应用程序中部署的代码。 PS:首先,我计划了一个良好/灵活的目录结构

[<强> some_helper.php

/*
 * Created: 2017/12/14 00:28:30
 * Updated: 2017/12/14 00:28:39
 * @params
 * $url_structure = 'assets/js/%s.js'
 * $files = ['main.min', 'social']
 * $echo = FALSE
 *
 */

function load_js($files = [], $url_structure = NULL, $version = '1.0', $echo = FALSE){
    $html = "";
    foreach ($files as $file) {
        if($url_structure){
            $file = sprintf($url_structure, $file);
        }
        $file_url = base_url($file);
        $html .= "<script src=\"{$file_url}?v={$version}\"></script>";
    }
    if($echo) {
        echo $html;
    }
    return $html;
}

/*
 * Created: 2017/12/14 00:28:48
 * Updated: 2017/12/14 00:28:51
 * @params
 * $version = '1.0' // Later load from configuration
 * $url_structure = 'assets/js/%s.css'
 * $files = ['main.min', 'social']
 * $echo = FALSE
 *
 */

function load_css($files = [], $url_structure = NULL, $version = '1.0', $echo = FALSE){
    $html = "";
    foreach ($files as $file) {
        if($url_structure){
            $file = sprintf($url_structure, $file);
        }
        $file_url = base_url($file);
        echo "<link rel=\"stylesheet\" href=\"{$file_url}?v={$version}\">";
    }
    if($echo) {
        echo $html;
    }
    return $html;
}

然后在视图中调用

[<强> some_view.php

$css = [
    'path' => 'assets/css/%s.css',
    'files' => ['bootstrap.min','style']
];
load_css($css['files'], $css['path'], '1.0', TRUE);

希望它有所帮助。 在OP $css['path'] = 'application/assets/css/%s.css';的情况下,可以解决问题。

更新了Github上我将不断更新的代码。

答案 4 :(得分:-2)


        资产/ CSS / bootstrap.min.css&#34;

    <!-- Include JS -->
    <script src="<?php echo base_url();?>assets/js/jquery.js"></script>
    <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>

答案 5 :(得分:-2)

function addcategory()
{
    //alert("<?php echo base_url();?>")
     $.ajax({
                complete: function() {}, //Hide spinner
                url : '<?php echo base_url();?>category/search',
                data:$('#add_category').serialize(),
                type : "POST",
                dataType : 'json',
                success : function(data) {
                    if(data.code == "200")
                    {
                        alert("category added successfully");
                    }

                        },
                beforeSend: function(XMLHttpRequest){}, //$.blockUI();
                        cache: false,
                        error : function(data) {
                            }
            });

}