【EasyUI篇】Combo自定义下拉框组件

微信公众号:程序yuan
关注可了解更多的教程。问题或建议,请公众号留言;

查看--> 全套EasyUI示例目录

20.Combo自定义下拉框组件

这组件不可以通过class方式进行定义

 

 

 

 

 

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Combo</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/Combo.js"></script>
    <style rel="stylesheet" type="text/css">
    </style>
    <script>

    </script>
</head>
<body style="padding: 100px;">


<div id="box"></div>
<div id="food">
    <div style="color: #99eeb8; background: #fafafa; padding: 5px;">
        请选择一个事物
    </div>
    <div style="padding: 10px;">
        <input type="radio" name="food" value="01">
            <span>煎饼果子</span>
        <br>
        <input type="radio" name="food" value="02">
            <span>牛腩米线</span>
        <br>
        <input type="radio" name="food" value="03">
            <span>水果沙拉</span>
        <br>
        <input type="radio" name="food" value="04">
            <span>蛋黄派</span>
        <br>
        <input type="radio" name="food" value="05">
            <span>其他</span>
    </div>
</div>

    <br><br><br><br>
    <button id="btn">点击</button>

</body>
</html>

JS文件

$(function () {



    $('#box').combo({
        required:true,
        multiple:true,
        width:150,
        height:30,
        // panelWidth:150,
        // panelHeight:100,
        //设置是否可以输入
        // editable:false,
        //设置是否禁用(禁用是不可以发送值的)
        disabled:false,
        //设置只读(只读是可以发送值的)
        // readonly:true,
        //设置是否有向下的箭头
        hasDownArrow:true,
        value:'123',
        //1秒之后展示
        // delay:1000,
        onShowPanel:function () {
            //展示下拉面板时触发
            // alert('onShowPanel');
        },
        onHidePanel:function () {
            //隐藏下拉面板时触发
            // alert('onHidePanel');
        },
        onChange:function () {
            //改变值时触发
            // alert('onChange');
        }


    });

    //添加进去
    $('#food').appendTo($('#box').combo('panel'));

    $('#food input[type=radio]').click(function () {
        var v = $(this).val();
        var s = $(this).next('span').text();
        //隐藏下拉面板 hidePanel
        $('#box').combo('setValue',v).combo('setText',s).combo('hidePanel');
    });

//------------------ 方法列表 ---------------
    console.log($("#box").combo('options'));
    //返回下拉面板对象
    console.log($('#box').combo('panel'));
    //返回文本框对象
    console.log($('#box').combo('textbox'));
    // $('#box').combo('showPanel');
    $(document).click(function () {
        //销毁
        // $('#box').combo('destroy');
        //重新调整
        // $('#box').combo('resize',500);
        //显示下拉面板
        // $('#box').combo('showPanel');
        //隐藏下拉面板
        // $('#box').combo('hidePanel');
        //禁用启用
        // $('#box').combo('disable');
        // $('#box').combo('enable');
        //设置为只读
        // $('#box').combo('readonly',false);
        // $('#box').combo('validate');
        // alert($('#box').combo('isValid'));
        // $('#box').combo('clear');


    });

    $("#btn").click(function () {
        // $('#box').combo('reset');
        // alert($('#box').combo('getText'));
        // alert($('#box').combo('getValue'));
        // $('#box').combo('setText','Hello Java');
        //设置了值,但是下拉框没有随之改变
        $('#box').combo('setValue','02');
    });



});

效果图

 

------------------------------------------------

关注小编微信公众号获取更多资源

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值