一个做后端的简单写了两个特效 第一个是列表展开选择切换,第二个是选项栏红叉关闭
必须***引入js插件*** 我用的是jquery-1.8.3.min.js
####切换城市
展开效果图:
前端代码显示
利用city_id进行后台数据的处理 利用city_ids来进行页面的展示
<!-- 切换城市 -->
<div class="dialog changecity" style="width: 840px;height: 500px; overflow: auto; top:100px;display: none;">
<div class="buttons" style="margin-top: 20px;margin-bottom: 20px;">
<input type="button" id="pup_close" class="formsubmit" value="关闭" />
<input type="button" id="pup_submit" class="formsubmit" value="完成" />
<input type="button" id="pup_clear" class="formsubmit" value="取消所选" />
</div>
<!--div class="title">选择其他</div-->
<div class="city_show">
<{foreach from=$city_list_info item=city key=k}>
<dl>
<dt><{$k}></dt>
<dd name="proCity" class="cityList">
<{foreach from=$city item=citys}>
<input citynames="<{$citys.city_name}>" name="city_name" id="city_name" type="checkbox" value="<{$citys.city_id}>"
<{foreach from=$params['city_ids'] item =vas}>
<{if $vas == $citys['city_id']}>checked="checked"<{/if}>
<{/foreach}>>
<{$citys.city_name}>
<{/foreach}>
</dd>
</dl>
<{/foreach}>
</div>
</div>
<input id="city_click" type="button" value="<{if $params['city_name']}><{$params['city_name']}><{else}>切换城市<{/if}>" name="city_name" class="formsubmit"/>
<div id="cityhide" style="display:none;"><{$params['city_name']}></div>
<input id="hide_city" type="hidden" value="<{$params['city_id']}>" name="city_id" />
<input id="hide_cityname" type="hidden" value="<{$params['city_name']}>" name="city_name" />
*特效CSS
//按钮特效
.formsubmit {
background-color: #00327b; color: #fff;cursor: pointer;height: 30px;
/*margin:0 5px;*/ border: medium none;padding: 0 20px;line-height: 30px;
font-size: 12px;margin: 3px 0;}
.formsubmit{min-width: 85px;height: 32px;line-height: 32px;background-color: #4198ca;border-radius: 4px;}
效果图
鼠标移入前:超出的用省略号代替
鼠标移入后:全部展开
JQ表单提交
注释:点击切换城市 会弹出一个框,城市列表。进行选择限制选择城市的个数,以及将CheckBox复选框checked的数据
$(document).ready(function(){
$("#city_click").click(function(){
$(".changecity").slideToggle();
});
$("#pup_close").click(function(){
$(".changecity").slideToggle();
});
$("#pup_submit").click(function(){
if($("input[name='city_name']:checked").length >5) {
alert('只允许选择几个城池');
return false;
}else{
var checkID = [];//定义一个空数组
var checkName = [];
$("input[name='city_name']:checked").each(function(i){//把所有被选中的复选框的值存入数组
checkName[i] = $(this).attr('citynames');
});
$("input[name='city_name']:checked").each(function(i){//把所有被选中的复选框的值存入数组
checkID[i] =$(this).val();
});
if(checkName == ''){
$("#city_click").val('切换城市');
}else{
$("#city_click").val(checkName);
}
$("#hide_city").val(checkID);
$("#hide_cityname").val(checkName);
$(".changecity").slideToggle();
}
});
});
/**超出隐藏**/
$(document).ready(function(){
//超出隐藏
$("#city_click").css("cssText", "max-width: 130px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;");
$("#city_click").mouseover(function(){
$("#city_click").css("cssText", " white-space: nowrap; overflow: hidden; text-overflow: ellipsis;");
});
$("#city_click").mouseout(function(){
$("#city_click").css("cssText", "max-width: 130px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;");
});
});
PHP后台代码 部分
city_id 数据格式:
city_ids数据格式:
//接收表单参数
$array = $this->getRequest()->getParams();
//接收到表单传递过来city_id数组进行打散 二维数组格式
$params['city_ids'] = empty($array['city_id']) ? '' : explode(",",$array['city_id']);
//处理数据 city_id 进行sql语句查询 逗号隔开的形式
$params["city_id"] = empty($array) ? '' :$array['city_id'] ;
//返回对应数组的city_ids前端进行展示
$this->getView()->assign('params', $params);
####红叉效果
直接上代码来看
效果图:
html代码
首先设计一个符合页面的红色X
<div class="city_empty" style="position:absolute; top:0px; right:7px; width:14px;height:14px;line-height:12px;text-align:center;font-size:12px;color:#fff;border-radius:50%; background:red;cursor:pointer;">×</div>
JQ样式
保证关掉红叉切换到空白 清空对应的id或者数据
$(document).ready(function(){
if($('#city_click').val() == '切换其他'){
$(".city_empty").hide();
}else{
$(".city_empty").show();
}
$(".city_empty").click(function(){
$(this).hide();
$('#city_click').val('切换其他');
$("#hide_city").val('');
$("#hide_cityname").val('');
$("#frm").submit();
});
)};