jQuery 入门教程(26): jQuery UI Button示例（一）

最新推荐文章于 2024-02-25 15:10:29 发布

iteye_19603

最新推荐文章于 2024-02-25 15:10:29 发布

阅读量187

点赞数

文章标签： javascript ui ViewUI

jQuery Button 组件可以增强表单（Form)中的Buttons，Inputs和Anchor元素，使其具有按钮显示风格，能够正确对鼠标滑动做出反应。
基本用法
下例显示把表单中的button,input和anchor元素都变为按钮风格的jQuery Button组件。

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("input[type=submit], a, button") 
 
.button() 
 
.click(function (event) { 
 
event.preventDefault(); 
 
}); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    20
 
<button>A button element</button> 
 
    22
 
<inputtype="submit"value="A submit button"/> 
 
    24
 
<ahref="#">An anchor</a> 
 
    26
 
</body> 
 
</html>

checkboxes
除了支持基本的按钮外，jQuery Button组件可以把类型为checkbox的input元素变为按钮，这种按钮可以有两种状态，原态和按下状态。

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("input[type=submit], a, button") 
 
.button() 
 
.click(function (event) { 
 
event.preventDefault(); 
 
}); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<button>A button element</button> 
 
<inputtype="submit"value="A submit button"/> 
 
<ahref="#">An anchor</a> 
 
</body> 
 
</html>

显示图标
按钮也可以添加图标，可以支持多个图标，分别使用primary和secondary来指明。

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("button:first").button({ 
 
icons: { 
 
primary: "ui-icon-locked" 
 
}, 
 
text: false 
 
}).next().button({ 
 
icons: { 
 
primary: "ui-icon-locked" 
 
} 
 
}).next().button({ 
 
icons: { 
 
primary: "ui-icon-gear", 
 
secondary: "ui-icon-triangle-1-s" 
 
} 
 
}).next().button({ 
 
icons: { 
 
primary: "ui-icon-gear", 
 
secondary: "ui-icon-triangle-1-s" 
 
}, 
 
text: false 
 
}); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<button>Button with icon only</button> 
 
<button>Button with icon on the left</button> 
 
<button>Button with two icons</button> 
 
<button>Button with two icons and no text</button> 
 
</body> 
 
</html>

Radio单选钮
同样，jQuery也把type为radio的一组Radio按钮构成一组单选钮，使用.buttonset 将多个单选钮定义为一个组，其中只有一个可以是选中状态。

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("#radio").buttonset(); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    16
 
<form> 
 
<divid="radio"> 
 
<inputtype="radio"id="radio1"name="radio"/> 
 
<labelfor="radio1">Choice 1</label> 
 
<inputtype="radio"id="radio2"name="radio"checked="checked"/> 
 
<labelfor="radio2">Choice 2</label> 
 
<inputtype="radio"id="radio3"name="radio"/> 
 
<labelfor="radio3">Choice 3</label> 
 
</div> 
 
</form> 
 
</body> 
 
</html>