读书人

页面滤镜影子效果

发布时间: 2012-08-22 09:50:35 作者: rapoo

页面滤镜阴影效果

disAble的效果如下:
页面滤镜影子效果

enAbled效果如下:
页面滤镜影子效果

?

html代码如下:

?

?

<div ?name="pluginEnable" value="1" <c:if test="${sub.enabled == 1}">checked="checked"</c:if> ?name="pluginEnable" value="0" <c:if test="${sub.enabled == 0}">checked="checked"</c:if> id="pluginRegion">

? ? ? ? ? ? ? ? <div 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}" ? ?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}" ? ?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

}

});

??

? ?});

?

?

?

读书人网 >Web前端

热点推荐