doudinghan8319
2015-01-15 23:45
浏览 36
已采纳

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

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

This is the code in the controller. Now, I would like to add an image to this button, how do I do it? if I use an tag with source set to base_url('path/to/file.png') am getting just an empty square with white border around it. any ideas please and thank you?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • duanjiao6730 2015-01-18 11:49
    已采纳

    It's okay, I found a way:

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

    This works perfect, thank you guys for your interest.

    打赏 评论
  • duanni5726 2015-01-16 00:29

    Put the buttons inside a container (let div) and named with a ID say

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

    Now just use this bellow script.

    <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>
    
    打赏 评论
  • dqhsv0147421 2015-01-16 06:21

    You can do this with CSS like this :

    As you are already using inline css you can do this

    $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>';
    

    However i would suggest adding a new class and giving css property to that class.

    $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");
        }
    
    打赏 评论

相关推荐 更多相似问题