easyui框架的使用，定制日历控件
生活随笔
收集整理的這篇文章主要介紹了
easyui框架的使用，定制日历控件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
信息系統(tǒng)需要通過不同的輸入控件采集用戶數(shù)據(jù)。程序員需要制作特定的控件，以方便用戶填寫數(shù)據(jù)以及控制用戶輸入數(shù)據(jù)的格式。如果完全由程序員從零開始來通過javascript、css和html來編寫輸入控件，會帶來繁重的工作量。前端框架的誕生，為程序員提供了常用的、現(xiàn)成的控件，起到提高程序的開發(fā)效率和控件的重用性的作用。
引用：
<link rel="stylesheet" type="text/css" href="easyui-1.6.2/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="easyui-1.6.2/themes/icon.css"><script type="text/javascript" src="easyui-1.6.2/jquery.min.js"></script><script type="text/javascript" src="easyui-1.6.2/jquery.easyui.min.js"></script>說明：
代碼：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><link rel="stylesheet" type="text/css" href="easyui-1.6.2/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="easyui-1.6.2/themes/icon.css"><script type="text/javascript" src="easyui-1.6.2/jquery.min.js"></script><script type="text/javascript" src="easyui-1.6.2/jquery.easyui.min.js"></script><style scoped="scoped">.md{height:16px;line-height:16px;background-position:2px center;text-align:right;font-weight:bold;padding:0 2px;color:red;}</style><script type="text/javascript">$(function(){$('#ss').combobox({onSelect:function(param){$('#calendar').calendar({ current:new Date(),firstDay:param.value,onSelect: function(date){var d=date.getDate();$(document).bind("contextmenu", function(e){ return false; });/*為日期綁定右鍵*/$(this).bind('contextmenu',showContextMenu);$("#m-ok").click(function(){$(".calendar-selected").html("<div class='icon-ok md'>" + d + "</div>");});$("#m-search").click(function(){$(".calendar-selected").html("<div class='icon-search md'>" + d + "</div>");});$("#m-cancel").click(function(){$(".calendar-selected").html(d);});}});}}); }); /*顯示菜單欄*/function showContextMenu(e){$("#menu").menu("show",{left:e.pageX,top:e.pageY});}</script></head><body>請定義一周的第一天：<br><select id="ss" class="easyui-combobox" name="dept" style="width:150px;margin-bottom:10px"> <option value="0">星期天</option> <option value="1">星期一</option> <option value="2">星期二</option> <option value="3">星期三</option> <option value="4">星期四</option> <option value="5">星期五</option><option value="6">星期六</option></select> <div id="calendar" style="width:250px;height:250px;" ></div><div id="menu" class="easyui-menu" style="width:150px;"><div id="m-ok"><img src="easyui-1.6.2/themes/icons/ok.png"></div><div id="m-search"><img src="easyui-1.6.2/themes/icons/search.png"></div><div id="m-cancel">取消</div></div></body> </html>總結(jié)
以上是生活随笔為你收集整理的easyui框架的使用，定制日历控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI框架04——treegrid
- 下一篇： easyui框架中动态改变表头