`
liudaoru
  • 浏览: 1560298 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

自动分页的导航模式

    博客分类：
  • Ajax
JavaScriptCSSHTMLBlog 
阅读更多

用户只需按照顺序添加即可，翻页有系统自动实现。

js 代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  2. <html>   
  3.     <head>   
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
  5.         <script language="javascript" type="text/javascript"  
  6.             src="http://misc.home.news.cn/js/trs/blog/admin/admin_base.js"></script>   
  7.         <script language="JavaScript" type="text/JavaScript">   
  8. window.onload = function() {   
  9.     //windowInit();    
  10.     newWinInit();   
  11. }   
  12. var MOVEABLE = false;   
  13. var groups = new Array();   
  14. var groups_size = 0;   
  15. var groups_cur = 0;   
  16. function newWinInit(){   
  17.     var con = $("mainInner");   
  18.     var items = con.innerHTML.split("┆");   
  19.     var str = "";   
  20.     var k = 0;   
  21.     var group_children_size = 10;   
  22.        
  23.     //第一页为14个，以后每页为10个   
  24.     for(var i = 0; i < items.length; i += 1) {   
  25.         if(i < 13) {   
  26.             str += items[i] + "┆";   
  27.             continue;   
  28.         }   
  29.         else if(i == 13) {   
  30.             str += items[i];   
  31.             groups[k++] = str;   
  32.             str = "";   
  33.             continue;   
  34.         }   
  35.            
  36.         if((i - 14) % group_children_size != group_children_size - 1 && i != items.length - 1) {   
  37.             //如果不是最后一列，并且不是最后一个，则继续拼接字符串   
  38.             str += items[i] + "┆";   
  39.         }   
  40.         else {   
  41.             str += items[i];   
  42.             groups[k++] = str;   
  43.             str = "";   
  44.         }   
  45.     }              
  46.     if(i < 13) {   
  47.         groups[k++] = str;   
  48.     }   
  49.     groups_size = groups.length;   
  50.     groups_cur = 0;   
  51.        
  52.        
  53.     con.innerHTML = groups[0];   
  54.   
  55.     //左移的事件   
  56.     $("leftTag").onmouseover = function() {   
  57.         this.className = "leftion1";   
  58.     }   
  59.     $("leftTag").onmouseout = function() {   
  60.         this.className = "leftion";   
  61.     }   
  62.     //右移的事件   
  63.     $("rightTag").onmouseover = function() {   
  64.         this.className = "rightion1";   
  65.     }   
  66.     $("rightTag").onmouseout = function() {   
  67.         this.className = "rightion";   
  68.     }   
  69.   
  70.     //单击时切换显示   
  71.     $("leftTag").onclick = function() {   
  72.         if(groups_cur < 1) {   
  73.             groups_cur = groups_size;   
  74.         }   
  75.         var obj = $("mainInner");   
  76.   
  77.         while(obj.hasChildNodes()) {   
  78.             obj.removeChild(obj.childNodes[0]);   
  79.         }   
  80.            
  81.         obj.innerHTML = groups[--groups_cur];   
  82.         $("typeTag").innerHTML = eval(groups_cur + 1);   
  83.     }   
  84.     //右移的事件   
  85.     $("rightTag").onclick = function() {   
  86.         if(groups_cur >= groups_size - 1) {   
  87.             groups_cur = -1;   
  88.         }   
  89.   
  90.         var obj = $("mainInner");   
  91.   
  92.         while(obj.hasChildNodes()) {   
  93.             obj.removeChild(obj.childNodes[0]);   
  94.         }   
  95.            
  96.         obj.innerHTML = groups[++groups_cur];   
  97.         $("typeTag").innerHTML = eval(groups_cur + 1);   
  98.   
  99.     }   
  100. }   
  101. //当点中时高亮   
  102. var old_tarObj = null;   
  103. function showCurObj(evt) {   
  104.     var tarObj = null;   
  105.     if(window.event) {   
  106.         tarObj = window.event.srcElement;   
  107.     }   
  108.     else {   
  109.         tarObj = evt.target;   
  110.     }   
  111.        
  112.     //如果是导航链接项   
  113.     if(tarObj.tagName.toLowerCase() == "a" && tarObj.target == "leftFrame") {   
  114.         if(old_tarObj) {   
  115.             old_tarObj.style.cssText = "";   
  116.         }   
  117.         tarObj.style.cssText = "color: #fffa00;font-weight:600;";   
  118.         old_tarObj = tarObj;   
  119.     }      
  120.     delete tarObj;   
  121. }   
  122. </script>   
  123.         <link href="http://misc.home.news.cn/blog/css/top.css"  
  124.             rel="stylesheet" type="text/css">   
  125.     </head>   
  126.   
  127.     <body>   
  128.         <table width="100%" border="0" cellpadding="0" cellspacing="0"  
  129.             >   
  130.             <tr>   
  131.                 <td align="center" valign="top" class="tdbg"  
  132.                     style="padding-right:10px;">   
  133.                     <div id="username" align="right">   
  134.                     </div>   
  135.                     <div id="mainmenu" align="right">   
  136.                         <span id="rightTag" class="rightion">&nbsp;&nbsp;</span>   
  137.                         <span id="typeTag" class="cention">1</span>   
  138.                         <span id="leftTag" class="leftion">&nbsp;&nbsp;</span>   
  139.                         <span onclick="showCurObj(event);" id="mainCon"  
  140.                             style="width:700px;float:right;"> <span id="mainInner"  
  141.                             style="width:700px;"> <span><a   
  142.                                     href="#" target="leftFrame">文章</a> </span>┆<span><a   
  143.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  144.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  145.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  146.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  147.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  148.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  149.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  150.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  151.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  152.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  153.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  154.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  155.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  156.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  157.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  158.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  159.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  160.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  161.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  162.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  163.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  164.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  165.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  166.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  167.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  168.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  169.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  170.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  171.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  172.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  173.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  174.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  175.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  176.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  177.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  178.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  179.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  180.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  181.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  182.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  183.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  184.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  185.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  186.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  187.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  188.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  189.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  190.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  191.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  192.                                     href="#" class="width4word" target="leftFrame">abd</a> </span> </span> </span>   
  193.                     </div>   
  194.                 </td>   
  195.             </tr>   
  196.         </table>   
  197.     </body>   
  198. </html>   
  199.   
分享到：
| Javascript的一种模块模式[z]
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    WordPress导航主题源码添加搜索自动索引百度热搜关键词

    WordPress导航主题源码添加搜索自动索引百度热搜关键词插图1 文章内容元素样式调整 经典编辑器添加对应样式预览 网址块添加nofollow属性开关(基础设置) 添加全站图片灯箱 增加go跳转白名单(基础设置) 修复投稿成功后...

    纯js分页代码(简洁实用)

    //1:根据字数自动分页 2:根据[NextPage]分页//默认页startpage = 1;//导航显示样式 0:常规 1:直接 3:下拉TopShowStyle = 1;DownShowStyle = 0;  var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage...

    软件博客导航系统 v1.1.rar

    软件博客导航系统最初是为我的网站(九网软件)写的一个软件博客导航，方便博主之间走访,后来写了简单的后台，美化了下前台，php mysql模式，使用了fancybox插件。 软件博客导航系统特点： 1.具有分享网站到社区的...

    WordPress导航主题源码 webstack pro V2.0406主题

    添加搜索自动索引百度热搜关键词 添加首页tab标签模式加载方式切换(ajax加载和普通加载)(首页设置) 修复tab标签ajax加载模式会显示未审核的网址的bug 小屏幕热搜采用水平滚动 优化子主题支持 添加文章分页 ...

    mysql分页性能探索

    扶梯方式在导航上通常只提供上一页/下一页这两种模式，部分产品甚至不提供上一页功能，只提供一种“更多/more”的方式，也有下拉自动加载更多的方式，在技术上都可以归纳成扶梯方式。 扶梯方式在技术实现上比较简单...

    强力 Java 爬虫，列表分页、详细页分页、ajax、微内核高扩展、配置灵活.zip

    郑冬冬等人利用一个预定义的领域本体知识库来识别Deep Web页面内容，同时利用一些来自Web站点导航模式来识别自动填写表单时所需进行的路径导航。 （2）基于网页结构分析的表单填写：此方法一般无领域知识或仅有有限...

    247ssm-mysql-jsp 智能图书馆导航系统.zip（可运行源码+数据库文件+文档）

    智能图书馆导航管理系统是一款基于BS架构模式开发的图书馆宣传网站，网页端采用SSM框架技术开发，MySQL作为数据库，同时使用了JSP、java web等技术进行开发，最终达到智能图书导航的实现，能够实现用户搜索书籍，...

    软件博客导航系统 v1.1

    软件博客导航系统最初是为我的网站(九网软件)写的一个软件博客导航，方便博主之间走访,后来写了简单的后台，美化了下前台，php+mysql模式，使用了fancybox插件。 软件博客导航系统特点： 1.具有分享网站到社区的...

    WordPress 网址导航主题风格模板下载

    WordPress webstack pro V2.0406网址导航主题风格源码说明： V2.0406 添加搜索自动索引百度热搜关键词 添加首页tab标签模式加载方式切换(ajax加载和普通加载)(首页设置) 修复tab标签ajax加载模式会显示未审核的网址...

    SqlPage1.2.6.5版本升级

    1.本版本的需要2.0框架...修正在数字分页时，没有数据集时导航显示仍为之前样式的问题 3.调整首页，尾页样式不变化问题 如果您在使用中发现BUG或有很好的建议请联系我,让大家一起参与进来维护好这个控件.

    iWPC 网站发布系统 v2.6

    新的分页符，支持子标题和子标题下拉菜单导航 也就是 http://www.pcpop.com/article/2003/756/1.shtml 这样的效果,同时开放了分页连接，用户可以通过修改 extra_function.php里的一个分页处理函数来自定义样式 ...

    SqlPage 1.2.10.5 版本

    修正在数字分页时，没有数据集时导航显示仍为之前样式的问题 3.调整首页，尾页样式不变化问题 4.新增CurrentPageText属性用于自定义显示分页信息。默认值：共&nbsp{2}&nbsp条记录&nbsp--&nbsp第&nbsp{0}&...

    138CMS网站管理系统 v3.0 build20120801.rar

    10.文章列表摘要控制、文章内容自动分页、文章页心情投票、文章列表每页显示条数设置、文章自定义关键字及描述、文章及栏目查看权限 11.采集：按目标文章分页、保存图片时增加水印、自动分页字数、规则导入导出、...

    多线程、高性能采集器爬虫.net版源码，可采ajax页面

    6）支持采集网址自动翻页、导航层自动翻页，定义翻页规则后系统会自动翻页进行数据采集，同时此功能也可用户分页文章的自动合并操作； 7）网络矿工支持级联采集，即在导航基础上，可自动将不同级别的数据采集下来...

    bootstrap-4.3.1

    下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。 Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括： 模式...

    聚茶客源码 v1.0.rar

    8、支持文章内容分页：手工分页、按字数自动分页； 9、支持把远程图片自动保存到本地； 10、支持自动获取关键词（标签）和内容摘要； 11、支持显示关键词（标签tag），及显示相同关键词的相关文章； 12、支持从...

    香香企业管理系统 v5.0.rar

     8、支持文章内容分页：手工分页、按字数自动分页；  9、支持把远程图片自动保存到本地；  10、支持自动获取关键词（标签）和内容摘要；  11、支持显示关键词（标签tag），及显示相同关键词的相关文章；（◇...

    一个不错的javaScirpt例子

    &lt;br&gt;分页导航功能，允许界面开发者为控件指定一个PageControl对象，该对象有两个重要属性：pageSize用来控制每页行数，query用来指定翻页时要回调的函数。如果翻页时是不需要查询条件的，query可以设置为一个url...

    noir：Noir是Jekyll的现代，响应式和可自定义的主题，具有黑暗模式支持

    印刷术受到密切关注，并且会自动显示暗模式的配色方案。 它以多种方式建立在标准的Jekyll安装之上。演示版您可以观看Noir的现场演示： : 产品特点包含HTML，SASS和Config文件，用于主题的设计和功能。 链接到页面/...

    SpaceBuilder v3.1[免安装]源码

    8.可以设置资讯内容分页方式：自动分页和手动分页 9.资讯可以自定义页面 10.资讯首页内容块提取数据API 11.相册圈人会同时产生动态及给被圈的人发通知 12.相册列表在不同隐私状态的相册封面加不同的隐私状态图标 13....

Magicbox
Global site tag (gtag.js) - Google Analytics