最優(yōu)良人 » jquery http://www.dgkai.cn/blog 中山php|最優(yōu)網(wǎng)絡(luò) Mon, 13 May 2013 04:56:43 +0000 en hourly 1 http://wordpress.org/?v=3.1.4 JQ實(shí)現(xiàn)元素上下移動(dòng) http://www.dgkai.cn/blog/view-187.html http://www.dgkai.cn/blog/view-187.html#comments Thu, 25 Aug 2011 06:33:07 +0000 lin http://www.dgkai.cn/blog/?p=187 jquery實(shí)現(xiàn)元素上下移動(dòng)代碼
$('.ctl-prev').click(function(){

$('#ctl-ul li:last-child').clone(true).prependTo('#ctl-ul');

//clone(true)參數(shù)true是表示把元素所綁定的事件一起克隆,在副本還能夠監(jiān)聽(tīng)到事件并且觸發(fā)動(dòng)作
$('#ctl-ul li:last-child').remove();
return false;
});
$('.ctl-next').click(function(){
$('#ctl-ul li:first-child').clone(true).appendTo('#ctl-ul');
$('#ctl-ul li:first-child').remove();
return false;
});

]]>
http://www.dgkai.cn/blog/view-187.html/feed 5
jq實(shí)現(xiàn)簡(jiǎn)單的li(文字或圖片)垂直滾動(dòng) http://www.dgkai.cn/blog/view-184.html http://www.dgkai.cn/blog/view-184.html#comments Thu, 25 Aug 2011 06:24:04 +0000 lin http://www.dgkai.cn/blog/?p=184 以下代碼jquery實(shí)現(xiàn)簡(jiǎn)單的滾動(dòng),原理是克隆第一個(gè)li然后放到末尾,接著讓它往上滑動(dòng)然后清除掉,反復(fù)循環(huán)
<script type="text/javascript">
function slide(ClassName){
var ID = setInterval ("run('"+ClassName+"')",1000);
$('.'+ClassName).mouseover(function(){
clearInterval(ID)
}).mouseout(function(){
ID = setInterval ("run('"+ClassName+"')",1000);
});

}
function run(ClassName){
$('.'+ClassName).find('li').first().clone().appendTo('.'+ClassName);
$('.'+ClassName).find('li').first().slideUp("slow",
function(){
$('.'+ClassName).find('li').first().remove();
}
);

}
$(function(){

slide('side-news-cnt');

});
</script>

]]>
http://www.dgkai.cn/blog/view-184.html/feed 265
asyncbox異步彈出窗口,jq彈出層插件,可異步加載頁(yè)面 http://www.dgkai.cn/blog/view-175.html http://www.dgkai.cn/blog/view-175.html#comments Thu, 25 Aug 2011 04:18:44 +0000 lin http://www.dgkai.cn/blog/?p=175 AsyncBox(異步盒子)是一款基于 jQuery 的彈窗插件。能夠?qū)崿F(xiàn)網(wǎng)站的整體風(fēng)格效果,給用戶(hù)一個(gè)新的視覺(jué)享受。主要模擬常用的 alert、confirm、prompt、open 和擴(kuò)展了一些對(duì)話(huà)框。它通過(guò)回調(diào)函數(shù)觸發(fā)事件動(dòng)作并執(zhí)行,使操作區(qū)域更加明了、統(tǒng)一。而且能夠在主流瀏覽器中靈活運(yùn)用。

介紹及下載地址 http://www.nnhuashi.com/asyncbox/index.html

