• 前端学习笔记(zepto或jquery)—— 布局技巧(一)


    html5中有一些标签我们很难改变其样式,例如input=file,select等。这个时候我们需要改变一下思路,将原有透明度置为0,借助于div或span等以控制样式的标签来代替。

    效果图:

            <div class="right"><span>请选择</span><i class="ion ion-ios-arrow-right"></i>
                <select id="Dept" class="select-item">
                    <option value="a50c00af-9f65-47f1-8e65-ae8cefe14542">经营班子</option>
                    <option value="a50c00af-b023-4944-9928-a3aa11087d47">综合管理部</option>
                    <option value="a50c00af-d8e6-4141-bdfd-df82eb809232">技术经济评价室</option>
                    <option value="a50c00af-e264-4e38-ac76-7e3333ae1545">生产调度室</option>
                    <option value="a50c00af-ff90-4f3a-ae75-af0613284f1f">经营计划部</option>
                    <option value="a50c00b0-0fb2-4463-9037-ff7ca490b9be">财务部</option>
                    <option value="a50c00b0-1a79-4c77-b9a8-e85403bd980e">市场管理部</option>
                    <option value="a50c00b0-291a-4bb5-b28c-b01ff8767fea">西北市场大区</option>
                    <option value="a50c00b0-3647-4cd0-9dc4-2f4f606c7856">电网市场大区</option>
                    <option value="a50c00b0-4272-471b-9ceb-e9feec84e7e5">华东市场大区</option>
                    <option value="a50c00b0-4ead-4171-a2d8-19061933db85">电气一次设计室</option>
                    <option value="a50c00b0-61b5-4f7b-a574-bd46357d16ca">电气二次设计室</option>
                    <option value="a50c00b0-7189-4db4-9700-66563e136429">智能电网研究设计中心</option>
                    <option value="a50c00b0-7fe4-403d-9978-7aeacc5fd70e">智能光伏研究设计中心</option>
                    <option value="a50c00b0-9a73-45c4-804e-b268870df5b3">土建结构设计室</option>
                    <option value="a50c00b0-a791-468b-a0e6-fbba3af98825">总图设计室</option>
                    <option value="a50c00b0-b4f6-44ad-99f4-479d76fadcad">智能风电研究设计中心</option>
                    <option value="a50c00c0-7698-4320-8fd0-bab86788b3cd">国际市场大区</option>
                </select>
            </div>
    .select-item{
        height: 45px;
        line-height: 45px;
        opacity: 0;
        position: absolute;
        right: 0px; 
        top: 0px;
    }

    select的changed事件:

        $(".select-item").change(function(){
            var options=$(this)[0].options;
            var text=options[options.selectedIndex].innerHTML;
            // var text=$(this).find('option:selected').html(); 
             $(this).siblings("span").text(text);
        })
  • 相关阅读:
    经典排序算法
    浅谈C++继承
    进程间通信
    我在其它博客写文章
    git 版本回退
    vmware machine 虚拟机无法启动 Credential Guard 或 Device Guard
    我的头像制作过程
    vs安装qt5后打开qt4创建的 .pro 文件提示找不到头文件的解决方法
    [转]手动安装 Eclipse 插件 Viplugin
    装好 JDK 配置环境变量
  • 原文地址:https://www.cnblogs.com/xuhang/p/4933221.html
Copyright © 2020-2023  润新知