jQuery的魔術：探索jQuery的力量

2009年10月18日

之前之後的jQuery插件審查

我忍不住自己寫的這個插件。這是一個與jQuery，我見過的最有創意的事情。正如它的名字告訴你，前 - 後，你可以聞到一些行動，對不對？看一看這裡的圖片：

插件允許你顯示兩個畫面，同樣的事情在不同的時期表現出一些差異。當然，我們可以理解，當兩個圖像顯示並排但另一方面疊加和滑動滑塊，看看他們的區別很簡單，真棒，這就是我們所說的創造力的差異。一系列的演示是這裡http://www.catchmyfame.com/jquery/demo/8/的。此外，滑塊是光滑的，當你點擊任何圖像的一部分，滑塊來光標順利 - 相當可觀的。

在http://www.catchmyfame.com的傢伙做了一個非常好的工作。如果可能的話，從這個插件的下一版本，我們期待垂直滑塊。有它的樂趣。

3評論

2009年6月14日

我一直是一個大風扇的jQuery網格插件JQGrid的。它可以處理相當複雜的，複雜的任務。但我不喜歡它是以前的UI。我不得不修改自己的CSS能夠呈現給客戶。我也使用FlexiGrid的簡單任務。這是很容易的工作。但他們都不是無處接近擊敗Jack Slocum的EXT JS網格。 EXT是沉重了，因為我是學習他們，並最終發現，我的應用程序不需要桌面提供ExtJS的感情。 jQuery的一個大風扇，我一直希望能有一個網格插件ExtJS的電網工程接近。現在看看這個。

要命的，對不對？是的，jqGrid的在trirand的jQuery UI的供電。現在這是相當整潔和快速。您可以自定義主題，從jQuery UI的網站。現在沒有更多的會談，只是吃在這裡http://www.trirand.com/jqgrid35/jqgrid.html

4評論

標籤： Extjs的 FlexiGrid的， jqGrid的 jQuery UI的供電電網，

2009年5月12日

翻頁與jQuery - jFlip：插件的一周- 5月12日

張貼者：馬赫布卜：本週插件 | 插件

所以它不閃爍，畢竟做所有的魔法！我們已經看到，仍然看到閃光燈做奇蹟和魔法。開發很酷的事情之一是pageflip。我看到，第一，當我在玩用閃光燈2002-2003我猜在flashkit actionscripts.org的。你可以看到一個非常良好的親版本，這樣的事情在這裡。但對我們來說，最想在jQuery做的事情 - 誰終於有一個替代，翻頁東西。這不是一個完全另類的閃光燈，但不衰極少使用翻頁效果。

page_flip

這就是它看起來與插件稱為jFlip的書面由雷納托Formato http://www.jquery.info/scripts/jFlip/demo.html

演示，網頁上有不同的設置一些選項。我創建了一個與一些我的夢之車

希望你喜歡的主動權由雷納托。

30評論

標籤： flashpageflip ，翻頁，幻燈片

2009年5月5日

輕鬆地創建一個動畫導航菜單

發布者：馬赫布卜：雜項

這是一個很短的職位如何，我們可以很容易地創建一個使用jQuery的動畫導航菜單，沒有任何插件。你一定見過水平或veritical的的導航菜單，其規模擴張和收縮側翻。這些javascript框架來到之前，我們不得不做的相當大量的代碼來完成得到的東西。為什麼呢？那個愚蠢的跨瀏覽器處理。我不想在IE瀏覽器開始。

好吧，這裡的東西。我們只是使用一個無序列表，使一個水平菜單，而膨脹或收縮。代碼是死的簡單。讓我們來看看在第一標記。

 <div id="navcontainer"> <ul id="navlist"> <LI> <a href="http://www.google.com">谷歌</ A> </ LI> <LI> <A HREF =“http://www.yahoo.com”>雅虎</ A> </ LI> <LI> <a href="http://www.msn.com"> MSN </ A> </ LI> <LI> <A href="http://www.lycos.com"> Lycos公司</ A> </ LI> <LI> <a href="http://www.baidu.com">百度</ A> </ LI> </ UL> </ DIV>

因此，我們有一些列表項。因此，讓他們看起來像橫向菜單，它看起來像這樣，我們就需要一些CSS

 : inline ; } #navcontainer ul li李{ 顯示 ： 內聯 ;}＃navcontainer UL李

