本节知识点
- jqueryUI的引入
- jqueryUI的按钮
jqueryUi的引入
- 第一步去下载jqueryUI
jqueryUi的使用必须要引入3个文件
<link rel="stylesheet" href="css/jquery-ui.css"/> <!--引入UI的 css-->
<script src="js/jquery.min.js"></script> <!--引入jquery-->
<script src="js/jquery-ui.js"></script> <!--引入UIjs-->
然后接着引入自定义的CSS和JS文件
<script src="js/style.js"></script><!--引入自定义的style.js文件-->
<link rel="stylesheet" href="css/style.css"/><!--引入自定义的css-->
自己的自定义内容写到自定义文件里
知问前端按钮UI篇
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf8">
<title>jqueryUI</title>
<link rel="shortcut icon" href="iph.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/jquery-ui.css"/> <!--引入UI的 css-->
<script src="js/jquery.min.js"></script> <!--引入jquery-->
<script src="js/jquery-ui.js"></script> <!--引入UIjs-->
<script src="js/style.js"></script><!--引入自定义的style.js文件-->
<link rel="stylesheet" href="css/style.css"/><!--引入自定义的css-->
</head>
<body>
<!--<input type="button" value="提交">-->
<div id="header">
<div class="header_content">
<h1>知问</h1>
<div class="header_search">
<input type="text" class="search" name="search_1">
</div>
<div class="header_button">
<input type="button" value="查询" id="search_button">
</div>
<div class="header_member">
<a href="###" id="reg_a">注册</a>| <a href="###" id="login_a">登陆</a>
</div>
</div>
</div>
<!--表单区-->
<div id="dialog" title="会员注册">
表单区
</div>
<!--表单区结束-->
</body>
</html>
使用button按钮
使用说明:使用button按钮UI的时候，不一定是input按钮形式，普通的文本可以设置为button按钮形式。要是用input则显示不出来图标
$("#sear_button").button();
button属性和方法
- label
字符串，对应按钮上的文字，如果没有,HTML内容将被作为按钮上的文字
- icons 字符串 对应按钮上的图标，在按钮文字前面和后面都可以放置图片，通过键值对的方式完成.
{
primary: "ui-icon-search",//这两个只能留一个,不能一起写
secondary: "ui-icon-search"
}
- text true/false 当设置为false时候，不会显示文字，但必须指定一个图标
$("#search_button").button({
disabled:false,
icons:{
primary: " ui-icon-search"
},
label: "查找",
text: false //不显示文本只显示图标
})
单选框 复选框
button 按钮不但可以设置为普通的按钮，对于单选框，复选框同样有效。
//html单选框
<input type="radio" name="sex" value="male" id="male">
<label for="male">男</label>
</input>
//jQuery单选框
$("#reg input[type=radio]").button();
本节说明
button按钮也就3个属性
label: 代表文字。
icons:{}图标
text:代表文字没有而必须写图片.
