dede搜索框实现对应的下拉式搜索的方法

资源来源网络,如需授权,请更换源码,模块仅供学习,如需商用请购买正版授权,本栏目不提供技术服务,积分不够请签到!如何签到?
如遇蓝奏网盘打不开lanzous替换成lanzoux尝试!

那么这样的效果是如何实现的呢?我们还是分布来教一教大家吧:

第一步:找到导航分类搜索的地方,然后按照下面的格式添加,这里说明哈是:data-id是指栏目的id,data-lid是指模型的lid;其他就没有什么要注意的了。

<div class=”s-select”> <span class=”select-hd”><i></i>攻略/游记</span>
<ul class=”select-bd hide” style=”z-index:99999″>
<li class=”abc dhy”><a href=”javascript:;” data-id=’1′ data-lid=’17’>攻略/游记</a></li>
<li class=”abc “><a href=”javascript:;” data-id=’2′ data-lid=’18’>景点/风景</a></li>
<li class=”abc “><a href=”javascript:;” data-id=’3′ data-lid=’19’>美食/餐厅</a></li>
<li class=”abc “><a href=”javascript:;” data-id=’4′ data-lid=’20’>门票</a></li>
</ul>
</div>

第二:我们要用jquery来实现这样的效果,就是点击分类板块,能够成功切换并且能够成功替换相应的汉字,这里还是详细分析哈吧,万一有的同学没有接粗过jquery,还是看起来不太懂的。这里的.s-select都是上面的div里面的class样式,mouseenter()和moueseleave()表示jquery里面的2个鼠标事件,线面的hide()和show()也是隐藏和显示时间,表示,选中某个属性,对应的地方显示隐藏。讲的有点粗糙,但是意思是这么个意思。在文档最后,我会把jquery中文手册附件给大家,供大家学习参考。

$(“.s-select,.select-bd”).mouseenter(function(e) {
$(“.select-bd”).show();
});
$(“.s-select,.select-bd”).mouseleave(function(e) {
$(“.select-bd”).hide();
});
$(“.abc a”).click(function(e) {
var neirong = $(this).html(); //这个是获取点击下拉框里面的文字
//alert(neirong);//neirong.show();
$(“.select-hd “).html(neirong); //这个是把获取到的下拉框里面的文字重新给select-hd这个内容器里面去
});

第三步:想把法把下拉样式里面传的data-id以及data-lid的值获取到并且传到对应的搜索php文件里面去。

$(function(){
$(“.s-select li”).click(function(){
$(this).addClass(“dhy”).siblings().removeClass(“dhy”);
});
})

$(“.s-select a”).click(function(){
$(“input[name=’typeid’]”).val($(this).attr(“data-id”)); //获取到搜索表单里面下拉框中的typeid
$(“input[name=’lid’]”).val($(this).attr(“data-lid”)) //获取到搜索表单里面下拉框中的lid
});

$(“a.s-button”).click(function(){
$(“#head-search-form”).submit(); //这个在完成搜索提交搜索框框的时候,找到对应的表单
});
还有值得注意的是,我们要再搜索表单的开始部分添加上:<input type=”hidden” name=”typeid” value=”1″ /> 让我们的表单获取到对应的typeid的值!

©下载资源版权归作者所有;本站所有资源均来源于网络,仅供学习使用,请支持正版!
风格酷 » dede搜索框实现对应的下拉式搜索的方法
NOTICE:【风格酷源码资源分享】限时免费QQ群:434230249 ☉免责声明:本站所有模板均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服,我们核实后会立即删除。
☉如果源码网盘地址失效!或有其他问题,请点我报错,谢谢合作!
☉人民币与积分汇率为1比10,即1元=10积分.有任何疑问请联系客服
☉如有其他问题,请加网站客服QQ(330921598)进行交流。
☉本站提供的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
☉源码、模板等资源会随着技术、环境的升级而存在部分问题,还请慎重选择。

发表评论

风格酷源码www.fenggeku.com 提供更优质的资源集合

立即查看 了解详情