当前位置:编程学习 > JAVA >>

jQuery 插件: 屏蔽单个元素使用户无法点击

 

 

[javascript]
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
        // 下面的插件部分建议放在js文件中, 方便调用  
        //-------------- 插件 begin ------------------  
        (function ($) { 
            //屏蔽,适合单个元素. 参数opticy: 不透明度 0 ~ 1.0   
            $.fn.mask = function (opaticy) { 
                opaticy = opaticy || 0; 
                var spec = opaticy * 100; 
                var opaticyCSS = 'filter:alpha(opacity=' + spec + ');opacity: ' + opaticy + ';'; 
                var divHtml = '<div class="divMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; ' + opaticyCSS + '"> </div>'; 
                $(this).wrap('<span style="position: relative"></span>'); 
                $(this).parent().append(divHtml); 
                $(this).data("mask","true"); 
            } 
            //取消屏蔽  
            $.fn.unmask = function () { 
                $(this).parent().find(".divMask").remove(); 
                $(this).unwrap(); 
                $(this).data("mask", "false"); 
            } 
        })(jQuery); 
        //-------------- 插件 end ------------------  
 
        //并没有做disabled处理, 只是上面加多了个屏蔽层, 使之无法点到而已。   
        //这样其它地方无须再处理,更方便。  
        function changeA2(obj) { 
            var t = { 'key': 'b', 'value': '2' };//映射对应关系  
            if (obj.value == t.key) { 
                $("#A2").val(t.value); 
                $("#A2").mask(0.5); 
            } else { 
                $("#A2").val(""); 
                $("#A2").unmask(); 
            } 
        } 
    </script> 
</head> 
<body> 
    <select name="A1" id="A1" onchange="changeA2(this)"> 
        <option value="">--请选择--</option> 
        <option value="a">a</option> 
        <option value="b">b</option> 
        <option value="c">c</option> 
        <option value="d">d</option> 
    </select> 
    <select name="A2" id="A2"> 
        <option value="">--请选择--</option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
    </select> 
</body> 
</html> 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        // 下面的插件部分建议放在js文件中, 方便调用
        //-------------- 插件 begin ------------------
        (function ($) {
            //屏蔽,适合单个元素. 参数opticy: 不透明度 0 ~ 1.0
            $.fn.mask = function (opaticy) {
                opaticy = opaticy || 0;
                var spec = opaticy * 100;
                var opaticyCSS = 'filter:alpha(opacity=' + spec + ');opacity: ' + opaticy + ';';
                var divHtml = '<div class="divMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; ' + opaticyCS

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,