您的位置: 首页  >  文章  >  JQuery专栏之六————控件定义函数的综合应用

JQuery专栏之六————控件定义函数的综合应用

分类: 文章 • 2024-11-01 15:57:52

6. 控件定义函数的综合应用。

本例利用控件自定义函数，创建一个表单和四个fieldset控件，在每个fieldset中添加若干个textbox、datebox、numberbox、checkbox、combobox、filebox等控件。与实例3相比，采用这种方式定义控件，可以大大减少程序代码量，增强了程序的可读性。对于一些在函数中没有涉及到的控件属性和控件事件，可以在引用自定义函数定义之后单独编写代码实现。例如本例为学生文本框添加了两个属性和一个onChange事件。

在后续实例中，为了节省篇幅，一般控件的定义将主要采用这种函数的形式。本实例程序运行界面如图2-6所示，完整程序代码见程序2-6。

JQuery专栏之六————控件定义函数的综合应用

图2-5  利用控件自定义函数的程序运行界面

程序2-6：example06_functionapp.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>

<style type="text/css">

</style>

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="jqEasyUI/themes/default/EasyUI.me.css">

<link rel="stylesheet" type="text/css" href="jqEasyUI/themes/icon.css">

<link rel="stylesheet" type="text/css" href="system/css/icon.css">

    <script type="text/javascript" src="jqEasyUI/jQuery.min.js"></script>

    <script type="text/javascript" src="jqEasyUI/jQuery.EasyUI.min.js"></script>

    <script type="text/javascript" src="jqEasyUI/EasyUI-lang-zh_CN.js"></script>      

<script type="text/javascript" src="system/Easyui_functions.js"></script>

</head>

<body style="margin: 2px 2px 2px 2px;">

<div id="main" style="margin:2px 2px 2px 2px;">

</div>

<script>

$(document).ready(function(){

           //定义EasyUI-panel容器控件

           myForm('myForm1','main','学生信息编辑',0,0,490,695,'close;collapse;min;max');

           myFieldset('myFieldset1','myForm1','基本信息',010,10,230,290);

           myFieldset('myFieldset2','myForm1','通信信息',010,320,230,350);

           myFieldset('myFieldset3','myForm1','个人特长',250,10,200,290);

           myFieldset('myFieldset4','myForm1','上传照片',250,320,200,350);

           myTextField('stuid','myFieldset1','学号：',70,33*0+20,12,0,120,'D20101');

           myTextField('stuname','myFieldset1','姓名：',70,33*1+20,12,0,160,'贾宝玉');

           myTextField('pycode','myFieldset1','汉语拼音：',70,33*2+20,12,0,160,'');

           myDateField('birthdate','myFieldset1','出生日期：',70,33*3+20,12,0,120,'1997-2-17');

           myComboField('gender','myFieldset1','性别：',70,33*4+20,12,0,120,'男;女','');

           myNumericField('weight','myFieldset1','体重：',70,33*5+20,12,0,120,8,2,'60.25','10','100');

           myLabelField('label1', 'myFieldset1','KG',33*5+18+7,220,0,0);

           myTextField('address','myFieldset2','家庭地址：',70,33*0+20,12,0,255,'浙江省杭州市西湖区');

           myTextField('mobile','myFieldset2','手机号码：',70,33*1+20,12,0,180,'');

           myTextField('homephone','myFieldset2','家庭电话：',70,33*2+20,12,0,180,'');

           myTextField('email','myFieldset2','Email：',70,33*3+20,12,0,180,'[email protected]');

           myTextField('qq','myFieldset2','QQ号：',70,33*4+20,12,0,180,'857199052');

           myTextField('weixin','myFieldset2','微信号：',70,33*5+20,12,0,180,'zxywolf888');

           myCheckBoxField('research','myFieldset3','个人特长：',70,33*0+20,12,24,3,

'围棋;国际象棋;足球;长跑;数学;信息技术');

           myMemoField('notes','myFieldset3','个人简介：',0,33*2+5,10,100,273,'');

           myFileField('photo','myFieldset4','',0,26,6,0,240,' ');

           //定义事件

           $("#photoupload").bind('click',function(e){

                    var targetname=$("#stuid").textbox('getValue');

                    var result=myFileupLoad('photo','mybase/students/',targetname);

                    console.log(result);

           });

           //为“学生”文本框添加在自定义函数中没有涉及的属性和事件

           $("#stuname").textbox({

                    prompt:"姓名有效长度为20个字符",

                    required: true,

                    onChange: function(newv,oldv){

                             alert("姓名已发生变化，请重新输入拼音");

                    }

});

   });

</script>

</body>

</html>

思考题：

深入分析研究myCheckBoxField()自定义函数的构造及其应用。

相关推荐