zoukankan      html  css  js  c++  java
  • 织梦列表页多种属性排序[ajax]-支持select方式和降序升序切换

    排序效果

    打包下载

    链接: https://pan.baidu.com/s/1ZH3AwiCJwr-sMAoi1NxDQQ 密码: p8rm

    使用说明

    该插件是utf-8编码,gbk编码的同学自行转换一下。

    1、把include和plus这2个文件夹上传到你网站里

    2、在你列表模板里增加 _ajax.htm 结尾的模板,里面的代码参考下载包里的 empletsdefault

    • list_article_ajax.htm
    • list_shop_ajax.htm

    3、按钮的代码参考 empletsdefault 里面的

    • list_article.htm
    • list_shop_ajax.htm
    <!-- 排序方式 -->
    <script src="https://www.dedehtml.com/uploads/allimg/1807/1A3051Z7-0.jpg" type="text/javascript"></script>
    <style>
    .list_tool{border-bottom:1px solid #D3D3D3;height:25px;text-align:left;padding:10px 2px;}
    .list_px{float:left;600px;}
    .list_tool span,.list_px a{color:#333;padding:0 6px 0 10px;height:24px;line-height:26px;overflow:hidden;background:#EDEDED;border-1px;border-style:solid;border-radius:2px;border-color:#999 #ddd #ddd #999;margin:0 10px 0 0;float:left;font-family:'Microsoft YaHei';_font-family:Tahoma;}
    .list_tool span{background:#fff;margin-right:0;border:0;}
    .list_px a.on{color:#fff;background:#FF9001;line-height:24px;border-color:#C67101 #EC8601 #EC8601 #C67101;font-weight:bold;text-shadow:0 1px 0 #B26501}.list_px a:hover{text-decoration:none;}
    </style>
    <script type="text/javascript">
    $(document).ready(function () {
    	$(".list_px a").click(function (e) {
    		var data = $(this).attr("data");
    		$.get(data,null,function(returnData){
    			$("#list").html(returnData);
    		});
    		var sort = /orderway=(desc|asc)/g.exec(data)[1], tsort = sort == 'desc' ? 'asc' : 'desc';
    		data = data.replace('orderway=' + sort, 'orderway=' + tsort);
    		$(this).attr('data', data).text(this.innerHTML.replace(sort, tsort)).addClass("on").siblings().removeClass("on");
    	})
    	$(".field").change(function(){
    		var data = $(this).val();
    		$.get(data,null,function(returnData){
    			$("#list").html(returnData);
    		});
    		$(this).attr("selected",true);
    	});
    })
    function ajax_url(url){
    	$.get(url,null,function(returnData){
    		$("#list").html(returnData);
    	});
    }
    </script>
    <div class="list_tool">
    	<div class="list_px">
    		<span>排序方式:</span>
    		<a id="a_update" class="on" href="{dede:type}[field:typeurl/]{/dede:type}">更新</a>
    		<a data="{dede:global.cfg_basehost/}/plus/listajax.php?tid={dede:field.typeid/}&orderby=hot&orderway=desc" href="javascript:viod();">点击</a>
    		<a data="{dede:global.cfg_basehost/}/plus/listajax.php?tid={dede:field.typeid/}&orderby=scores&orderway=desc" href="javascript:viod();">评论</a>
    		<a data="{dede:global.cfg_basehost/}/plus/listajax.php?tid={dede:field.typeid/}&orderby=weight&orderway=desc" href="javascript:viod();">权重</a>
    		<select class="field" name="field">
    			<option selected>默认</option>
    			<option value="{dede:global.cfg_basehost/}/plus/listajax.php?tid={dede:field.typeid/}&orderby=hot&orderway=desc">点击从高到低</option>
    			<option value="{dede:global.cfg_basehost/}/plus/listajax.php?tid={dede:field.typeid/}&orderby=hot&orderway=asc">点击从低到高</option>
    		</select>
    	</div>
    </div>

    后台-系统-网站域名链接 必须要正确。

  • 相关阅读:
    011-通过网络协议解析网络请求-DNS-ARP-TCPIP
    010-HTTP协议
    009-DNS域名解析系统
    008-ICMP协议(网络控制文协议)
    007-IP报文协议
    007-排序算法-堆排序
    006-排序算法-希尔排序
    007-Linux 查看端口
    005-排序算法-归并排序
    004-排序算法-选择排序
  • 原文地址:https://www.cnblogs.com/dedehtml/p/9913446.html
Copyright © 2011-2022 走看看