html筛选插件代码(选择器html)
admin 发布:2022-12-19 19:11 163
本篇文章给大家谈谈html筛选插件代码,以及选择器html对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
- 1、JS 前端的筛选代码
- 2、php筛选输出html (已提供条件)
- 3、网页上面如何做带搜索筛选功能的选择框,下拉列表。
- 4、大家好,想问一下有没有用HTML+JavaScript写的多项选择框的插件或者例子?具体的实现见下图.
JS 前端的筛选代码
先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码:
因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值获取到,点击首页/下一页等传值正确的话,基本上分页是不会出什么问题的
网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了。其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用limit进行分页。
废话不多说,直接上代码了!
注:本项目是全程使用js来写的,前台的数据通过ajax进行获取,然后再进行拼装,动态加载到页面。
1.先把上一页,下一页等的代码附上(里面的值都是伪值,下面会在js里进行重新赋值的!)
ul class="page" id="page" li id="shouye" class="p-prev disabled" a href='javascript:indexpage(1);'首 页/a /li li id="shangyiye" class="p-prev disabled" a href='javascript:indexpage(-1);'i/i上一页/a /li li a id="one" href="javascript:void(0);" 1/a/li lia id="two" href="javascript:void(0);" 2/a/li lia id="three" href="javascript:void(0);" 3/a/li li class="more"a id="five" href="javascript:void(0);" .../a/li lia id="fore" href="javascript:void(0);" 13855/a/li li class='p-next' a href='javascript:indexpage(-3);' onclick="jumpToPage('2','/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);"下一页i/i/a /li li id="weiye" class='p-next' a href='javascript:void(0);' onclick="indexpage(0);"尾 页/a /li li class="total" span id="span_number"共13855页 到第input type="text" id="input_number" class="page-txtbox" /页 input name="" value="确定" type="button" onclick="jumpToPage(jQuery('#input_number').val(),'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);" class="page-btn"/ /span /li /ul
2.首先在页面放两个隐藏域,一个是当前页码,一个是总页码,总页码是页面加载完,从后台查询出来后直接附上值的,当前页码是没操作一个,就要对当前页码赋值
input id="jiazai" type="hidden" /input!-- 当前页码 -- input id="totalpage" type="hidden" /input!-- 总页码 --
3.写一个页面加载完的function,给总页码和当前页码赋值
$(function(){ $('#jiazai').val(1);//给当前页码进行赋值,默认为第一页 ajaxfunction(page,arg,chipssort,'');//这个方法是抽取的ajax后台访问的方法 });
4.抽取的ajax方法,此页面会用到好几次这个方法,所有把它收取了出来,因为页面的数据时通过ajax从后台获取到的,后台返回的是一个List集合
//抽取ajax的方法 function ajaxfunction(page,arg,chipssort,fontval){ $.ajax({ type:'POST', url:'/admin/receptionchips/showlist',//请求的url地址 data:{ page:page, sort:arg, chipssort:chipssort, fontval:fontval }, dataType:'json', contentType:'application/x-www-form-urlencoded; charset=utf-8', success:function(data){ //返回值在进行访问抽取的方法,从后台返回 commonfunction(data); } }); }
3.代码看到这也不是很多,最后一个了
//抽取拼串的方法 function commonfunction(data){ $('#projectlist').find("li").remove(); for (var i=0;idata.length;i++ ) { /*****因为此页面是动态加载的,这里主要就是进行拼串,代码也不少,就不漏出来占空间了*****/br }br//开始是分页的核心了 if(data.length0){ //设置页码 var pading = data[0].padingnum;//总页码 $('#totalpage').val(pading); var page = $('#jiazai').val();//当前页 $('#countpage').html("b id='currentPageNo'"+page+"/b/"+pading+""); $('#span_number').html("共"+pading+"页 到第input type='text' id='input_number' class='page-txtbox' /页input name='' value='确定' type='button' onclick='indexpage(-2)'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','"+pading+"', listPageCallback);' class='page-btn'/") }else{ $('#countpage').html("b id='currentPageNo'"+0+"/b/"+0+""); } //设置分页的底部 就是 首页 1 2 3 4 5 6 尾页 var pading = data[0].padingnum;//总页码href="javascript:void(0);" var nowpage = $('#jiazai').val();//当前页 //one two three five forebr//下面代码看着是比较麻烦,但是也不难理解 全是一样的代码,只不过是加了些判断 if(nowpage5 ){ $('#one').text(1); $('#one').attr('href','javascript:pagenum("'+1+'");'); $('#two').text(2); $('#two').attr('href','javascript:pagenum("'+(2)+'");'); $('#three').text(3); $('#three').attr('href','javascript:pagenum("'+(3)+'");'); $('#five').text(4); $('#five').attr('href','javascript:pagenum("'+(4)+'");'); $('#fore').text(5); $('#fore').attr('href','javascript:pagenum("'+(5)+'");'); $('#five').parent().show(); $('#fore').parent().show(); }else{ //alert("已经不是第五页了"); //设置中间的为当前页 $('#one').text(Number(nowpage)-2); $('#one').attr('href','javascript:indexpage("'+(Number(nowpage)-2)+'");'); $('#two').text(Number(nowpage)-1); $('#two').attr('href','javascript:indexpage("'+(Number(nowpage)-1)+'");'); $('#three').text(nowpage); $('#three').attr('href','javascript:indexpage("'+(nowpage)+'");'); $('#five').parent().show(); $('#fore').parent().show(); //判断下一页是否超过了总页数 if(Number(nowpage)+1pading){ $('#five').parent().hide(); $('#fore').parent().hide(); }else{ $('#five').parent().show(); $('#five').text(Number(nowpage)+1); $('#five').attr('href','javascript:indexpage("'+(Number(nowpage)+1)+'");'); } //判断下一页的第二页是否超过了总页数 if(Number(nowpage)+2pading){ $('#fore').parent().hide(); }else{ $('#fore').parent().show(); $('#fore').text(Number(nowpage)+2); $('#fore').attr('href','javascript:indexpage("'+(Number(nowpage)+2)+'");'); } } //如果总页数小于5,这块代码主要就是设置 1 2 3 4 5 这些的显示和隐藏的 if(pading==0){ $('#one').parent().hide(); $('#two').parent().hide(); $('#three').parent().hide(); $('#five').parent().hide(); $('#fore').parent().hide(); }else if(pading==1){ $('#shouye').hide(); $('#weiye').hide(); $('#one').parent().hide(); $('#two').parent().hide(); $('#three').parent().hide(); $('#five').parent().hide(); $('#fore').parent().hide(); }else if(pading==2){ $('#one').parent().show(); $('#two').parent().show(); $('#three').parent().hide(); $('#five').parent().hide(); $('#fore').parent().hide(); }else if(pading==3){ $('#one').parent().show(); $('#two').parent().show(); $('#three').parent().show(); $('#five').parent().hide(); $('#fore').parent().hide(); }else if(pading==4){ $('#one').parent().show(); $('#two').parent().show(); $('#three').parent().show(); $('#five').parent().show(); $('#fore').parent().hide(); }else{ $('#one').parent().show(); $('#two').parent().show(); $('#three').parent().show(); $('#five').parent().show(); $('#fore').parent().show(); } //设置高亮显示的,就是是第一页时,1亮,第二页时 2亮 $('#page a').each(function() { $(this).parent().removeClass("current"); if($(this).text()==nowpage){ $(this).parent().addClass("current"); } }); //分页完返回页面顶端 $("html,body").animate({scrollTop:0}, 500); //最后,给当前页码加1 $('#jiazai').val(Number(bianlaing)+Number(1)); }
好了,到这里分页就完成了,如果你们需要使用的话,可能会话费一会去理解我的代码,其实代码不难,我是使用了两个小时把它写完的,只要一行一行代码看,并且自己再加注释,把这块弄过去,不出半小时绝对搞定!
php筛选输出html (已提供条件)
.....各位都在回答什么啊....-_-#
你可以在模板里,先匹配出当前URL那个数字,然后在while里面加判断,是就输出,不然不输出。
body
..html代码...
?php
$str = $_SERVER['REQUEST_URI'];
$p = "/.*\/=(\d+)/";
$res = array();
preg_match($p,$str,$res);
$cur_url_num = $res[1]; // Hold住,模板里面用变量存起来
?
?php while ($cate-next()): ?
?php if(!$cate-parent): ?
!-- 检查即将输出的URL是否含有目标数字,是就echo --
?php if(strpos($cate-permalink(), '='.$cur_url_num) !== false): ?
a href="?php $cate-permalink(); ?"?php $cate-name(); ?/a
?php endif;?
?php endif;?
?php endwhile; ?
..html代码...
/body
其实就是多一个步骤,判断是否你要的URL而已,另外推荐你先检查有没有直接输出当前循环下的ID,例如$cate-id();什么的,有就这个判断:if($cate-id() == $cur_url_num):
网页上面如何做带搜索筛选功能的选择框,下拉列表。
如果仅考虑客户端,那么用的就是数据字典,将数据缓存起来。
考虑到数据来自于服务端的比较多,且结合AJAX技术,下拉框中的内容每发生一次改变,就会查询一次服务器,然后服务端对客户端的请求进行处理,找到响应的数据,并反馈给客户端,然后客户端进行显示,这种下拉框式的列表,如今一般都是自己写的样式了。
为避免页面重复刷新,推荐使用AJAX进行异步交互。
html
head
meta http-equiv="Content-Type" content="text/html" charset="utf-8"
meta name="GENERATOR" content="Microsoft FrontPage 4.0"
meta name="ProgId" content="FrontPage.Editor.Document"
title123/title
style type="text/css"
#list
{
height: 100px;
width: 155px;
border:1px solid #FFCC00;
}
/style
/head
body
input id="search"/
div id="list" style="display: none;"
ul id="group"
/ul
/div
/body
script LANGUAGE="JAVASCRIPT"
var array = [["a", "ab", "abc"], ["d", "de", "def"]];
var search = document.getElementById("search");
var list = document.getElementById("list");
var group = document.getElementById("group");
search.addEventListener("input", input, false);
//search.addEventListener("keyup", keyup, false);
function input(){
//删除所有子节点
var children = group.childNodes;
while(group.lastChild)
{
group.removeChild(group.lastChild);
list.style.display = "none";
}
for(var i = 0; i array.length; i++)
{
for(var j = 0; j array[i].length; j++)
{
if(search.value.toString() == array[i][j])
{
list.style.display = "block";
show(array[i]);
}
}
}
}
//显示内容
function show(arr){
var temp = arr;
for(var k = 0; k temp.length; k++)
{
if(temp[k].indexOf(search.value) -1)
{
var ele = document.createElement("li");
group.appendChild(ele);
ele.innerHTML = temp[k];
}
}
}
/script
/html
如果要兼容IE,input事件名称要做修改。
大家好,想问一下有没有用HTML+JavaScript写的多项选择框的插件或者例子?具体的实现见下图.
其实多项选择,使用html的元素checkbox就可以,如果为了美观,自己可以用图片代替checkbox的效果,值则存入一个属性为hidden的input中即可,关键的就是往input中增加一个值或删除一个值有点小算法,别的都容易解决,楼主先尝试自己解决一下
关于html筛选插件代码和选择器html的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-14软文投放平台有哪些?,软文投放平台的选择及原因
- 05-09网页代码,网页代码快捷键
- 05-07html网页制作软件,html网页制作软件手机版下载
- 05-06单页网站的代码(完整的网页代码)[20240506更新]
- 05-06个人主页图片代码(个人主页图片代码怎么弄)[20240506更新]
- 05-06提取微信名片代码(微信名片信息提取)[20240506更新]
- 05-06php后台权限管理代码(php管理员权限)[20240506更新]
- 05-06付费观看代码php(付费观看代码)[20240506更新]
- 05-06在线html执行代码(html怎么运行)[20240506更新]
- 05-06源代码管理资源管理器(资源管理器运行代码)[20240506更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接