22
08年4月
jquery是个好东西,现在有很多基于它的plugin,tablesorter 就是一个。
上面有好多例子,就不转贴了。最近做了一个小东西,用到了它。
因为是财务的东西,金额用到了千分位,就是每多三位,加一个逗号。原来用都是按照数字来的,加了这个逗号之后,tablesorter不认为它是数字了,他认为234.00比1,234.53大。这也难怪,看了例子,如果是这种货币格式,前面如果是$符号的话,这种格式排序是没问题的。
仔细看了一下文档,原来人家已经考虑到了这样的问题,加下面代码就可以了。
$("#myTable").tablesorter({
headers: { 4: {sorter:"currency"}}
});
测试通过
另:推荐一篇关于中国教育讨论的文章
贝贝爸 发表在 原创技术文章 |
20
08年3月
jQuery是一个了不起的javascript库,它可以是我们用很少的几句代码就可以创建出漂亮的页面效果。从网站的方面说,这使得javascript更加有趣。
很多jquery爱好者开发了基于jquery的插件,在这里
发现作者收集好多jquery的插件,转贴过来,给大家分享。
File upload-文件上传
Ajax File Upload
jQUploader
Multiple File Upload plugin
jQuery File Style
Styling an input type file
Progress Bar Plugin
Form Validation-表单验证
jQuery Validation
阅读全部»
贝贝爸 发表在 技术文章 |
27
07年9月
选取一个name为”S_03_22″的input text框的上一个td的text值
$(”input[@name=S_03_22]”).parent().prev().text()
名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@name^=’S_’]”).not(”[@name$=’_R’]”)
一个名为radio_01的radio所选的值
$(”input[@name=radio_01][@checked]”).val();
贝贝爸 发表在 原创技术文章 |
20
07年7月
jquery使用2例
1.把
里面的数值增加1
$(”#a01″)[0].innerHTML=parseInt($(”#a01″)[0].innerHTML)+1;
2.所有的checkbox有多少个选上的
var all_check=$(”input[@type=’checkbox’][@checked]”);
alert(all_check.length+”个选中”);
3.给每个checkbox增加click事件
$("input[@type='checkbox']").click(function(){
Redirect_login()
return true;
});
贝贝爸 发表在 原创技术文章 |
21
07年6月
工作中遇到需求,就是form里面所有的checkbox,radio都是必填的。
原来的做法是写多个function进行检查,部分代码如下
function checkElement(c) {
for (var i=0;i<c.length;i++) {
if (c[i].checked) return true;
}
c[0].focus();
alert("请完成所有答题!");
return false;
}
需要传入要检查的radio或者checkbox。
原来的写法是要把所有要检查的object都写进去,比如
result=checkElement(form1.check_1)&&checkElement(form1.radio_2);
如果有10道8道还可以,如果多的话,就要写好多,还容易漏掉,出错。
这次有100多道题目,所以想用jquery来选择所有的checkbox和radio,然后再来检查。
代码如下:
var myt="";
//用于存储生成的js校验字符串
//每次load页面,只生成一次,第一次的速度还是有点慢的
function check() {
var result = true;
if (myt==""){
//如果没有myt,就选择所有要检验的element列表,用来校验。
var alle=$("select[@name='text_79'],input[@type='radio'],input[@type='checkbox']");
for (var i=0;i < alle.length;i++) {
var myobj = alle[i];
if (i==0||alle[i].name!=alle[i-1].name){
if (i>0) myt+="&&";
//根据不同的类型,调用不同的check function
//应该写成一个函数,在函数里面判断比较好:S
if (myobj.type!="select-one")
myt+="checkElement(form1."+myobj.name+")"+"\n";
else
myt+="checkText(form1."+myobj.name+")"+"\n";
}
}}
//最后执行拼出来的js语句
eval("result = "+myt+";");
if (!result) return false;
return true;
}
checkText是检验text的值的程度,是否为0,如果0就是未填写
花了点时间的是
var alle=$(”select[@name=’text_79′],input[@type=’radio’],input[@type=’checkbox’]”);
这一句,选择多个类型的element
但是上述写法有个问题,就是顺序和自然顺序不一样。还需要改进。
上面的and有点像union,如果是同一个element的属性的and,用下面的方法
$(”input[@name^=’S_’][@name$=’_R’]”).autocomplete(”autocomplete_backend.jsp”);
上面的是,input,名字以S_开始,并且以_R结束的元素。
贝贝爸 发表在 原创技术文章 |
3
07年6月
jQuery的选择器是CSS 1-3,XPath的结合物。现在有个需求,连接到外部网站的链接都在新窗口打开,以前的方法很简单就是在链接的地方写上target=”_blank”,但是这样有2个不好的地方。
1.target=”_blank”,不符合严格的DOCTYPE(xhtml1-strict.dtd),参见这里
2.如果自己写blog,代码里面如果有其他网站的链接,都要自己手工加,可能会忘。
现在想用jquery来完成这个工作,思路是,找到所有有链接的节点,如果里面的href是以”http”开始的,并且里面没有本站的域名juyimeng.com的,就给他加一个value为”_blank”的target(如果原来有,就修改成”_blank”)。
第一个很简单,就是
a[@href^=http]
现在是要过滤掉里面含有指定关键字的,找了半天手册,google,发现其实很简单,用一个not就可以了
not(”[@href*=juyimeng.com]
意思是,去除掉href属性里面含有juyimeng.com的节点。
其他的一些用法如下:
E[@foo] 拥有foo属性的E元素
E[@foo=bar] foo属性的值为bar的E元素
E[@foo^=bar] foo属性的值以字符串”bar”开始的E元素
E[@foo$=bar] foo属性的值以字符串”bar”结尾的E元素
E[@foo*=bar] foo属性的值包含有字符串”bar”结尾的E元素
实现整个功能的代码如下:
$("a[@href^=http]").not("[@href*=juyimeng.com]").click(function() {
this.target="blank";
});
测试通过,可能写的不是十分严密,但是已经能解决目前的问题了,不知道这里面能不能用正则表达式,或者大小写不敏感,如果可以,就能更精确地实现功能。
有错请提出.:D
贝贝爸 发表在 原创技术文章 |
18
07年5月
我这个wordpress这几天垃圾评论越来越多,好像是什么工程设备作黑帽seo的,很是气愤。于是google了一下,安装了一个叫Did You Pass Math的插件,地址是 http://www.herod.net/dypm/,遇到了一些问题,记录下来。
1.有中文版,但是编码好像有点问题,把英文版的自己修改了一下,问题解决,保存的时候注意时utf8编码就可以了
2.里面报错用的函数有点问题,数据会乱码,主要是没有指定编码,需要把里面的fail和fail函数替换成wp_die(这个函数的输出也不太好,准备回头再改改)
3.最后一个问题是输出格式的问题,这个插件要在网站的输入框下面添加一个输入框,部分代码如下
<p id="answerdiv">
<input type="text" name="answer" id="answer" size="6" tabindex="4" />
<label for="answer"><?=$dypm_strings['question']?></label>
</p>
<script type="text/javascript">
var urlField = document.getElementById("url");
var submitp = urlField.parentNode;
var answerDiv = document.getElementById("answerdiv");
submitp.appendChild(answerDiv, urlField);
</script>
answer的位置是乱的,查了一下,是因为上述js代码是找到id为url的input,然后在它的parentNode后append一个answerDiv
但是结果却是在url所在的p里面,本来应该是:
<p>id="url" </p>
<p>id="answer"</p>
结果却是
<p>id="url" <p>id="answer"</p></p>
google了一下,不知道怎么直接用js解决(如果您知道,请告诉我哦),于是用了jquery,把上述javascript代码改成了
<script type="text/javascript">
$("#url").parent().after($("#answerdiv"));
</script>
问题解决。
I love jquery!
贝贝爸 发表在 原创技术文章 |
16
07年5月
html中的rel,rev是什么?
这2个标记主要是用于表示文档之间的联系,rel是从源文档到目标文档的关系;rev是从目标文档到源文档的关系
经常用到的属性如下:
Alternate — 定义交替出现的链接
Stylesheet — 定义一个外部加载的样式表
Start — 通知搜索引擎,文档的开始
Next — 记录文档的下一页.(浏览器可以提前加载此页)
Prev — 记录文档的上一页.(定义浏览器的后退键)
Contents
Index — 当前文档的索引
Glossary — 词汇
Copyright — 当前文档的版权
Chapter — 当前文档的章节
Section — 作为文档的一部分
Subsection — 作为文档的一小部分
Appendix — 定义文档的附加信息
Help — 链接帮助信息
Bookmark — 书签
使用严格的DOCTYPE(xhtml1-strict.dtd)时不能用 target=”_blank” 标记的解决
这么处理,据说是因为不经过允许就开新窗口是不友好的。
有一种方法是javascript+rel属性
html的写法
<a href="http://www.juyimeng.com" rel="external">新建窗口打开</a><br/>
<a href="http://www.juyimeng.com">当前窗口</a><br/>
<a href="http://www.juyimeng.com" rel="external">新建窗口打开</a><br/>
<a href="http://www.juyimeng.com">当前窗口</a><br/>
javascript的一种写法:
function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externallinks;
如果你用jquery,就更简单了,代码如下:
$(document).ready(function(){
$("a[@rel=external]").each(function(i){
this.target="_blank";
});
});
别忘了load jquery.js哦。
贝贝爸 发表在 原创技术文章 |
5
07年5月
选了这个3 columns的wordpress模板,发现一个问题,就是如果图片比较大,页面的排版会被撑乱,css正在学习中,还没搞清楚到底该咋改,如果您能帮我请留言。
正好看了一些jquery的资料,就拿这个问题来练手,基本思路是查看所有网页上的图片,如果大于一个数值,则设定宽度,否则,就按照原来的尺寸显示。代码如下:
- $(document).ready(function() {
- $("img").each(function(i){
- var maxwidth=screen.width-$("#column2").width()-$("#column3").width()-100;
- if (this.width>maxwidth)
- this.width = maxwidth;
- });
- });
第一行不用解释了吧?
第二行是查找所有img标签,每一个做后边的function处理
第三行设定最大的宽度,我这里取得是屏幕分辨率减去左右2列的宽度和一个常量。
第四,五行判断图片的宽度,如果超过这个宽度则设其宽度为允许的最大宽度。
现在看来,第三行应该和第二行换一下,效率应该会高些,这么写还有一个问题就是必须浏览器最大化才正常,还有什么好的解决方案呢?
————
想做一个点击阅读全部,显示所有内容的功能,对用户体验有好处,二来对seo有好处,还没时间做,空下来再说吧。
贝贝爸 发表在 原创技术文章 |