我想获得一些“常规”按钮以像一组单选按钮。HTML使常规按钮的行为像一组单选按钮
我发现了一个jQueryUI的插件,不正是我想要的东西:http://jqueryui.com/demos/button/#radio
但我想避免添加另一个库到我的项目。任何想法如何使用纯HTML + javascript/jQuery来完成这项工作?
在此先感谢
我想获得一些“常规”按钮以像一组单选按钮。HTML使常规按钮的行为像一组单选按钮
我发现了一个jQueryUI的插件,不正是我想要的东西:http://jqueryui.com/demos/button/#radio
但我想避免添加另一个库到我的项目。任何想法如何使用纯HTML + javascript/jQuery来完成这项工作?
在此先感谢
演示:http://jsfiddle.net/CXrgm/6
$('.button').click(function() {
$('.button').removeClass('active');
$(this).addClass('active');
});
其中.button
是你的标志类,你需要包括所有的按钮和.active
类whitch的指示选择按钮。
获得所选择的按钮使用:
$('.button.active') // get attribute value, etc. Whatever you need.
jQuery UI的是官方用户界面插件的jQuery。您可以安全地将其添加到您的项目中。我相信它会是一个完美的结合,我相信你会发现你的应用程序中的其他功能可以使用它。
jQuery和jQuery UI都分布在各种内容分发网络(CDN)中,如Microsoft's或Google's,所以您不必担心所有关于加载时间或带宽成本的问题。
如果你想要一个简单的js版,你可以建立自己的小型图书馆像下面的(姑且称之为min.js):
var util = util || {};
util.trim = function(s) {
return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}
util.dom = {};
util.dom.hasClassName = function(el, cName) {
if (typeof el == 'string') el = document.getElementById(el);
var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
return el && re.test(el.className);
}
util.dom.addClassName = function(el, cName) {
if (typeof el == 'string') el = document.getElementById(el);
if (!util.dom.hasClassName(el, cName)) {
el.className = util.trim(el.className + ' ' + cName);
}
}
util.dom.removeClassName = function(el, cName) {
if (typeof el == 'string') el = document.getElementById(el);
if (util.dom.hasClassName(el, cName)) {
var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
el.className = util.trim(el.className.replace(re, ''));
}
}
util.dom.getElementsByClassName = function(cName, root) {
root = root || document.body;
if (root.querySelectorAll) {
return root.querySelectorAll('.' + cName);
}
var el, els = root.getElementsByTagName('*');
var a = [];
var re = new RegExp('(^|\\s)' + cName + '(\\s|$)');
for (var i=0, iLen=els.length; i<iLen; i++) {
el = els[i];
if (el.className && re.test(el.className)) {
a.push(el);
}
}
return a;
}
,然后执行按钮东西一样:
<style type="text/css">
.pressed {background-color: red}
</style>
<script type="text/javascript" src="min.js"></script>
<script type="text/javascript">
function buttonLike(el) {
var els = util.dom.getElementsByClassName('radio');
for (var i=0, iLen=els.length; i<iLen; i++) {
util.dom.removeClassName(els[i], 'pressed');
}
util.dom.addClassName(el, 'pressed');
}
</script>
<button class="radio" onclick="buttonLike(this)">one</button>
<button class="radio" onclick="buttonLike(this)">two</button>
<button class="radio" onclick="buttonLike(this)">three</button>
<button class="radio" onclick="buttonLike(this)">four</button>
<button class="radio" onclick="buttonLike(this)">five</button>
库代码只是从现有的可重用代码中剪切和粘贴,手代码部分仅比各种库的代码部分略多。需要一个小的addListener函数,但这只是库部分中的几行。
也可以使用事件委托,因此只需要一个侦听器。
这里有一些不错的技巧... –