Loading...

jQuery入门1 实现简单的ajax

Filed under: HTML客户端,网站技术 — 江东 @ 2007-08-31 16:12:37 才(10)条评论

利用jQuery,你就可以不需要去写ajax处理的函数了,完全的丢掉req = newXMLHttpRequest();吧,可以将更多的心思放在用户的其他体验方面了,本人也是前几天才刚接触jQuery,所以这里就领着那些不熟悉js和ajax的朋友一起来开始我们的jQuery Ajax之旅吧。如果你不太熟悉ajax,或者非常迷信ajax,是否可以看看以前的浅谈Ajax这篇文章呢?

好,开始jQuery的ajax吧,秉承本站一贯的风格,还是从代码例子开始,相关说明在注释中。 (read on …)

jQuery使用手记

Filed under: HTML客户端,网站技术 — 江东 @ 2007-08-28 10:28:30 才(4)条评论

jQuery是一个强大的JS开发框架,通过这个框架可以大大简化编写js代码的劳动,甚至可以用很简单的几行代买实现比较复杂的效果,而且还集成了ajax,那是相当的方便。其实我本人一直是比较不原意使用现成的库的,毕竟库为了设计的完整性,肯定会比较庞大,而且如果你仅仅用了其中功能的一少部分那更是浪费,而这个jQuery如果不压缩的话居然有65.7 KB,不过后来我还是动摇了,因为经过gzip压缩之后代码就仅仅只有10K左右了,无非就一个logo文件的大小而已,所以我已经开始采用这个框架了,下面就介绍一下jQuery的使用。
(read on …)

CSS的兼容解决方案-搞定默认值

Filed under: HTML客户端,网站技术 — 江东 @ 2007-08-14 11:23:31 才(3)条评论

或许你一直在抱怨为什么要专门为IE和FF写不同的CSS,为什么IE这样让人头疼,然后一边写css,一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面,IE并没有我们想象的那么可恶,关键在于IE和FF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FF和IE的css并不是那么困难,或许对于简单的css,你完全可以不用”!important”这个东西了。 (read on …)

css实现兼容IE和Firefox主流浏览器的圆角样式

Filed under: HTML客户端,网站技术 — 江东 @ 2007-07-30 11:11:48 才(11)条评论

看见zhiqiang兄的站点改版了,改得比较漂亮,有点2.0的感觉,布局采用了圆角的div,我个人非常喜欢,只可惜的是这个圆角的div不支持IE,要怪只能怪IE当初我行我素,所以这点比较遗憾。当然目前实现圆角大都采用图片做背景,而zhiqiang兄对速度的有着几乎BT的追求,在他的blog上,很少有多余的js和image,这点我很是赞同,所以我也一直在打算将本站的google js去掉,用自己改写google的live search来替换掉。不管怎样,他的改版也唤醒了我对本站改版的欲望,关于圆角的DIV实现方法,我花了点时间已经解决,现在我这里把我的方法介绍一下,主要是用多个标签来完成的,因为我也不想用图片做背景,而且即使用图片做背景,css样式表中也不见得节约了多少字节。下面是我实现的代码,有阴影效果,支持主流的浏览器如IE和Firefox。 (read on …)

基于google earth的flash飞行游戏

Filed under: HTML客户端,网站技术 — 江东 @ 2007-07-13 10:39:11 还没有评论

可惜我不熟悉flash,要不我就把我的bloggermap的widget做成flash了,不过熟悉flash的高手们可以厉害了,用google的api做出了好玩的东西,譬如这个基于google map的飞行小游戏,你可以在地球的任何一个角落进行飞行,当然控制不好高度也是机毁人亡的,所以小心飞行哦.
过段时间再去熟悉一下action script,希望能将google map集成在flash中!

最近开始研究shopex

Filed under: HTML客户端,网站技术 — 江东 @ 2007-06-20 21:56:01 还没有评论

shopex确实是一个比较流行的网店程序,但是由于程序已经zend,所以不可能在代码上进行深入的研究,只有看看模板机制了,不过根据刚才的测试,发现shopex的模板机制还是很简单的,但是简单就带来了巨大的工作量,你必须将页面分割成很小的部分,然后在进行拼凑,从今天开始,按照熟悉wordpress模板的时间算来,应该本周末就能将此模板机制熟悉完毕,不过shopex也真是的,开发了新的版本,旧的版本就找不到下载的链接了,晕死!

如何解决js在FireFox下不能复制文字到剪贴板的问题

Filed under: HTML客户端,网站技术 — 江东 @ 2007-05-21 15:03:50 才(6)条评论

