zoukankan      html  css  js  c++  java
  • 使用<div><ul><li>模拟<select>下拉框

    <style>

            body {
                padding: 0;
                margin: 0;
                font-size: 12px;
            }
            ul, li {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            #dropdown {
                position: relative;
                float: right;
                margin-left: 5px;
                margin-right: 50px;
            }
            #input_select {
                68px;
                height: 19px;
                line-height: 18px;
                background: #e8f5fe;
                color: #807a62;
                text-align: center;
                border: 1px solid #a9c9e2;
            }
                #input_select a {
                    display: block;
                    height: 19px;
                    color: #807a62;
                    text-decoration: none;
                }
                #input_select img {
                    margin-left: 4px;
                    margin-bottom: -4px;
                    16px;
                    height: 16px;
                }
            #dropdown ul {
                68px;
                background: #e8f5fe;
                margin-top: -1px;
                position: absolute;
                display: none;
                border: 1px solid #a9c9e2;
            }
       #dropdown ul li {
          height: 19px;
            line-height: 24px;
            text-indent: 10px;

        }

       #dropdown ul li img {

            margin-left: 4px;
            margin-bottom: -4px;
            16px;
            height: 16px;
        }
        #dropdown ul li a {
                 display: block;
                 height: 19px;
                 color: #807a62;
                 text-decoration: none;
          }
          #dropdown ul li a:hover {
                  background: #c6dbfc;
                  color: #369;
             }
         #result {
             margin-top: 10px;
             text-align: center;
          }

        </style>

    extjs实现

    <script src="ext/adapter/ext-all.js"></script>

    <script type="text/javascript">
            Ext.onReady(
                function fn() {
                    var inp = Ext.get("input_select");
                    inp.on("click", function () {
                        var ul = Ext.get('language');
                        ul.slideIn();
                    })
                    var li_a = Ext.select('ul li a');
                    li_a.each(function (el, this_, index_i) {
                        var ob = Ext.get(el.dom);
                        ob.on('click', function () {
                            var html = ob.dom.innerHTML;
                            //alert(html);
                            inp.insertHtml = html;
                            document.getElementById('input_select').innerHTML = html;
                            //alert(inp.dom.innerHTML)
                            Ext.get('language').hide();
                        });
                    })
                });
        </script>

    jquery实现

    <script src="js/jquery-1.4.1.js"></script>

    <script type="text/javascript">
            $(function () {
                $("#input_select").click(function () {
                    var ul = $("#dropdown ul");
                    if (ul.css("display") == "none") {
                        ul.slideDown("fast");
                    } else {
                        ul.slideUp("fast");
                    }
                });
                $("#dropdown ul li a").click(function () {
                    var txt = $(this).html();
                    $("#input_select").html(txt);
                    $("#dropdown ul").hide();
                    $("#result").html("您选择了" + txt + ",值为:" + value);
                });
            });    
        </script>

    html代码

    <div id="dropdown">
            <div id="input_select"> 中文<img src="images/chinese.jpg" /></div>
            <ul id="language">
                <li><a href="#" rel="2">中文<img src="images/chinese.jpg" /></a></li>
                <li><a href="#" rel="3">日语<img src="images/Amex-56.png" /></a></li>
                <li><a href="#" rel="4">韩语<img src="images/Visa-56.png" /></a></li>
                <li><a href="#" rel="5">英语<img src="images/Cash-56.png" /></a></li>
            </ul>
        </div>
        <a href='#' style="float:right; margin-right:-112px; margin-top:5px;">退出</a>
        <div style="float:none;"></div>
        <div id="result"></div>

    jquery+select

    <script src="js/jquery-1.4.1.js"></script>
        <!-- <msdropdown> -->
        <link href="js/dd.css" rel="stylesheet" />
        <script src="js/jquery.dd.min.js"></script>
        <!-- </msdropdown> -->
        <script>
            //var tc;
            $(document).ready(function (e) {
                $("#payments").msDropdown({ visibleRows: 4 });
            });
        </script>

    <table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
                <tr>
                    <td valign="top">
                        <select id="payments" name="payments" style="250px;">                       
                            <option value="amex" data-image="images/Amex-56.png" data-description="My life. My card...">Amex</option>
                            <option value="Discover" data-image="images/Discover-56.png" data-description="It pays to Discover...">Discover</option>
                            <option value="Mastercard" data-image="images/Mastercard-56.png" data-title="For everything else..." data-description="For everything else...">Mastercard</option>
                            <option value="cash" data-image="images/Cash-56.png" data-description="Sorry not available..." disabled="true">Cash on devlivery</option>
                            <option value="Visa" data-image="images/Visa-56.png" data-description="All you need...">Visa</option>
                            <option value="Paypal" data-image="images/Paypal-56.png" data-description="Pay and get paid...">Paypal</option>
                        </select> &nbsp;
                    </td>
                </tr>
            </table>

    ext.net实现

    aspx页面

    <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="iconCls" />
                        <ext:RecordField Name="name" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>

    <ext:ComboBox
            ID="ComboBox1"
            runat="server"
            StoreID="Store1"
            Width="98"
            Editable="false"
            DisplayField="name"
            ValueField="name"
            Mode="Local"                                                                                                        
            TriggerAction="All"
            Style="float:none;"
                >
            <Template runat="server">
                <Html>
                    <tpl for=".">
                            <div class="x-combo-list-item icon-combo-item {iconCls}">
                                {name}
                            </div>
                        </tpl>
                </Html>
            </Template>
            <Listeners>
                <Select Handler="this.setIconCls(record.get('iconCls'));"  />
            </Listeners>
        </ext:ComboBox>

    cs页面

    /// <summary>
    /// 数据加载
     /// </summary>

    private void InitLanguage()
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { ResourceManager.GetIconClassName(Icon.FlagCn), "Chinese"},
                new object[] { ResourceManager.GetIconClassName(Icon.FlagEg), "English"},
                new object[] { ResourceManager.GetIconClassName(Icon.FlagJp), "Japanese"},
                new object[] { ResourceManager.GetIconClassName(Icon.FlagKr), "Korean"}
            };
            this.Store1.DataBind();
            ResourceManager1.RegisterIcon(Icon.FlagCn);
            ResourceManager1.RegisterIcon(Icon.FlagEg);
            ResourceManager1.RegisterIcon(Icon.FlagJp);
            ResourceManager1.RegisterIcon(Icon.FlagKr);
            ComboBox1.SetValue("Chinese");
            ComboBox1.IconCls = ResourceManager.GetIconClassName(Icon.FlagCn);
        }

  • 相关阅读:
    gdb调试的基本使用
    重构改善代码--代码的坏味道
    17级单片机期中测试题目
    左右固定,中间自适应的三栏式布局五种写法
    存一些可能会用得到的vue的UI框架
    vue父子组件传值
    [Vue warn]: Missing required prop: "title"
    js中的值类型和引用类型的区别
    vue+node+mongoDB 火车票H5(四)---完成静态页面
    vue+node+mongoDB 火车票H5(三)---git提交时忽略不想提交的文件
  • 原文地址:https://www.cnblogs.com/aivnfjgj/p/8455577.html
Copyright © 2011-2022 走看看