静态页面也可以实现预览 列表不同的显示方式 原创

为了方便查看内容,我特别加了个 预览 列表 两个列表显示方式
写于2006-10月,转载请写明出处 我们


代码如下:

//用于列表显示方式
function changeshow(num){
var thenum=num,thestyle;
if (num==1){
thestyle="none";
setCookie("num","1",6)
var elements1=document.getElementsByTagName("div");
  for(var i=0;i<elements1.length;i++){
   if(elements1[i].id=='dxy'){
elements1[i].className='info2';
   }
  }
}else
{
thestyle=""
setCookie("num","0",6)
var elements2=document.getElementsByTagName("div");
  for(var i=0;i<elements2.length;i++){
   if(elements2[i].id=='dxy'){
elements2[i].className='info';
   }
  }
}
 var elements=document.getElementsByTagName("div");
  for(var i=0;i<elements.length;i++){
   if(elements[i].id=='jb51'){
       if(elements[i].style.display!=thestyle){
        elements[i].style.display=thestyle;
        }
   }
  }
}

function setCookie(name, value)        //cookies设置JS
{
    var argv = setCookie.arguments;
    var argc = setCookie.arguments.length;
    var expires = (argc > 2) ? argv[2] : null;
    if(expires!=null)
    {
        var LargeExpDate = new Date ();
        LargeExpDate.setTime(LargeExpDate.getTime() + (expires*1000*3600*24));
    }
    document.cookie = name + "=" + escape (value)+((expires == null) ? "" : ("; expires=" +LargeExpDate.toGMTString()));
}

function getCookie(Name)            //cookies读取JS
{
    var search = Name + "="
    if(document.cookie.length > 0) 
    {
        offset = document.cookie.indexOf(search)
        if(offset != -1) 
        {
            offset += search.length
            end = document.cookie.indexOf(";", offset)
            if(end == -1) end = document.cookie.length
            return unescape(document.cookie.substring(offset, end))
         }
    else return ""
      }
}

PS:
1、你的生成静态的文件中要有<div id=jb51>字样,当然你也可以随意更改注意
上述代码中的var elements=document.getElementsByTagName("div"); 
代码
2、调用方法:


代码如下:

<script type=text/javascript language=javascript src="list.js"></script>

3、附poplist.js


代码如下:

try{
var dxynum=getCookie("num");
changeshow(dxynum);
}
catch(e){

}

具体应用:http://www.jb51.net/html/list/list_1_1.htm

(0)

相关推荐

  • 静态页面也可以实现预览 列表不同的显示方式 原创

    为了方便查看内容,我特别加了个 预览 列表 两个列表显示方式写于2006-10月,转载请写明出处 我们 复制代码 代码如下: //用于列表显示方式 function changeshow(num){ var thenum=num,thestyle; if (num==1){ thestyle="none"; setCookie("num","1",6) var elements1=document.getElementsByTagName(&qu

  • 基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作

    本篇文章主要介绍如何实现Web页面内容的打印预览和保存操作的相关知识,一起学习吧! 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预览,打印等操作,还是很方便的一个控件,因此都很适合普通内容的打印,证件的套打等操作. 不过随着浏览器技术的更新,这个插件在Chrome或者FireFox上好像不受支持了,基本上摒弃了这种插件的处理方式了.例如如果我

  • Vue 页面监听用户预览时间功能的实现代码

    最近的业务中涉及到这样一个需求,在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长.初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed,分别在其中加入开始计时和清除计时的逻辑,通过后台的接口上报对应的培训素材的时间数据,即可达到目的. 有了思路,我们就可以开始筹划具体的代码. 定义开始结束计时函数 在 data 中定义我们通过变量定义计时器,这样可以通过 this.timer 随处可访问,便于后面销毁页面的时候清除它. duration 为时长

  • c#打印预览控件中实现用鼠标移动页面功能代码分享

    该功能本来可以通过拉动水平和垂直滚动条来实现,但实际使用中,用户更趋向于直接用鼠标拖动页面来实现,很多看图类软件都有这种类似的功能.而.net的打印预览控件却很遗憾的没有提供这一功能,只来自己想办法来实现啦. 我的办法就是用代码来控制打印预览控件中的水平来垂直滚动条的位置,间接实现和用鼠标直接拖动滚动条一样的效果. 在实现这一功能的过程中,最大的困难是打印预览控件并没有让程序员直接调用的关于滚动条的方法或属性.所以只好向WinAPI求助了. 以下API函数和常量就是实现上述功能的关键了: 复制代

  • vue-cli多页面应用实践之实现组件预览项目

    目录 vue-cli 多页面应用 实现组件预览项目 多页面应用配置 页面布局 左侧菜单栏 中间区域 右侧手机页 功能扩展建议 仓库源码 总结 vue-cli 多页面应用 vue技术栈的同学,大多是用vue-cli来搭建单页面应用.如后台管理系统,H5活动等: vue-cli多页面应用开发 在初学时可能你有浏览过这方面的知识,但是实际开发中却比较少用到: 其实多页面还是非常实用的,它可以用来实现组件库的功能预览.H5可视化系统的页面预览.个人站点的功能介绍等: 你可以直接跳到文末的仓库源码,也可以

  • 分离与继承的思想实现图片上传后的预览功能:ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图.在实现这个组件的过程中,有用到前面几篇博客介绍的相关内容,比如继承库class.js,任意组件的事件管理库eventBase.js,同时包含进了自己对职责分离,表现与行为分离这两方面的一些思考,欢迎阅读与交流. 演示效果: 注:由于演示的代码都是静态的,所以文件上传的组件是用setTimeout模

  • JavaScript中附件预览功能实现详解(推荐)

    由于公司的EMP影像平台比较繁琐,还需要下载才能够能够进行图片的预览,于是业务人员提出在附件列表页面增加预览页面.今天将完成的过程记录下来: 一种是js版本的,另一种是jquery版本, 在这里使用的是js版本的.jquery版本只是引入方式略有不同. 1.引入插件(已上传) <SCRIPT src="styles/ccc/jquery.min.js"></SCRIPT>   <SCRIPT src="styles/ccc/viewer-jque

  • 纯JS实现的批量图片预览加载功能

    1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果 复制代码 代码如下: <div style="height: 2500px;" id="txtScrollTop"> </div> <div id="galleryList"> </div> 复制代码 代码如下: var util = { $: fu

  • Java实现在线预览的示例代码(openOffice实现)

    简介 之前有写了poi实现在线预览的文章,里面也说到了使用openOffice也可以做到,这里就详细介绍一下. 我的实现逻辑有两种: 一.利用jodconverter(基于OpenOffice服务)将文件(.doc..docx..xls..ppt)转化为html格式. 二.利用jodconverter(基于OpenOffice服务)将文件(.doc..docx..xls..ppt)转化为pdf格式. 转换成html格式大家都能理解,这样就可以直接在浏览器上查看了,也就实现了在线预览的功能:转换成

  • java实现在线预览--poi实现word、excel、ppt转html的方法

    java实现在线预览 - -之poi实现word.excel.ppt转html,具体内容如下所示: ###简介 java实现在线预览功能是一个大家在工作中也许会遇到的需求,如果公司有钱,直接使用付费的第三方软件或者云在线预览服务就可以了,例如永中office.office web 365(http://www.officeweb365.com/)他们都有云在线预览服务,就是要钱0.0 如果想要免费的,可以用openoffice,还需要借助其他的工具(例如swfTools.FlexPaper等)才

随机推荐