昨天注册了Bloggerwave,在后台操作的时候,发现他的js脚本复制到剪贴板居然在FireFox下有效,这可是我第一次发现复制到剪贴板这样的代码在FF下有效,当然IE就不用说了,js在IE下操作剪贴板还是很容易的。后来我就查看了他的源代码,发现人家采用了一个巧妙的方法,那就是利用flash作为跳板来完成此功能,具体代码如下:

<code lang=”js”>
<script type=”text/javascript”>// <![CDATA[
function CopyText(id)
{
//copyToClipboard(document.getElementById(id).value);
copy(document.getElementById(id).value);
}
function copy(text2copy) {
if (window.clipboardData) {
window.clipboardData.setData(“Text”,text2copy);
} else {
var flashcopier = ‘flashcopier’;
if(!document.getElementById(flashcopier)) {
var divholder = document.createElement(‘div’);
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = ”;
var divinfo = ‘<span  src=”_clipboard.swf” mce_src=”_clipboard.swf” FlashVars=”clipboard=’+escape(text2copy)+'” width=”0″ height=”0″ type=”application/x-shockwave-flash”></span>’;//这里是关键
document.getElementById(flashcopier).innerHTML = divinfo;
alert(‘Text copied’);
}
}
function copyToClipboard(meintext)
{
if (window.clipboardData)
{
alert(“ie”);
// the IE-manier
window.clipboardData.setData(“Text”, meintext);
// waarschijnlijk niet de beste manier om Moz/NS te detecteren;
// het is mij echter onbekend vanaf welke versie dit precies werkt:
}
else if (window.netscape)
{
// dit is belangrijk maar staat nergens duidelijk vermeld:
// you have to sign the code to enable this, or see notes below
netscape.security.PrivilegeManager.enablePrivilege(‘UniversalXPConnect’);
// maak een interface naar het clipboard
var clip = Components.classes[‘@mozilla.org/widget/clipboard;1’].createInstance(Components.interfaces.nsIClipboard);
if (!clip) return;
alert(“mozilla”);
// maak een transferable
var trans = Components.classes[‘@mozilla.org/widget/transferable;1’]
.createInstance(Components.interfaces.nsITransferable);
if (!trans) return;
// specificeer wat voor soort data we op willen halen; text in dit geval
trans.addDataFlavor(‘text/unicode’);
// om de data uit de transferable te halen hebben we 2 nieuwe objecten
// nodig om het in op te slaan
var str = new Object();
var len = new Object();
var str = Components.classes[“@mozilla.org/supports-string;1”]
.createInstance(Components.interfaces.nsISupportsString);
var copytext=meintext;
str.data=copytext;
trans.setTransferData(“text/unicode”,str,copytext.length*2);
var clipid=Components.interfaces.nsIClipboard;
if (!clip) return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
alert(“Following info was copied to your clipboard:\n\n” + meintext);
return false;
}
// ]]></script>
</code>
下面是测试代码:
<code lang=”html”> <input id=”mm” name=”mm” type=”text” value=”test” /> <input onclick=”CopyText(&quot;mm&quot;)” type=”button” value=”copy” /> </code>
请保证该swf文件:<a title=”_clipboard.swf” href=”http://www.storyday.com/wp-content/uploads/2007/05/_clipboard.swf”>_clipboard.swf</a> 和你测试页面在同一个目录下!
下面是bloggerwave的付费评论的内容,看能否再此页面通过
<a onclick=”submitIframeBlogId1190OppId5(‘1’)” href=”http://www.masterseek.com” target=”_blank”>masterseek</a>
<script type=”text/javascript”>// <![CDATA[
function submitIframeBlogId1190OppId5(linkId){document.getElementById(“iframeBloggerwaveBlogId1190OppId5″).src=”http://www.bloggerwave.com/ClickTrack.aspx?OpportunityId=5&#038;BlogId=1190&#038;LinkId=” + linkId;}
// ]]></script>

(read on …)

css控制站内图片

Filed under: HTML客户端,网站技术 — 江东 @ 2007-05-13 13:24:19 还没有评论

或许你可以看到,本站的图片都似乎有点阴影,这样的功能可以通过css的border属性简单的来控制,下面将部分css写出来,仅作参考:

a img{
border:0;
}
p a img,p img{
border:1px solid #ccc;
border-right:1px solid #888;
border-bottom:1px solid #888;
padding:10px;
margin:3px;
}

a img表示图片连接,我们在这里将border设置成0之后,所有的<a href=””><img src=”” / border=”0″></a> border=”0″因为这个css标签的存在就可以去掉了。

p a img ,p img表示在<p>标签之内的img就用这个css样式表来控制了。第一行让四边的边框的颜色都为灰色,第2行和第2行重新定义右边和下边的边框都为深灰色,所以阴影的效果就出来了,当然上面的实现方法对css熟悉的朋友来说真是简单不过了,这篇文章主要针对新手!