《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.7 示例:添加函数的返回结果

简介: 本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章,第3.7节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章,第3.7节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

3.7 示例:添加函数的返回结果

还可以把传给append()的静态字符串换成函数。代码清单3-7演示了函数作为参数的使用方法,它首先会检测是否有足够的空间来添加另外的元素。

代码清单3-7 检测是否有空间来添加更多的元素

00 <!DOCTYPE html>
01 
02 <html lang="en">
03 <head>
04  <title>A function as argument for append()</title>
05  <style>
06  /* 请将下列代码移至一个外部的
07    .css 文件 */
08  div#template {
09   display: none;
10  }
11  </style>
12 </head>
13 <body>
14 
15 <div id="append-placeholder">
16  <p>Test!</p>
17 </div>
18 
19 <button id="append">Add more...</button><br>
20 
21 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
22 
23 <script>
24 // 请将下列代码移至一个外部的.js文件中
25 $(document).ready(function() {
26 
27  $('#append').click(function() {
28   $('#append-placeholder').append(function(index, html) {
29    var more = "<p>There is room for more</p>",
30      last = "<p>This is the last one</p>",
31      spaceLeft = 160 - $.trim(html).length - last.length;
32   
33    if(more.length < spaceLeft)
34      return more;
35    else if(spaceLeft > 0)
36      return last;
37   });
38  });
39 
40 });
41 </script>
42 </body>
43 </html>

这个例子会一直添加包含文字“There is room for more”的行,直到确定没有足够的空间为止。在停止添加行之前,最后一行显示的文字是“This is the last one”。

相关文章
|
2月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
22 1
|
4月前
|
存储 前端开发
SAP UI5 federatedLogout 函数源代码分析
SAP UI5 federatedLogout 函数源代码分析
22 0
|
4月前
|
缓存 JavaScript 前端开发
如何理解 SAP UI5 的 sap.ui.define 函数?
如何理解 SAP UI5 的 sap.ui.define 函数?
53 0
|
4天前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
4天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
4月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
22 0
|
4月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
21 0
|
4月前
|
JavaScript 前端开发
jQuery的入口函数
jQuery的入口函数
14 0
|
5月前
|
JavaScript 前端开发 开发者
jquery常用的方法函数
jquery常用的方法函数
|
6月前
|
JavaScript
JS和JQUERY的入口函数,和他们的不同
JS和JQUERY的入口函数,和他们的不同
26 0