實(shí)例:
$('#select-furns').click(function() {
asyncbox.open({
id: 'select-form',
title: $(this).val(),
url: 'index.php',
width: 700,
height: 400,
tipsbar: {
title: '操作提示',
content: '請(qǐng)先通過(guò)下方 <strong>篩選操作</strong>,篩選出你需要的家具。'
},
data: {
module: 'House_Furniture',
load: 'AjaxFurniture',
col_key: '<?php echo $_GET['col_key']; ?>',
lang: '<?php echo getLanguage(); ?>'
}
});
});
注意:如果通過(guò)a標(biāo)簽點(diǎn)擊彈出,如果a標(biāo)簽的href為javascript:;或javascript:void(0);在ie6下可能會(huì)產(chǎn)生阻斷,導(dǎo)致頁(yè)面無(wú)法打開(kāi)
解決的方法是用href=#或者不用a標(biāo)簽
為了防止瀏覽器跳到頂部,可以加上onclick="return false;" ,或者可以用href=#click這樣的形式,這樣點(diǎn)擊的話(huà)如果有id=click的元素瀏覽器會(huì)定位到那里,如果沒(méi)有,則原地不動(dòng)

]]>
http://www.dgkai.cn/blog/view-175.html/feed 20
解決jquery和prototype沖突,jquery和prototype共存的方法 http://www.dgkai.cn/blog/view-172.html http://www.dgkai.cn/blog/view-172.html#comments Thu, 25 Aug 2011 03:58:20 +0000 lin http://www.dgkai.cn/blog/?p=172 今天遇到一個(gè)項(xiàng)目的修改,由于該項(xiàng)目之前是使用prototype框架,而我拿手的是使用jquery框架,但是又不想全部重寫(xiě)原來(lái)的頁(yè)面效果,所以在頁(yè)面引入了jquery文件,但是發(fā)現(xiàn)原來(lái)的js效果消失了,這是因?yàn)樗麄児餐褂昧?這個(gè)對(duì)象,造成了重寫(xiě)覆蓋,解決方法是重定義jquery的這個(gè)對(duì)象

首先在頁(yè)面最開(kāi)頭引入jquery文件,一定要在prototype文件引入之前,然后緊接著重寫(xiě)$

<script type="text/javascript" src="data/jquery.min.js"></script>
<script type="text/javascript">
var jQuery=$;
</script>

然后在后面運(yùn)用jquery時(shí)把原來(lái)使用$的地方全部換成jQuery就可以了

]]>
http://www.dgkai.cn/blog/view-172.html/feed 251
使用基于Jquery的可視化編輯器 Xheditor http://www.dgkai.cn/blog/view-108.html http://www.dgkai.cn/blog/view-108.html#comments Sun, 14 Aug 2011 17:00:43 +0000 lin http://www.dgkai.cn/blog/?p=108

使用方法

1. 下載xhEditor最新版本。
下載地址:http://code.google.com/p/xheditor/downloads/list

2. 解壓壓縮文件,將其中的xheditor.js以及xheditor_emot、xheditor_plugins和xheditor_skin三個(gè)文件夾上傳到網(wǎng)站相應(yīng)目錄

3. 在相應(yīng)html文件的</head>之前添加
<script type="text/javascript" src=">
<script type="text/javascript" src="
>

4.
方法1:在textarea上添加屬性: class="xheditor {skin:'default'}",前面主參數(shù)也可以是xheditor-mini和xheditor-simple,分別加載迷你和簡(jiǎn)單工具欄,后面詳細(xì)參數(shù)可以省略
方法2:在您的頁(yè)面初始JS代碼里加上: $('#elm1').xheditor();
$('#elm1').xheditor();
例如:
$({
$('#elm1').xheditor();
});
相應(yīng)的刪除編輯器的代碼為
$('#elm1').xheditor(false);
重要說(shuō)明:2種初始化方法只能選擇其中一種,不能混合使用,優(yōu)先級(jí)分別是:方法1>方法2,例如用了方法1,方法2就無(wú)法使用了
更多幫助信息,請(qǐng)查看在線(xiàn)幫助:
http://code.google.com/p/xheditor/wiki/Help
或者參考demos文件夾中的演示頁(yè)面
建議使用wizard.html初始化代碼生成向?qū)?lái)生成適合你的代碼。

]]>
http://www.dgkai.cn/blog/view-108.html/feed 19
Jquery常用的ajax操作 http://www.dgkai.cn/blog/view-92.html http://www.dgkai.cn/blog/view-92.html#comments Sat, 13 Aug 2011 18:34:11 +0000 lin http://www.dgkai.cn/blog/?p=92 Jquery異步加載一個(gè)頁(yè)面是如此簡(jiǎn)單:

$.ajax({ url: "/testl/index.html", cache: false, success: function(html){

$("#test").append(html);

}

});

或者更簡(jiǎn)單的:$("#test").load("/test/index.html");

以 POST 形式發(fā)送附加參數(shù)并在成功時(shí)顯示信息。
jQuery 代碼:
$("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });
載入并執(zhí)行一個(gè) JavaScript 文件:加載并執(zhí)行 test.js ,成功后顯示信息。jQuery 代碼: $.getScript("test.js", function(){ alert("Script loaded and executed.");});

]]>
http://www.dgkai.cn/blog/view-92.html/feed 417