当前位置: 代码迷 >> Web前端 >> 页面滤镜影子效果
  详细解决方案

页面滤镜影子效果

热度:205   发布时间:2012-08-22 09:50:35.0
页面滤镜阴影效果

disAble的效果如下:

enAbled效果如下:

?

html代码如下:

?

?

<div class="main_step2_mian">

? ? <div class="main_step2_mian_top">

? ? ? ? <ul class="borderbottom_double">

? ? ? ? ? ? <li style="margin-bottom:20px;">

? ? ? ? ? ? ? ? <input type="radio" ?name="pluginEnable" value="1" <c:if test="${sub.enabled == 1}">checked="checked"</c:if> class="main_step_radio"/>

? ? ? ? ? ? ? ? <span class="main_step_radio_span"><fmt:message key="plugin.enabled"/></span>

? ? ? ? ? ? ? ? <input type="radio" ?name="pluginEnable" value="0" <c:if test="${sub.enabled == 0}">checked="checked"</c:if> class="main_step_radio"/>

? ? ? ? ? ? ? ? <span class="main_step_radio_span"><fmt:message key="plugin.disabled"/></span>

?

? ? ? ? ? ? </li>

? ? ? ? </ul>

?

? ? </div> ? ? ? ? ? ? ? ? ? ? ? ?

</div>

?

<div class="alpha" id="pluginRegion">

? ? ? ? ? ? ? ? <div class="main_step2_mian">

? ? ? ? ? ? ? ? ? ? <div class="main_step2_mian_top">

?

? ? ? ? ? ? ? ? ? ? <table cellpadding="0" cellspacing="0" width="100%" style="margin:15px auto; padding-left:15px; font-size:14px;border-bottom:1px #ccc solid;">

? ? ? ? ? ? ? ? <tr >

? ? ? ? ? ? ? ? ? ? <td width="20%" valign="top" ?height="40px" style="padding-top:5px;"><fmt:message key="app.page.title"/></td>

? ? ? ? ? ? ? ? ? ? ? ?<td valign="top">

? ? ? ? ? ? ? ? ? ? ? ? <input id="pageTitle" name="pageTitle" value="${sub.title}" ? class="_text_size ?_text_textara_com" ?maxlength="10"/>

? ? ? ? ? ? ? ? ? ? ? ?</td>

? ? ? ? ? ? ? ? ? ?</tr>

? ? ? ? ? ? ? ? ? ?<tr >

? ? ? ? ? ? ? ? ? ? <td width="20%" valign="top" ?height="40px" style="padding-top:5px;"><fmt:message key="app.icon.name"/></td>

? ? ? ? ? ? ? ? ? ? ? ?<td valign="top">

? ? ? ? ? ? ? ? ? ? ? ? <input id="pageLabel" name="pageLabel" value="${sub.label}" ? class="_text_size _text_textara_com" ?maxlength="10"/>

? ? ? ? ? ? ? ? ? ? ? ?</td>

? ? ? ? ? ? ? ? ? ?</tr>

? ? ? ? ? ? ? ?</table>

?

? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? </div>

?

? ? ? ? ? ? </div>

?

?

js代码如下:

?

$("input:radio[name='pluginEnable']").change(function(){?

? ? ? ? ? ? var radioValue = $("input:radio[name=pluginEnable][checked]").val();

?

? ? ? ? ? ? if(radioValue == 0) {

$(".alpha").css({"opacity":"0.4","filter":"alpha(opacity=40)"});

$("#pluginRegion").find("input").attr("disabled",true);

$("#pluginRegion").find("textarea").attr("disabled",true);

?

} else {

$(".alpha").css({"opacity":"1","filter":"alpha(opacity=100)"});

$("#pluginRegion").find("input").attr("disabled",false);

$("#pluginRegion").find("textarea").attr("disabled",false);

?

}

?

? ? ? ? ? ? $.ajax({

url : "${ctx}/app/sub/updateSubEnalbe",

data : {

?

'subId':'${sub.id}',

'status':radioValue

},

async : false,

success : function(data) {

//do some controller

}

});

??

? ?});

?

?

?

  相关解决方案