我想使用span标记创建样式化按钮,这些标记或多或少类似于<button>
标记。快速单击按钮不应选择其元素内部或外部的任何文本,或者根本不能选择文本,还应该有一个指针光标。
在jQuery中为<span>
事件分配一个普通的.click()
标记可以正常运行,但不会像正确的按钮那样。我不知道如何完成此操作,除了使用<a>
标记,使用#
或javascript:
链接作为href
属性。但这几乎违背了不引人注目的JavaScript的目的。此外,锚链接已经加下划线的文本和需要覆盖的颜色。
总而言之,我如何才能完成不显眼的范围按钮?不依赖于锚点或实际的按钮输入标记。感谢。
答案 0 :(得分:1)
您可以使用这些样式来阻止选择:
-webkit-user-select:none;
-moz-user-select:none;
请 注意 以上内容仅适用于webkit和Mozilla浏览器。
据我所知,jQuery最简单易用。你可以这样做:
$(function(){
$('#span_id').click(function(){
// your code here...
});
});
请注意,<span>
标记为内嵌元素,您需要将其设置为块级并display:block
才能应用width
和height
它,使它看起来像一个按钮。
话虽如此,我想知道为什么你不能/不使用按钮而使你的代码在语义上有效。
答案 1 :(得分:0)
这可能是一个疯狂的想法,但您可以使用按钮作为按钮。它们的风格可以像其他一切一样。
答案 2 :(得分:0)
'span按钮'
<span class="spanbutton" title="Span Button!" onclick="spanButtonFunction()">Span Button!</span>
造型:
.spanbutton {
color:#000000;
border:1px solid #000000;
padding-left:8;
padding-right:8px;
border-radius:3px;
cursor:pointer;
font-family: arial;
font-size:small;
/*prevent selection*/
-webkit-user-select:none;
-moz-user-select:none;
/* fallback */
background-color:#EEEEEE;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCCCCC), to(#F4F4F4));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #F4F4F4, #CCCCCC);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #F4F4F4, #CCCCCC);
/* IE 10 */
background: -ms-linear-gradient(top, #F4F4F4, #CCCCCC);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #F4F4F4, #CCCCCC);
}
当然还有关于按钮功能的脚本。
此外,当你想点击按钮'mid-click'的外观时点击按钮,jQuery将有所帮助:
$(document).ready(function (){
$(".spanbutton").bind("mousedown", function(e){
buttondown(this);
});
$(".spanbutton").bind("mouseup", function(e){
buttonup(this);
});
$(".spanbutton").bind("mouseout", function(e){
buttonup(this);
});
});
function buttondown(button) {
button.className = "downbutton";
}
function buttonup(button) {
button.className = "spanbutton";
}
还有一些“向下”按钮的样式:
.downbutton {
color:#000000;
border:1px solid #333333;
padding-left:8px;
padding-right:8px;
border-radius:3px;
cursor:pointer;
font-family: arial;
font-size:small;
/*prevent selection*/
-webkit-user-select:none;
-moz-user-select:none;
background-color:#BBBBBB;
}
投票,如果你喜欢它!这将激励我做更多这样的详细回复