EasyUI–常用控件之按钮/搜索框/密码框/文件框/数字框/日期时间选择框

本篇主要介绍跟后台数据绑定相关度不大的简单控件,直接写了一个详细的例子,需要说明的东西都在注释里面。

先看示意图:
这里写图片描述
这里写图片描述

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>常用控件Demo</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  </head>
  <!-- 为了按顺序演示,本地javascript代码都在body最后面 -->
  <body>
  	<!-- 通过设置宽度和左右边距auto使form居中 -->
    <form class="main_form" style="margin:8px auto;width:600px;">
    	<!-- 按钮演示,每个panel放置一种控件的演示 -->
	    <div class="easyui-panel" title="按钮linkbutton 示例" style="width:480px;margin-bottom:10px;padding:30px 60px;">
	    	<!-- 最基本的按钮,设置一个图标,并设定按钮宽度,建议所有按钮采用风格一致的图标,并设置统一的大小,这样就建立一个一致的网页风格-->
			<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px">搜索</a>
			<!-- 偶尔也会使用图标在上方(top)的加大按钮样式 -->
			<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',size:'large',iconAlign:'top'" style="width:80px">Add</a>
			<!-- 有时候在页面内容区域放置一个工具栏,采用扁平风格效果很好plain:true -->
			<div class="easyui-panel" style="padding:8px;margin:8px 0px">
				<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">取消</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">刷新</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">搜索</a>
			</div>
		</div>
		<div class="easyui-panel" title="搜索框searchbox 示例" style="width:480px;margin-bottom:10px;padding:30px 60px;">
			<!-- 第一个示例主要注意方法的绑定是通过searcher:doSearch这个 data-options来的 -->
			<input class="easyui-searchbox" data-options="prompt:'请输入关键字',searcher:doSearch" style="width:200px">
			<!-- 带分类目录的searchbox,注意分类目录通过menu:'#category'绑定,#表示按id选择 -->
			<input class="easyui-searchbox" data-options="prompt:'请输入关键字',menu:'#category',searcher:doCategorySearch" style="width:200px">
			<div id="category">
				<div data-options="name:'all',iconCls:'icon-ok'">全部</div>
				<div data-options="name:'news'">新闻</div>
				<div data-options="name:'pic'">图片</div>
				<div data-options="name:'music'">音乐</div>
			</div>
		</div>
		<div class="easyui-panel" title="密码框passwordbox 示例" style="width:480px;margin-bottom:10px;padding:30px 60px;">
			<!-- 密码框的设计简单而好用-->
			<input id="passwordbox" class="easyui-passwordbox" prompt="请输入密码" iconWidth="28" style="width:200px;height:32px;padding:10px">
		</div>
		<div class="easyui-panel" title="文件框filebox 示例" style="width:480px;margin-bottom:10px;padding:30px 60px;">
			<input id="filebox" class="easyui-filebox" label="文件:" labelPosition="top" data-options="prompt:'请选择文件...'" style="width:200px">
			<a href="javascript:void(0)" onclick="getFileInfo()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="width:120px">获取文件信息</a>
		</div>
		<div class="easyui-panel" title="数字输入框numberbox 示例" style="width:480px;margin-bottom:10px;padding:30px 60px;">
			<!-- numberbox只能输入数字,且可以设置最大最小值,非常方便 -->
			<input class="easyui-numberbox" data-options="label:'年龄:',labelPosition:'top',min:0,max:100" style="width:200px;">
		</div>
		<div class="easyui-panel" title="日期、时间选择框 示例" style="width:480px;margin-bottom:10px;padding:30px 60px;">
			<!-- 选择日期后,对应日期显示在span中 -->
			<input id="datebox" class="easyui-datebox" data-options="label:'请选择日期:',labelPosition:'top',onSelect:doSelectDate" style="width:200px;">
			<div>您选择的日期是:<span id="selectDate"></span></div>
			<!-- 时间选择框 -->
			<input class="easyui-datetimebox" label="请选择时间:" labelPosition="top" style="width:200px;">
		</div>
	</form>
  <script type="text/javascript">
  	//已经将搜索框的内容封装到value里面了,直接用即可
  	function doSearch(value){
  		alert('您要搜索:'+value);
  	}
  	//注意是按categoryName对应的是网页中name对应的值
  	function doCategorySearch(value,categoryName){
  		alert('您要搜索: '+categoryName+'/'+value);
  	}
  	//注意easyui中组件的取值方式!此处是文件的详细路径
  	function getFileInfo(){
  		alert($(filebox).filebox('getValue'));
  	}
  	//自动封装日期到date
  	function doSelectDate(date){
  		alert($(datebox).datebox('getValue'));
  		var y = date.getFullYear();
		var m = date.getMonth()+1;
		var d = date.getDate();
		var result=y+'年'+m+'月'+d+'日';
  		$('#selectDate').text(result);
  	}
  </script>
  </body>
</html>

如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页