jquery - 重新使用现有的按钮代码在 html 中创建许多按钮？

Question

我使用由三个图像组成的锚标记创建了一个 HTML 按钮，如下所示：

<body>
    <ul>
        <li>
            <a href="#" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Log In</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
    </ul>
</body>

结果按钮如下：

按钮图像

我的 CSS 代码：

.my_button .left {
    background: url("./images/left.png") left center no-repeat;
}

.my_button .right {
    background: url("./images/right.png") left center no-repeat;
}

.my_button .middle {
    color:#FFFAF0;
    background: url("./images/middle.png") repeat-x;
}

有没有更好的方法来创建一个组合三个图像的按钮？因为我必须在我的页面中创建 10 个按钮，如果我按照上述方法创建 10 个按钮，将会有重复的代码。你有什么建议吗？

score 1 · Accepted Answer

您可以将所有图像组合成一张称为 Sprite 的图像。然后你可以background-position根据需要使用属性来对齐它们。

使用 CSS Sprite 的优势在于，如果您创建 10 个图像，您只需对图像发出一个 http 请求，而不是 10 个 http 请求，这是一项巨大的性能优化技术。

您也不必担心background-position所有浏览器都支持的旧版浏览器。

score 1 · Accepted Answer

您需要什么样的浏览器支持？你可以接受优雅的贬低吗？（即按钮在旧浏览器中看起来不完全相同，但功能仍然非常好）。

带有伪元素

有了这些，你只需要一个 html 元素，其余的可以用 CSS 完成

.my_button:before {
        content:'';
        background: url("./images/left.png") left center no-repeat;
        position:absolute;
        left:0;
        height:XXpx;
        width:XXpx;
    }

    .my_button:after {
        content:'';
        background: url("./images/right.png") left center no-repeat;
        position:absolute;
        right:0;
        height:XXpx;
        width:XXpx;
    }

    .my_button .middle {
        color:#FFFAF0;
        background: url("./images/middle.png") repeat-x;
    }

在上面的代码中，XXpx 应该是背景图片元素的高度和宽度

或使用 CSS3

这将是一个更好的方法：只需使用 CSS3 来设置按钮的样式：

.my-button {
    border-radius:5px; /* don't forget browser prefixes */
    padding:Xpx;
    border:solid 1px blue;
    /* code for css gradient */
}

一个例子

使用 CSS 渐变生成器

这种方式不适用于所有浏览器，相反，用户会看到没有边框半径和渐变的登录按钮，但它仍然可以正常工作。

score 0 · Accepted Answer

我建议使用 CSS3。

.mybutton{ width:120px; border-radius:5px; background:#c3c3c3; padding:5px; }

而且您将能够使用当前的 CSS 类。

score 0 · Accepted Answer

那么这是一种方法：

首先整理你的 html 以使用普通类的普通锚：

<ul>
    <li> <a href="#" class="my_button">Log In</a></li>
    <li> <a href="#" class="my_button">Other Function</a></li>
    <li> <a href="#" class="my_button">Extra Function</a></li>
</ul>

然后使用一些 jQuery 为该类的每个锚插入额外的 div：

$("a.my_button").html(function (i, oldHtml) {
  return '<div style="width:' + ($(this).width()+40) + 'px"><div class="left"></div>' +
         '<div class="middle">' + oldHtml + '</div>' +
         '<div class="right"></div></div>';
});

（如果您将一个函数传递给.html()它将被重复调用，每个匹配元素一次，该函数的返回将成为当前元素的新 html。）

score 0 · Accepted Answer

您可以使用一种称为sliding doors效果的东西将其减少到 2 张图像。你也制作了一个带有超宽中间背景的左帽图像。然后你制作第二个右帽图像。

左/中间图像进入外部 div，然后在该 div 内部带有右帽图像。

http://alistapart.com/article/slidingdoors

他们在帖子中指出，这不再是最佳做法。如果您正在做图形背景并且不能依赖 CSS3 效果来构建您的按钮，我仍然会说这是一项很棒的技术。它可能只是一个自动通知，因为文章的年代太久了（2003 年）。

正如本页其他地方所建议的，您可以使用 CSS Sprites 将其缩减为一个物理图像。

进一步挖掘这个技巧是从 2012 年开始的，它结合了精灵 + 滑动门：

http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

score 0 · Accepted Answer

由于我很懒，我会使用某物。像那样

function addButton(id, href, text){
   $('ul').append('<li><a id="' + id + '" href="' + href + '" class="my_button"<div style="width:77px"><div class="left"></div><div class="middle">' + text + '</div><div class="right"></div></div></a></li>');
}

addButton('bLogin','#','Log In');
addButton('bThis','#','This');
addButton('bThat','#','That');

score 0 · Accepted Answer

您可以简单地使用“按钮”元素。我不完全确定你想要实现什么，但你可以给 10 个按钮同一个类。

HTML：

<button class="myButton" onClick="location.href='myPage.html'")>Log In</button>
<button class="myButton" onClick="location.href='anotherPage.html'")>Next Link</button>