而最後一部分.. 製作鼠標懸停舞蹈。很簡單的動畫功能。只要以下這些線路的情侶會做的伎倆。看看。

	 ( ) { $ ( "#navlist $（ 函數 （）{$（“＃navlist

這就是它！看到它在行動

2評論

標籤：動畫菜單，橫向導航，列表菜單

2009年4月21日

jQuery的大力水手- 4月22日|本週插件

張貼者：馬赫布卜：本週插件 | 插件

你是否厭倦太多的燈箱，thickboxes，窗口覆蓋？你想要一個內嵌畫廊有點兒事？可能是你做的。我聽說一些客戶（老客戶），他們不喜歡這樣的停電時，燈箱，thickboxes。那麼怎麼辦呢？有一件事，當你想到的東西，嘗試，在80％的情況下，你會找到一個解決方案，已經取得了一些良好的第一。這不是一個牛頓的世紀，21世紀。因此，許多人都經過了這麼多的事情。和德國的傢伙名為克里斯托弗Schüßler的來拯救我們脫離普通燈箱。這就是所謂的jQuery的大力水手。

我不想讓故事不再只是看到它在行動。而且我敢肯定你會計劃在一些你的下一個項目使用這個插件。

1條評論

標籤：直列直列畫廊，收藏夾，收藏夾替代“ ，“ 大力水手“

2009年4月14日

易於AJAX鏈接-無插件需要！

發布者：馬赫布卜：阿賈克斯

所以AJAX AJAX和AJAX技術，這就是我們做廣泛的這些天。這樣可以節省時間，增加了動力，並給你一個感覺，那種感覺使用的軟件應用程序。這是很多方法可以使用AJAX與許多圖書館。但是你可以看到這個網站是為jQuery的，我們來看看基本或者一些先進的AJAX用法。

你是什麼，我們需要什麼？

jQuery庫（當然）
一個微小的php腳本

讓我們開始談論。在jQuery中，基本上有6種方法做AJAX操作。這些是

阿賈克斯（選項）
$（URL，數據，回調）
美元，getJSON。（網址，數據，回調）
$。getScript加入腳本（URL，回調）
（網址負載，數據，回調）
$（網址，數據，回調後，

除了1號，所有其他方法使用。阿賈克斯內部。因此，這意味著美元的ajax（）是我們的母親jQuery的AJAX操作的功能。讓我們來看看如何。阿賈克斯（）看起來像

 msg ) ; } } ) ; 響應“+ MSG）;}}）;

這就是可愛。類型參數以“GET”或“POST”，這意味著可以發送AJAX再審作為POST或GET（我寧願總是POST）。其餘的參數都相當自我解釋，如果你的代碼再看一看。

現在我們打算做一個小的AJAX腳本讀取鏈接的超級鏈接標籤（<A>），並加載一些div請求文檔中的元素。

首先，我們採取一個正常的HTML，PHP文件看起來像這樣

  <！DOCTYPE HTML PUBLIC“ -  / / W3C / / DTD XHTML 1.0 Strict標準/ / EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">的
 <HEAD>
	 <TITLE>阿賈克斯鏈路測試</ TITLE>
	 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	如何得到src="jquery-1.2.6.min.js"> </ SCRIPT>	
 </ HEAD>
 <BODY>
 </ BODY> </ HTML>

現在，讓我們添加一些鏈接的文件。為了更好的菜單那種樣子，我們會使用UL>李和鏈接。這看起來像這樣

  <ul id="nav">的
	 <LI> <a class="ajax_link" rel="div1" href="response.php?user=john">負載息1 </ A> </ LI>
	 <LI> <a class="ajax_link" rel="div2" href="response.php?user=nash">負載在2區</ A> </ LI>
	 <LI> <a class="ajax_link" rel="div3" href="response.php?user=stella">負荷息3 </ A> </ LI>
	 <LI> <a class="ajax_link" rel="div4" href="response.php?user=jason">負荷息4 </ A> </ LI>
 </ UL>

正如你可以看到，我們已經把一個無序列表對象中的鏈接列表裡面的元素。仔細看看<a>標籤的性能。我們有HREF，類和rel屬性，它看起來沒有什麼比正常的鏈路上不同。如果你看到的，我們已經給一些div名稱即DIV1，DIV2 rel屬性.. 等。這意味著我們要被加載到這些div的響應的href。如何做到這一點？讓我們先添加這些div

  <SPAN> DIV -1 </ SPAN>
 <div id="div1" class="content_loader"> </ DIV>
 <SPAN> DIV -2 </ SPAN>
 <div id="div2" class="content_loader"> </ DIV>
 <SPAN> DIV -3 </ SPAN>
 <div id="div3" class="content_loader"> </ DIV>
 <SPAN> DIV -4 </ SPAN>
 <div id="div4" class="content_loader"> </ DIV>

而真正的部分 - ，我們給予鏈接一類“ajax_link”。我們只動態添加ajax的行動只有一個類名稱為“ajax_link”的鏈接。地獄，我們沒有一個頁面的所有鏈接阿賈克斯行動，不是嗎？

