`
liudaoru
  • 浏览: 1586912 次
  • 性别: 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]
评论
发表评论

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

相关推荐

    数据库分页技术超级导航条

    - 为了优化用户体验，导航条可以动态调整，如当用户接近数据集末尾时，"下一页"按钮会自动禁用。 4. ASP.NET中的分页实现： - ASP.NET提供了多种分页控件，如GridView、DataList和Repeater，它们内置了分页功能，...

    纯JS长文章分页代码

    - `flag`：分页模式（自动分页或通过标记分页）。 - `startpage`：初始页面。 - `TopShowStyle` 和 `DownShowStyle`：顶部和底部导航样式。 3. **变量定义**： - `currentSet`：当前页码。 - `CutFlag`：分隔符...

    分页插件.zip

    4. **多种导航模式**：除了常见的数字分页，还可以提供“上一页”、“下一页”、“首页”、“末页”等导航选项，方便用户浏览。 5. **兼容性**：正如标题所述，该分页插件特别强调对旧版本IE浏览器（如IE5和IE6）的...

    js分页代码,分页代码

    - 虽然示例代码中没有完整展示分页逻辑，但从变量命名和注释中可以看出，主要涉及到的内容包括：确定每页显示多少内容、如何根据当前页数显示内容、如何生成分页导航等。 ### 五、扩展知识点 除了基本的分页功能...

    WPF 分页DataGrid 分页控件的实现

    6. **创建分页控件**：为了允许用户导航到不同页面，你需要创建分页界面元素，如页码按钮。你可以使用MVVM模式，通过命令处理按钮点击事件，或者在代码-behind中直接处理。 7. **处理分页按钮点击**：当用户点击...

    JSF分页组件

    - **PrimeFaces的p:datascroller**: 这个组件可以轻松地与数据源结合，提供滑动和分页导航模式。你可以通过`rows`属性设置每页显示的行数，`first`属性表示当前页的第一个元素的索引。 - **PrimeFaces的p:dataTable*...

    mvc模式下分页代码

    这些库通常会自动处理SQL的分页逻辑，让你专注于业务逻辑。 **前端分页** 前端分页是在浏览器端处理分页，通常通过JavaScript或现代前端框架如React、Vue或Angular实现。这种方式可以减轻服务器的负担，但可能需要...

    WPF MVVM DataGrid分页案例

    5. **事件处理**：为导航按钮添加事件处理，当用户点击“下一页”或“上一页”时，更新CurrentPage属性，从而触发DataItems集合的改变，DataGrid会自动更新显示的数据。 6. **优化性能**：为了提高性能，可以使用...

    24种分页样式

    在网页设计中，分页是一种常见的用户界面元素，用于帮助用户在大量数据或内容中进行导航。本资源“24种分页样式”提供了一系列不同的设计示例，旨在提升用户体验和网站美观性。分页样式的选择对网站的整体交互性和...

    e路JS分页样式类，e路JS分页样式类

    在网页开发中，分页是常见的功能之一，用于处理大量数据的展示，使得用户能够方便地浏览和导航。"e路JS分页样式类"是一个专门针对JavaScript实现的分页样式库，它提供了美观的界面和友好的用户体验。在这个主题中，...

    24款网页分页方法满足网站需要

    这种模式常见于社交媒体和新闻网站，但可能影响用户的导航体验。 8. 渐进式加载：结合传统分页与无限滚动，初始显示少量页面，用户点击后逐步加载更多。这种策略平衡了加载速度和用户导航。 9. 跳转分页：提供...

    php实现的分页类.zip

    在PHP开发中，分页是常见的功能之一，用于处理大量数据的显示，使得用户可以方便地浏览和导航。本资源“php实现的分页类.zip”提供了一个实用的PHP类库，可以帮助开发者轻松实现网页的分页功能。下面将详细探讨PHP...

    ViewPager + GridView实现GridView分页首页导航栏布局分页效果

    在Android开发中，创建一个具有分页功能的首页导航栏布局是常见的需求，尤其是在内容丰富的应用中。`ViewPager`和`GridView`结合使用可以很好地实现这一功能。`ViewPager`允许用户左右滑动来切换页面，而`GridView`...

    wpf用户分页控件

    1. **数据绑定**：WPF分页控件通常支持MVVM（Model-View-ViewModel）设计模式，允许开发者将数据源绑定到控件上，自动处理数据的分页加载。 2. **分页参数**：控件提供设置每页显示条目数量、当前页数等分页参数的...

    WPF-MVVM分页功能例子

    在视图中添加导航按钮和分页信息显示。这可以通过绑定到视图模型的属性实现，如页码文本框和“上一页”、“下一页”按钮的命令。按钮的样式可以通过模板进行自定义，以匹配应用程序的外观。 5. 更新数据： 当用户...

    SSM框架实现分页查询例子

    6. **前端展示**：前端接收到分页数据后，根据返回的总记录数、当前页码和每页记录数来渲染分页导航条，用户可以通过点击页码进行翻页，前端再发送请求获取新的数据。 7. **优化与注意事项**：为了提高性能，可以...

    分页源码

    8. **分页设计模式**： - **无限滚动**：常见于新闻网站，用户滚动页面时自动加载新内容。 - **传统翻页**：用户点击页码或箭头进行翻页。 9. **响应式分页**： 针对不同设备和屏幕尺寸，设计适应性的分页布局，...

    一个用于分页php类库

    3. **构建分页链接**：类库通常会提供方法生成分页导航链接，包括上一页、下一页、第一页、最后一页以及中间的页码链接。这些链接需要考虑到当前页码，并根据URL模式生成正确的请求参数。 4. **分页查询**：类库会...

    自适应宽度且居中的分页

    标题“自适应宽度且居中的分页”涉及的是网页设计中的一个重要概念，即如何在不同设备和屏幕尺寸下实现分页导航条的自适应布局，同时保持其在页面中的居中对齐。在这个问题中，我们通常会用到前端开发中的响应式设计...

    java web 分页管理器

    3. **DAO（Data Access Object）模式**：在业务逻辑层，使用DAO模式封装数据库操作，包括分页查询。DAO负责执行SQL查询，并返回结果集给服务层。 4. **Service层处理**：服务层接收分页参数，调用DAO方法获取分页...

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