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

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

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

文章标签：

本文介绍了如何使用 jQuery Button 组件来增强表单中的按钮样式，包括基本按钮、带图标的按钮、复选框按钮和单选按钮等。通过示例展示了如何应用不同的图标和设置文本显示。

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>