因此，在文檔加載，我們應該這樣做。

  . ready ( function ( ) { $（文件）。 就緒 （ 函數 （）{
         ) . click ( function ( ) { $（的“a.ajax_link”）， 點擊 （ 函數 （）{
             this ) ; $ current_link = $（ 本 ）;
             。 的ajax（{
                 ,類型：“後”
                 ( "href" ) , current_link ATTR（ 的“href”），網址：
                 ( e ) {成功： 功能 （E）{
                     + $current_link. attr ( "rel" ) ) . html ( e ) ; $（“＃”+ $ current_link ATTR（“相對”））HTML（E）;
                 }
             }）;
             ; 返回false;
         }）;
     }）;

讓我來解釋腳本。 document.ready事件是在頁面加載一個事件被觸發。然後，我們某種代碼分配的click事件有一類“ajax_link”的鏈接。這樣做$ current_link = $（本）;允許有當前的鏈接對象可以在回調函數。而且我們有

$（“＃”+ $ current_link.attr（“相對”）），HTML（E）。

這意味著$（“div_id）。HTML（server_response），我們已經設置了URL參數$ ajax功能動態URL：$ current_link.attr（的”href“）。所以，現在所有這些的意思是“所有這些鏈接有一類”ajax_link“ - 添加一個click事件處理程序 - 然後執行AJAX請求的鏈接HREF的房地產，並加載到一個div的id相匹配的”相對“屬性的響應鏈接“。返回false防止像正常的鏈路鏈接工作

想看看它的動作嗎？這裡是不言而喻。

你可以下載源代碼。

這個小教程在下一節中，我們將使用同樣的事情，但一點點的舒適。

運用簡單的方法

一切仍然幾乎是相同的。我們就改變這裡的ajax方法。所以我們就可以實現同樣的事情，而不是寫整個阿賈克斯塊以下。

  . ready ( function ( ) { $（文件）。 就緒 （ 函數 （）{
 ) . click ( function ( ) { $（的“a.ajax_link”）， 點擊 （ 函數 （）{
 + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; $（“＃”+ $（ 本 ）。ATTR（“相對”））。 負載 （$（ 本 ）。ATTR（ 的“href”））;
 ; 返回false;
 }）;
 }）;

這是現在少了很多複雜的，對不對？ Load方法加載它連接到內元素的Ajax內容。如果$（“＃somediv_id”）。的負載（的“mypage.php”），它會嘗試加載mypage.php的內容。是不是很簡單？但我建議你習慣於使用的主要方法（在第一部分中所示）。

在zip文件中有另一個的文件名為ajax2.php具有相同的結果說明了這一點高階旅行。

因此，AJAX是不是很難，因為它的聲音，對不對？當你變得很流利與AJAX業務，您將創建魔法。

謝謝讀取順便說一句。

1條評論

標籤： AJAX ， Ajax內容負載

2009年4月5日

jQuery的的blockUI：插件- 09年4月5日的一周

張貼者：馬赫布卜：本週插件 | 插件

隨著DHTML的進步，我們可以做很多事情，只是一眨眼的功夫。我們都在一定的時間點，這些天使用的窗口覆蓋或燈箱。但有時有必要阻止頁面的一部分或任何特定的元素，例如一個DIV使人們不能夠發揮您的網頁，當你不希望他們。就像如果有人作出評論註釋框，你不希望人們點擊其他意見，同時填補它。怎麼辦呢？那麼有一個整潔的jQuery解決方案。您可以簡單地阻止他們，而評論。而且可能有很多這樣的情況下，當我們要阻止整個頁面或某些元素。 jQuery的BlockUI來搶救。

它最初是封鎖消息一整頁，但現在，它可以阻止頁面元素，甚至顯示低吼，比如消息。離開這裡的例子。該文檔是很不錯的，相當數量的代碼給出的例子。在您的應用程序中使用它。如果你有任何問題，使用它，給我留下了評論。

11評論

標籤：塊UI ，莫代爾，疊加

2009年3月30日

如何使一個美麗的組合使用jQuery動畫的畫廊！

發布者：馬赫布卜：雜項

在您的網站頁面與Flash做一個投資組合，已成為一種過時的。這些天更快的機器和新一代瀏覽器的Javascript和CSS真的可以踢一些屁股。 jQuery有非常整齊的方式來處理一些效果。所有的動畫源於被稱為“動畫”的基本方法。它的動畫，補間動畫的DOM元素的屬性。為了使長話短說看看這個。

所以，你已經點擊和看到正確的？好吧，如果你看一下代碼，這是相當簡單的。

  $（文件）。就緒（函數（）{
		 VAR hover_in_easing =“easeOutExpo”;
		 VAR hover_out_easing =“easeOutBounce”;
		 $（“。info_container”）顯示（）;
		 $（的“div.portfolio_div”）。懸停（函數（）{
			 $（本）。找到（“。info_container”），動畫（{前：“0PX”}，{工期：400，緩和：hover_in_easing}）;
		 }，（）{
			 $（本）。找到（“。info_container”），動畫（{前：“100像素”}，{工期：500，緩和：hover_out_easing}）;
		 }）;
                 / / 100個像素的大小的掩模
	 }）;

使用animate函數的動畫形象定位相對保持隱藏在面具。緩和插件，我們實現了一些很酷的效果，當您將鼠標懸停從圖像的彈跳。你可以把任何HTML裡面的info_container DIV元素，只要不超越國界。看樣式表，你會發現它非常gramatical。您可以自定義大小的div類通過修改。

下載源。

啟示：http://dibusoft.com/portfolio

11評論

標籤：動畫，面具，投資組合

2009年3月27日