如何在jQuery Mobile中制作一个按钮？

Question

如何使用jquery mobile制作这样的按钮？

（顺便说一句，我不是在询问样本图像中的眩光效果）

Answer 1

解决方案

以下是一个有效的例子：http://jsfiddle.net/Gajotres/XMu9t/

#custom-btn {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    http://www.lawyersgunsmoneyblog.com/wp-content/uploads/2012/08/american-flag-2a.jpg
}

#custom-btn span span {
    height: 100px !important;  
    line-height: 70px;
}

更多信息

如果您想自己学习如何进行此类更改，请查看 article ，它将教您如何自行完成此操作。

Answer 2

您可以在DIV元素上使用50％的border-radius，并与该标志的背景图像配对。然后，您可以将click事件绑定到此DIV元素，以便使用它来执行操作。

.circle_button {
    width:250px;
    height:250px;
    border-radius: 50%;
    background:url(flag.png) center center no-repeat;
}

jQuery(".circle_button").click(function(){
    //add click code here
});

<div class="circle_button"></div>

参考：http://davidwalsh.name/css-circles

也许这可以通过jQuery Mobile使用他们的按钮类来完成，但是看看他们的文档，它只是让你指定按钮是否有圆角，而不是按钮的边框半径。