如何将图像添加到Code Igniter中的分页按钮

时间:2015-01-15 23:45:50

标签: php html css image codeigniter

$config['prev_link']='Previous';
                $config['prev_tag_open']='<button type="button" style="border-radius:5px;">';
                $config['prev_tag_close']='</button>';

这是控制器中的代码。现在,我想在此按钮上添加图像,我该怎么做?如果我使用源设置为base_url的标签(&#39; path / to / file.png&#39;)我只得到一个带有白色边框的空方块。请问任何想法,谢谢你?

3 个答案:

答案 0 :(得分:0)

将按钮放在容器(让div)中并用ID说明

命名
<div id="pagin">
    <button>1</button>
    <button>2</button>
    ..................
    ..................
    <button>10</button>
</div>

现在只使用这个波纹管脚本。

<script>

    var img = <?= base_url('path/to/file.png'); ?>

    $('#pagin button').html('<img src="+img+" alt="image alt text">');
    // This will display the image on every button

    $('#pagin button:first-child').html('<img src="+img+" alt="image alt text">');
    // This will display the image only on the first button

    $('#pagin button:last-child').html('<img src="+img+" alt="image alt text">');
    // This will display the image only on the last button

    $('#pagin button:nth-child(2)').html('<img src="+img+" alt="image alt text">');
    // This will display the image only on the 2nd button

</script>

答案 1 :(得分:0)

您可以使用CSS执行此操作:

由于您已经在使用内联css,因此可以执行此操作

$config['prev_link']='Previous';
                $config['prev_tag_open']='<button type="button" style="border-radius:5px;background-image: url("yourimage.png");">';
                $config['prev_tag_close']='</button>';

但是我会建议添加一个新类并给该类提供css属性。

$config['prev_link']='Previous';
                    $config['prev_tag_open']='<button type="button" class="pg-prev">';
                    $config['prev_tag_close']='</button>';

CSS FILE

 .pg-prev{
    border-radius:5px;
    background-image: url("yourimage.png");
    }

答案 2 :(得分:0)

没关系,我找到了办法:

$config['next_link']='Next<img src="'.base_url("/resources/images/next.png").'" width=20; height=20; style="vertical-align: middle; margin-left: 5px;"/>';

这很完美,谢谢你们的兴趣。