2017年3月1日手记

时间：2022-07-12 14:09:04

一天一记，记录自己今天的工作与所学，一步一步的成长，三月你好！

今天是的工作是对前几天写好的网页做最后的修改（加些动态及验证），好进入正题：

1.先说说select这个控件吧，这个控件是用来做下拉框的，在我们的日常开发中都觉得这个下拉框中的文字居中才好看，可是不幸的是它默认是文字靠左的，而且想让文字居中一般是用 text-align:center; 这个属性来实现，但是很不幸的是这个属性对select没用，后来我google了一下发现还有一个很有趣的属性可以让它的文字居中：text-align-last:center; 这个属性是可以让select中的文字居中的但是据我目前的了解是它只在谷歌和火狐浏览器上有居中效果而360和IE是不行的，为了兼容个个浏览器我果断放弃了这个方法，继续寻找，接下来的找到的方法是给select设置padding: 0 2%这个属性也是可以的完美的兼容了360，谷歌，火狐，就是在IE中比较差，padding属性是直接改变了select的width的值所以文字才会居中，而除了IE浏览器其他的浏览器很“人性化“的忽略了这个改变，你不信可以alert()一下看看，因此这个方法也是不行的，后来得到的一致的解决方案就是利用div,ul及JS来自己模拟一个下拉框（就是自己写一个下拉框），好吧我果断不干了，让文字居左去吧，不过我自己写了个下拉框用在了别的地方。

2.自己写了一个下拉款，2017年3月1日手记这是效果图。好了上代码：

html代码，我没有放按钮的因为这个太简单的：

<ul class="CA">
            <li>人民币</li>
            <li>美元</li>
            <li>英镑</li>
            <li>欧元</li>
            <li>韩元</li>
            <li>日元</li>
        </ul>
js代码： 

 function stopPropagation(e) {
                if (e.stopPropagation)
                    e.stopPropagation();
                else
                    e.cancelBubble = true;
            }


            $(document).bind('click', function () {//为了实现点击页面其他的地方这个下拉框自动消失给document设置点击事件
                $('.CA').css('display', 'none');
            });


            $('.CA').bind('click', function (e) {//防止下拉框本事触发document中的隐藏方法
                stopPropagation(e);
            });
            $('.buttonDropDown').bind('click', function (e) {
                stopPropagation(e);
            });
            $('.buttonDropDown').on('click', function () {
                $(this).parent().parent().parent().parent().next().css("display", "block");
            });
//鼠标悬停事件            $('.CA li').hover(function () {                $(this).css("background-color", "White");            }, function () {                $(this).css("background-color", "#DCDCDC");            });
//选中事件（点击）            $('.CA li').on('click', function () {                var texts = $(this).text();                $(".currencyAmount").html(texts);                $(this).parent().css("display", "none");            });







标签：