jquery - 如何在 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;
}

更多信息

如果您想自己学习如何进行这种更改，您应该查看这篇文章，它将教您如何自己进行。

Answer 2

您可以在 DIV 元素上使用 50% 的边框半径，并与标志的背景图像配对。然后，您可以将单击事件绑定到此 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 使用他们的按钮类来完成，但是查看他们的文档，它只是让您指定按钮是否具有圆角，而不是特别是按钮的边框半径。