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日

Easy的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日