<p >或许从标题上看不出这个ajaxContent插件有什么特别,但如果你能看ajaxContent插件三个演示DEMO你就会觉得其功能很让你惊 讶,这是我对这个插件的看法,感觉像是在打广告,但这个jQuery插件确实不仅功能强大,而且使用非常简单,看一下最基本的使用实例:</p> <p ><a href="http://plugins.jquery.com/project/ajaxContent" target="_blank">jQuery官方ajaxContent文档介绍</a></p> <p ><a href="http://www.andreacfm.com/os/ajaxcontent/" target="_blank">jQuery插件ajaxContent演示</a>[推荐]</p> <p ><a href="http://code.google.com/p/ajaxcontent/source/browse/" target="_blank">jQuery官方ajaxContent下载</a></p> <p ><strong >版本支持</strong>:jQuery library 1.2.1+<br /> <strong >可选绑定支持</strong>:需要jquery.form.js插件</p> <p ></p> <p ><strong >jQuery插件ajaxContent使用与配置</strong></p> <p ><strong >1,js代码部</strong>分<br /> $(&#39;<strong >.ajax</strong>&#39;).<strong >ajaxContent</strong>();</p> <p ><strong >2,Html代码部分</strong><br /> &lt;a class=&quot;<strong >ajax</strong>&quot; href=&quot;<strong >http://www.biuuu.com/good.jpg</strong>&quot;&gt;图片&lt;/a&gt;<br /> &lt;div id=&quot;<strong >ajaxContent</strong>&quot;&gt;&lt;/div&gt;</p> <p >ajaxContent默认将ajax获取的内容显示在id为ajaxContent的元素中,点击如上图片链接将通过ajax获取路径 http://www.biuuu.com/good.jpg的图片,然后返回给id为ajaxContent的元素,其中href为需要获取内容的路 径,可以是图片、HTML页面等等任意元素,<strong >ajaxContent默认配置</strong>如下:</p> <p >1,<strong >target</strong>: &#39;ajaxContent&#39;, //ajax获取内容后将要显示的ID层<br /> 2,<strong >type</strong>:&#39;get&#39;,//ajax获取的方式,默认为get,可选post<br /> 3,<strong >event</strong>:&#39;click&#39;,//ajax获取的触发事件,默认为点击,可选mouseover等事件<br /> 4,<strong >loader</strong>:&#39;true&#39;,//是否显示加载提示<br /> 5,<strong >loaderType</strong>:&#39;text&#39;,//加载提示的类型,默认文本,可选图片img<br /> 6,<strong >loadingMsg</strong>:&#39;Loading...&#39;,//如果加载提示是文本需要提示的文字<br /> 7,<strong >errorMsg</strong>:&#39;An error occured durign the page requesting process!&#39;,//加载错误提示信息<br /> 8,<strong >currentClass</strong>:&#39;selected&#39;,//当前类<br /> 9,<strong >success</strong>:&#39;&#39;,//加载成功后调用的方法<br /> 10,<strong >beforeSend</strong>:&#39;&#39;,//加载前调用的方法<br /> 11,<strong >error</strong>:&#39;&#39;,//加载错误调用的方法<br /> 12,<strong >bind</strong>:&#39;&#39;,//绑定多个元素,例:bind:&#39;name,secondName,dog,cat,sport&#39;<br /> 13,<strong >debug</strong>:&#39;false&#39;,//是否提示debug错误<br /> 14,<strong >extend</strong>:&#39;false&#39;,//是否扩展<br /> 15,<strong >filter</strong>:&#39;&#39;,//扩展的元素,例:filter:&#39;.ajaxLoad&#39;,表示ajax加载获取的内容中类为ajaxLoad的绑定ajaxContent<br /> 16,ex_target:&#39;&#39;,//扩展绑定获取内容后将要显示的ID层<br /> 17,ex_type:&#39;get&#39;,//扩展绑定ajax获取的方式,默认为get,可选post<br /> 18,ex_event:&#39;click&#39;,//扩展绑定ajax获取的触发事件,默认为点击,可选mouseover等事件<br /> 19,ex_loader:&#39;true&#39;,同上loader<br /> 20,ex_loaderType:&#39;text&#39;,同上loaderType<br /> 21,ex_loadingMsg:&#39;Loading...&#39;,同上loadingMsg<br /> 22,ex_errorMsg:&#39;An error occured durign the page requesting process!&#39;,同上errorMsg<br /> 23,ex_currentClass:&#39;selected&#39;,同上currentClass<br /> 24,ex_success:&#39;&#39;,同上success<br /> 25,ex_beforeSend:&#39;&#39;,同上beforeSend<br /> 26,ex_error:&#39;&#39;,同上error<br /> 27,ex_bind:&#39;&#39;同上bind</p> <p >jQuery插件ajaxContent可以给通过ajax获取的内容绑定ajaxContent,实现同样的功能,见下实例四。</p> <p ><strong >jQuery插件ajaxContent实例</strong></p> <p ><strong >一,定义ajaxContent触发事件</strong><br /> <strong >js代码部分</strong></p> <ol > <li >$(&#39;.ajax2&#39;).ajaxContent({</li> <li ><strong >event</strong>:&#39;mouseover&#39;,</li> <li ><strong >target</strong>:&#39;ajaxContent2&#39;</li> <li >});</li> </ol> <p >上面ajax获取内容通过mouseover事件触发<br /> <strong >Html代码部分</strong></p> <ol > <li >&lt;a class=&quot;ajax2&quot; href=&quot;<strong >http://www.biuuu.com/good.html</strong>&quot;&gt;获取HTML内容&lt;/a&gt;</li> <li >&lt;div id=&quot;<strong >ajaxContent2</strong>&quot;&gt;&lt;/div&gt;</li> </ol> <p ><strong >二,定义ajax加载提示</strong>(图示提示)</p> <ol > <li >$(&#39;.ajax3&#39;).ajaxContent({</li> <li ><strong >loaderType</strong>:&#39;img&#39;,</li> <li ><strong >loadingMsg</strong>:&#39;loading.gif&#39;,</li> <li ><strong >target</strong>:&#39;ajaxContent3&#39;</li> <li >});</li> </ol> <p ><strong >三,定义ajax加载成功返回事件</strong></p> <ol > <li >$(&#39;.ajax4&#39;).ajaxContent({</li> <li >target:&#39;ajaxContent4&#39;,</li> <li >currentClass:&quot;current&quot;,</li> <li ><strong >success</strong>: function(obj,target,msg){</li> <li >alert($(obj).attr(&#39;class&#39;));</li> <li >}</li> <li >});</li> </ol> <p ><strong >四,定义给ajax获取内容绑定ajaxContent方法</strong></p> <ol > <li >$(&#39;.ajax9&#39;).ajaxContent({</li> <li >target:&#39;ajaxContent10&#39;,</li> <li ><strong >extend</strong>:&#39;true&#39;,</li> <li ><strong >filter</strong>:&#39;.ajaxLoad&#39;,</li> <li >ex_<strong >target</strong>:&#39;ajaxContent11&#39;,</li> <li >ex_<strong >loadingMsg</strong>:&#39;This is a personalized loading message set by ex_loadingMsg option&#39;,</li> <li >ex_<strong >beforeSend</strong>:function(obj,target){</li> <li >alert(&#39;ex_beforeSend option callback&#39;);</li> <li >},</li> <li >ex_<strong >success</strong>:function(obj,target,msg){</li> <li >alert(&#39;ex_success option callback. The target background will now become red&#39;);</li> <li >$(target).css({backgroundColor:&#39;red&#39;});</li> <li >}</li> <li >});</li> </ol> <p ><strong >五,实现获取表单值的效果图</strong></p> <p ><img alt="" src="/up_pic/201706/1497191464483.png" /></p> <p >点击Click here将获取表单值,返回给DIV</p> <p >由上实例可知jQuery插件ajaxContent使用非常方便,调用简单,非常值得推荐。</p>
RangeTime:0.006293s
RangeMem:211.6 KB
返回顶部 留言