CSS：

.myButton{
   background-image:url("image.jpg");
}

.myButton:hover{
   background-image:url("hover.jpg");
}

我可能完全偏离你想要达到的目标，但这对我认为你想要达到的目标有用。

您也可以完全不设置按钮样式并单独获得漂亮的悬停效果，但在每个浏览器中都不相同。

您还可以使用常规的锚标签，就像您拥有的一样，给它们一个适用于所有按钮的类：

<a class="myButton" href="myPage.html">Log In</a>
<a class="myButton" href="anotherPage.html">Link 2</a>

哦，如果您不想这样做，只需保持您的按钮与现在相同，只需复制您的 HTML，更改锚链接到的位置和文本，如下所示：

<body>
    <ul>
        <li>
            <a href="#" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Log In</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
        <li>
            <a href="#1" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Different link</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
        <li>
            <a href="#2" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Another link.</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
    </ul>
</body>

添加 PHP 解决方案。

函数.php：

<?php 
    function myButton($link, $title){
     echo  '<a href="'.$link.'" class="my_button">
            <div style="width:77px">
                <div class="left"></div>
                <div class="middle">'.$title.'</div>
                <div class="right"></div>
            </div>
        </a>';
    }
?>

您的新页面将是 page.php（不是 html）

页面.php：

<?php
include_once 'functions.php';
?>
<body>
        <ul>
            <li>
             <?php myButton('link.html', 'Click Me') ?>
            </li>
            <li>
             <?php myButton('anotherlink.html', 'No, Click Me!') ?>
            </li>
        </ul>
</body>

这将允许您减少代码，同时保持当前结构。它还允许您键入一行代码并动态添加您的按钮。

如果您想了解更多信息，请告诉我。

score 0 · Accepted Answer

更好的方法是使用 css 创建按钮：

a.button {
    text-decoration: none;
    background: #FFF;
    padding: 5px 10px;
    border: 1px solid #CCC;

    /* Adding Vendor Prefixes to ensure the best browser support 
       -moz-    : Gecko based browsers
       -webkit- : WebKit implementations
       -ms-     : Internet explorer's
       -o-      : Opera
    */

    /* Background Gradient */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #F9F9F9), color-stop(100%, #E9E9E9));
    background-image: -webkit-linear-gradient(top, #F9F9F9, #E9E9E9);
    background-image: -moz-linear-gradient(top, #F9F9F9, #E9E9E9);
    background-image: -o-linear-gradient(top, #F9F9F9, #E9E9E9);
    background-image: linear-gradient(top, #F9F9F9, #E9E9E9);

    /* Gradient for IE6+ */
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f9f9f9', endColorstr='#e9e9e9');

    /* Border radius */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

但如果你喜欢让 internet explorer 6-9 能够渲染边框半径或其他 CSS3 装饰，你可以包括 CSS3PIE：

http://css3pie.com/

jquery - 重新使用现有的按钮代码在 html 中创建许多按钮？

8 回答 8

Related

Reference