Edi Wang

Web Front-End 19


jQuery取DIV中的值

首先,你需要找到这个div对象。加个class或者id是最方便的: fuck  接下来,就可以用.text()方法来取值了: var myval = $("#testdiv").text(); alert(myval); .text()方法的官方API如下: Unlike the .html() method, .text() can be used in both XML and HTML documents. The result of the .text() method is a string containing the combined text of all matched elements. (Due to variations in the HTML parsers in different browsers, the text returned may...

jQuery text

JQuery idTabs插件根据URL参数选择Tab

我们的项目用了SunSean的idTabs,但每个tab里的控件会触发postback,或者转到其他页面再转回来,这样当前选中的tab必丢。印度同事不肯用AJAX,无奈今天加班给印度人写个demo,通过回传URL参数来选择tab。 为了做这件事,除了jquery库和idTabs插件,我们还需要下载一个用来搞URL的插件:jquery.url.js,传送门:https://github.com/allmarkedup/jQuery-URL-Parser Tab菜单的HTML代码这样写,每个tab的div自己搞定,不发出来浪费页面了: Dashboard Tracker Documents Collaboration Knowledge Mapping 注意,一定不要给ul加class=”idTabs”...

idTabs jQuery URL

JQuery操作表格(隔行着色,高亮显示,筛选数据)

最近项目里对表格的操作比较多。以往我们要做一些效果的时候往往通过程序代码来实现,这个努力不值,因为JQuery是完全可以做到的,并且是客户端运行,不经过服务器处理,给用户的反应快,也减少了服务器压力(现在的PC多暴力啊!)。哥查了些资料,写了4个Demo: 1. 隔行着色 $('#table1 tr:odd').addClass('odd'); $('#table1 tr:even').addClass('even'); 效果: 2. 高亮含有特定数据的行 $("#table2 tr:contains('Fuck')").addClass("selected");   3. 筛选数据 $("#filter").click( function(){ $("#table3 .datarow").hide().filter(":contains('ABCDEFG'...

jQuery Table 筛选

JQuery获取浏览器窗口内容部分高度

有时候我们需要得到浏览器窗口内容部分的高度,而不是整个窗口的高度。我试了下JQuery下的window对象,似乎读的正是内容部分,有点意外,不过恰好满足了我们的要求。 下面是测试代码,记得先引用JQuery库 $(document).ready( function() { var h = $(window).height(); alert(h); } ) Firefox下: IE下: 可以发现它获取的却是是窗口的内容部分高度,而不是浏览器窗口的高度。Oh Yeah!...

jQuery window

JQuery让页脚部固定在网页底部

一般,在网页上,如果内容较少,页脚就会跑到屏幕中间去,可能会让用户感到蛋疼。 上次看了一篇文章,用CSS的办法来固定页脚到浏览器窗口底部。他优点很明显,不需要JS,并且在调整浏览器窗口大小的时候仍然可以自适应,但写法略复杂,如果项目比较赶进度,就不太能用上了。 今天我就遇到了赶进度的蛋疼事情,所以用JQuery简单搞了一个,但本人前端开发水平很烂,有不完善的地方,高手莫喷。代码如下: // 重定位页脚函数 function repositionFooter(){ var h = $(window).height(); $(".innerBlock").css('min-height',h - 230) }; // 用户调整窗口大小时重定位页脚 var resizeTimer = null; $(window).bind('resize', function(){...

jQuery resize 页脚

CSS两列布局,左边自适应,右边固定

废话不多说,直接上代码,大家自己看一下: Layout *{ margin:0;padding:0 } .wrap { overflow:auto; _display:inline-block; padding: 10px; overflow: hidden; } .right { width: 200px; padding: 10px; background-color: #F4F4F4; border: 1px solid #CECECE; float: right; } .left { padding: 10px; background-color: #F4F4F4; border: 1px solid #CECECE; margin-right: 230px; }...

CSS Layout

TinyMCE syntaxhl插入代码后换行的修改

上次搞了个整合insert code的TinyMCE编辑器,非常好用。但有一个缺点:每次插入代码后,光标都会停留在pre标记里面,打回车出不来,必须编辑HTML,在pre后面加个换行,然后才能回到可视化界面里继续编辑博客。如果博客里要插入的代码片段很多,就会非常不爽。所以今天给它做了个小修改。 打开plugins\syntaxhl\js\dialog.js 定位到41行,找到标记。这是预格式化标签的结尾标记。所以只要在它后面插入一个段落标记,即可让光标跳出我们插入的代码片段。插件的作者在41行后加了个bug注释,所以不敢贸然写在的后面,所以我们换一行,把拼接上。 现在我们插入代码后,光标就不会卡在pre里面了~OH YEAH! 有图有真相:...

InsertCode syntaxhl TinyMCE

兼容IE和Firefox的复制地址栏函数

网上找到的,经测试有效。IE9,Firefox8下没问题。 /* *Ie && Firefox CopyToClipBoard * */ function copyToClipBoard() { var txt = window.location.toString(); //txt += document.title; if(window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text",txt); }else if(navigator.userAgent.indexOf("Opera") != -1) { window.location =...

Firefox IE JavaScript

页面变灰与中国式浏览器大战不得不说的故事

今天又是全国哀悼,和2年前的汶川一样。大多数网站都把页面调成了灰色以表哀悼。    不过细心的朋友可能发现了,一些网站的页面灰色效果,只有IE浏览器有效。火狐、Chrome等用户看上去还是一片彩色。(如下图,左边火狐,右边IE)。这是什么道理呢?    先让我们看看如何实现IE下页面变灰吧。(这里需要一点网页制作知识)    其实,拿CSS来控制,一行代码就能完成。用的是IE的filter滤镜。通过给页面所有元素加上灰色滤镜,IE在渲染的时候就会自动把图片、文字等一切页面元素变灰。代码如下:    *{filter: gray;}    其中*表示所有html元素。如果有一定CSS经验你会知道用*选择器是非常不建议的,但这里为了保证能够渲染到所有的元素,必须使用*,不然有些背景图会漏过(就像我的网站,如果给body加滤镜,背景仍然会是彩色)。当然,如果你的网页比较简单,能够...

Browser