如何将图像添加到 Codeigniter 中的分页按钮
How to add image to pagination buttons in Code Igniter
$config['prev_link']='Previous';
$config['prev_tag_open']='<button type="button" style="border-radius:5px;">';
$config['prev_tag_close']='</button>';
这是控制器中的代码。现在,我想给这个按钮添加一个图像,我该怎么做呢?如果我使用源设置为 base_url('path/to/file.png') 的标签,我只会得到一个周围有白色边框的空方块。有什么想法谢谢吗?
将按钮放入一个容器中(让 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>
您可以像这样使用 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>';
但是我建议添加一个新的 class 并给那个 class 属性 class。
$config['prev_link']='Previous';
$config['prev_tag_open']='<button type="button" class="pg-prev">';
$config['prev_tag_close']='</button>';
CSS 文件
.pg-prev{
border-radius:5px;
background-image: url("yourimage.png");
}
没关系,我找到方法了:
$config['next_link']='Next<img src="'.base_url("/resources/images/next.png").'" width=20; height=20; style="vertical-align: middle; margin-left: 5px;"/>';
这很完美,感谢大家的关注。
$config['prev_link']='Previous';
$config['prev_tag_open']='<button type="button" style="border-radius:5px;">';
$config['prev_tag_close']='</button>';
这是控制器中的代码。现在,我想给这个按钮添加一个图像,我该怎么做呢?如果我使用源设置为 base_url('path/to/file.png') 的标签,我只会得到一个周围有白色边框的空方块。有什么想法谢谢吗?
将按钮放入一个容器中(让 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>
您可以像这样使用 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>';
但是我建议添加一个新的 class 并给那个 class 属性 class。
$config['prev_link']='Previous';
$config['prev_tag_open']='<button type="button" class="pg-prev">';
$config['prev_tag_close']='</button>';
CSS 文件
.pg-prev{
border-radius:5px;
background-image: url("yourimage.png");
}
没关系,我找到方法了:
$config['next_link']='Next<img src="'.base_url("/resources/images/next.png").'" width=20; height=20; style="vertical-align: middle; margin-left: 5px;"/>';
这很完美,感谢大家的关注。