• 关注此站
  • 网站管理
    • 网站首页
    • 给我留言
    js表格排序,可任意的对指定列的进行排序
    发布者:kos   发布日期:2010年03月5日 9:39 pm 暂无评论

    由于工作需要,要实现表格内容的排序,于是在网上找了很多代码,这种东西写的人确实太多,所以自己就不怎么想写了,但网上找的大部分要么兼容性不好,要么达不到我的要求,于是找了个较为简单的进行修改.
    声明:由于我在找到的源码上做了很多修改,把无用的东西都删除掉了,所以现在不知道出处,抄袭之处,敬请原谅!
    所以排序的原理就不做解释了,再一就是我也没认真看过,可以慢慢去了解原理,在大部分要用到的这种排序中,可能有些不必要的项(即列),可能不需要进行排序,所以我们要对想进行排序的项才实现排序功能,那么要写一个通用的,最简单的方法就是把要排序的列放到一组数据中传到方法里面去,方法体接收到参数后,把组成一个数组,然后循环判断让需要进行排序的列去执行排序方法,费话就说这些了,下面是给出的源代码,如有兴趣可以一起研究一下,看有没有不足之处:
    效果如下:

    姓名 班级 语文 数字 物理 化学 总分 平均分 总名次 班级名次
    张三 1班 60 80 90 78 388 78 1 1
    李四 2班 70 90 98 56 483 76 7 2
    王五 3班 67 89 87 67 367 79 23 3
    赵六 4班 76 87 76 89 424 85 26 4

    上面的例子我只让1,2,3,4,5,7进行排序,所以传值的时候写成了

    <script type="text/javascript">
    var st1 = new SortableTable(document.getElementById("dTable"),'','1,2,3,4,5,7');
    </script>

    来自分类: DIV+CSS, JavaScript, 网站设计   Tags: 任意列, 表格排序
    div+css通用网页布局实例
    发布者:kos   发布日期:2009年12月8日 10:55 am 暂无评论

    直接看下面的效果,通用的网页基本上采用这个基本布局,不再为div+css实现网页布局而烦恼了!

    CODE
    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

     

    [查看详情... ...]

    来自分类: DIV+CSS, 网站设计   Tags: DIV+CSS, 网页布局
    js+CSS实现QQ菜单样式(老版QQ菜单样式,兼容火狐)
    发布者:kos   发布日期:2009年11月30日 6:01 pm 暂无评论

    给大家一个都不陌生的导航样式,老版的QQ菜单样式,网上找了一些代码,但觉得很复杂,想用起来又不方便,于是自己动手写了一个简单的,除了没有写缓慢展开的效果外,其余的都应该差不多,相信很多地方都能用上。

    功能如下:
    1、初始状态下,所以菜单呈关闭状态,当点击某一个菜单时,就展开此菜单,展示里面的内容
    2、当点击另外一个菜单时,前一个菜单关闭,展开新点击的菜单,展示里面的内容
    3、浏览器窗口大小改变时,展开的菜单会对应于你的浏览器大小而拉伸或压缩
    4、当浏览器窗口高度过小(即刷新浏览器出现上下滚动)时,报错提醒,(相信设置导航时会考虑到大体性,即不要把分类分得太多)

    最后,用到的样式表都只是为了体现功能效果,没有细设,至于鼠标移动和其它样式,自己稍做修改就可达到你想要的效果

    [查看实例]

    来自分类: DIV+CSS, JavaScript, 网站设计   Tags: onResize(), 兼容的QQ菜单, 导航
    js+css实现windows应用程序的拖动效果
    发布者:kos   发布日期:2009年11月27日 1:15 am 现有1条评论

    闲来无事,把以前学习的js整理了一下

    在学习的过程,总会发现一些看上去貌似没用的东西,但在实际的应用中有可能会逐一的体会到那些东西的有用之处和优点."层"这个东西对于我们来说并不陌生,如今的网页设计中,层的应用越来越广泛,这正是因为层给我们能带来一种独特的方便的页面的整齐效果,这之中也有很多让我们头痛的,比如"赖皮广告",但我们在意的或许不是这个东西,如果说一个网站的赖皮广告很多的话,我可能只看一次,不进第二次,我们在意的是层给我们带来的方便.

    仅此给大家分享一个能带来方便的层应用:
    windows的操作习惯应该说影响了绝大部分的网名,应用程序窗口的拖动可能每个人都接触过,把这个拖动效果应用到层上,就会在网页中就会带给我们同样的感觉.

    [点击查看实例]

    来自分类: DIV+CSS, JavaScript, 网站设计   Tags: windows应用程序, 层拖动, 窗口
    有关js弹出层位置随鼠标点击而改变的问题
    发布者:kos   发布日期:2009年11月25日 10:37 pm 现有1条评论

    大家都知道,当在桌面上点击鼠标右键的时候,会有一个弹出菜单跟随在鼠标点击的位置,当鼠标在屏幕的底部点击的时候,弹出菜单就会弹到点击位置上面的相应位置,当鼠标屏幕的右部点击的时候,弹出菜单就会弹到点击位置左部的相应位置。

    思路如下:
    弹出层的位置与点击位置和弹出层的宽度高度
    及body的宽度和高度有关。

    具体判断如下:

    如果hit_x + div_width > body_width 则弹出层的位置超出范围,则让弹出层显示在点击位置的左部,否则显示在右部;
    如果hit_y + div_height> body_height则弹出层的位置超出范围,则让弹出层显示在点击位置的上部,否则显示在下部。

    [……]

    来自分类: DIV+CSS, JavaScript, 网站设计   Tags: 层跟随, 弹出层定位, 弹出菜单, 桌面右键, 赋值
    setTimeout实现缓慢移动和clearTimeout停止移动效果
    发布者:kos   发布日期:2009年11月16日 11:01 am 暂无评论

    前面一篇文章实现了用其它方式代替滚动条的方法,能够更容易的美化页面,而那种方法有一个缺陷就是给人视觉上的反应不是很一目了然,每点击按钮触发一次事件后,就直接从一个位置滚动到另一个位置,看不到整个滚动过程

    其实前面一篇文章对于正常的使用完全没有问题了,但为了让其更完美决定把此功能完善了一下

    [......]

    来自分类: DIV+CSS, JavaScript, 网站设计   Tags: clearTimeout, JavaScript(1), js(1), setTimeout, 缓慢移动
    js巧用scrollTop属性使滚动条以另一种方式表现(兼容)
    发布者:kos   发布日期:2009年11月10日 1:16 am 暂无评论

    很久没写东西了,最近网上到处找一些处理滚动的js
    看来看去,看到恼火,都是些长篇大论,写得太多,本想在里面找个好用点的收集到起,结果不好用的归不好用,复杂的归复杂,最后还是自己动手写了一个简单的

    1、点击一个按钮即让里面内容上下滚动其实就是让scrollTop的值发生改变
    2、当内容顶对齐后就不再要向上点击的按钮,向下亦同,即判断scrollTop的值和内容的实际高度与外面容器的值的关系

    来个例子让大家看看才是真的(兼容的哦):

    CODE
    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

    来自分类: DIV+CSS, JavaScript, 网站设计   Tags: offsetHeight, scrollTop, W3C标准, 兼容, 滚动
    有关图片或文字的连续滚动
    发布者:kos   发布日期:2009年10月20日 7:22 pm 共有2条评论

    往往在页面设计中会用到文字或图片的滚动效果,连续性一直倍爱从事IT行业的关注和崇拜,要达到连续滚动则需要用js来控制,通过使用setTimeout和setInterval方法都能实现这样的功能,下面例子仅以setInterval为例作一个简单介绍。
    代码如下:

    CODE
    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


    来自分类: DIV+CSS, JavaScript, 网站设计   Tags: MARQUEE, setInterval, setTimeout, 滚动
    很实用的运行调试代码
    发布者:kos   发布日期:2009年10月19日 5:36 pm 共有2条评论

    最近没事干,喜欢搞一点小东西。
    有一个东西我觉得很有意思,可以给大家分享一下,只不过用起来还是有那么点不方便,不过方法我觉得挺有意思。
    在很多网页中都会看到有代码调试效果这样的功能:
    通常一个页面可能会有多个这样的功能,牵涉到传值的问题有点麻烦,按照传统的方法,给一个id什么的来解决,但是多了的话可能自己都记不清楚到底对应的id是多少了,还有就是怕重复,一个页面里面id是不能重复的。
    效果图如下:

    [......]

    来自分类: DIV+CSS, JavaScript, 网站设计   Tags: code调试, parentNode, textarea, 传值, 节点, 调试, 运行
    巧用title属性做提示功能,兼容的js代码
    发布者:kos   发布日期:2009年10月14日 4:34 pm 共有5条评论

    巧用title属性做提示功能

    在此之前一直觉得title属性很好用,但依然存在一些小问题:

    1、当鼠标指上去到提示有间隔时间;

    2、在ie6或低版本浏览器中,此提示会被下拉菜单和一些优先级比较高的东西遮挡住;

    3、默认的没有任何样式修饰,在此基础上加入样式,可以让提示更为醒目。

    [......]

    来自分类: DIV+CSS, JavaScript   Tags: title, 下拉菜单, 优先级, 兼容, 提示效果
    上一篇:%link
    • 站点日历

        2010-03月    
      一 二 三 四 五 六 日
      1234567
      891011121314
      15161718192021
      22232425262728
      293031  
    • 站内搜索

    • 分类导航

      • DIV+CSS (11)
      • Flash编程 (1)
      • JavaScript (23)
      • 网站设计 (15)
      • 网络杂坛 (2)
      • 网络资源 (2)
    • 博客标签

      下拉菜单(1) 优先级(1) 传值(3) 兼容(3) 子页面(2) 字符串(1) 导航(2) 手机号码(1) 拼接(1) 提示效果(1) 滚动(2) 滤镜(1) 电话号码(1) 空间站(1) 网页(1) 节点(1) 获取(1) 调试(1) 运行(1) 透明背景(1) 邮箱(1) 验证(1) clearTimeout(2) code调试(1) contentWindow(1) createRange(1) ExecWB(1) external(1) iframe(1) JavaScript(1) join()(2) js(1) MARQUEE(2) options(1) parentNode(1) png(1) refresh(1) scrollTop(1) selectedIndex(1) selection(1) setInterval(1) setTimeout(4) textarea(1) title(2) W3C标准(3)
    • 有情链接

      • 博客集中营
      • 寻常百姓(淘宝导购)
      • 寻常百姓·家
      • 手机菜鸟
      • 柳永法'Blog
      • 爱吾资源
    Powered by WordPress. Theme F2.© 2010 友意博客   E-mail:uideas@163.com   QQ:50853854