Skip to content

Commit

Permalink
[doc] 增加Array的链式DEMO
Browse files Browse the repository at this point in the history 
RT
  • Loading branch information
@zhanghongyan
zhanghongyan committed Aug 3, 2012
1 parent eb62bee commit b35811e
Show file tree
Hide file tree
Showing 6 changed files with 257 additions and 14 deletions.
51 changes: 51 additions & 0 deletions demos/baidu.array().contains()/default.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="baidu.array().contains() 示例" />
<title>baidu.array().contains() 示例</title>
<link rel="stylesheet" href="../../demos/public.css" type="text/css" />
<script type="text/javascript" src="../../demos/tangram2.0-all.js"></script>
<script type="text/javascript" src="../../demos/public.js"></script>
</head>
<body>
<div class="demo" id="demo">
<h1 class="ac-h1"><strong>baidu.array().contains()</strong> 示例</h1>
<p class="ac-des">
判断一个数组中是否包含某一项
</p>

<ul class="ac-ul">
<li>语法: baidu.array().contains(item)</li>
<li>参数1: {Any} item 被包含项</li>
<li>返回: {Boolean} 是否包含</li>
</ul>
<div class="pannel">
<div class="pannel-title">
<span>判断一个数组中是否包含某一项</span>
</div>
<div class="pannel-content">
<div class="pannel-content-tool">
<a class="button" id="demo_btn_1">点击运行</a>判断数组：['a',function(){console.log(1)},'身边','新知','1','','d'], 是否包含指定的项
<select id="param0">
<option value="1">1</option>
<option value="a">a</option>
<option value="c">c</option>
</select>
</div>
<div class="pannel-show">
运行结果：<span id="demo_execute_result_1"></span>
</div>
</div>
</div>

</div>
</body>
<script>
baidu('#demo_btn_1').on('click',function(e){
var arr = ['a',function(){console.log(1)},'身边','新知','1','','d'],
value=baidu('#param0').val();
baidu('#demo_execute_result_1').html(value + '：' + baidu.array(arr).contains(value));
});
</script>
</html>
27 changes: 13 additions & 14 deletions demos/baidu.array().each()/default.html
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -2,47 +2,46 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="baidu.array.each 示例" /> <meta name="description" content="baidu.array().each() 示例" />
<title>baidu.array.each 示例</title> <title>baidu.array().each()</title>
<link rel="stylesheet" href="../../demos/public.css" type="text/css" /> <link rel="stylesheet" href="../../demos/public.css" type="text/css" />
<script type="text/javascript" src="../../demos/tangram2.0-all.js"></script> <script type="text/javascript" src="../../demos/tangram2.0-all.js"></script>
<script type="text/javascript" src="../../demos/public.js"></script> <script type="text/javascript" src="../../demos/public.js"></script>
</head> </head>
<body> <body>
<div class="demo" id="demo"> <div class="demo" id="demo">
<h1 class="ac-h1"><strong>baidu.array.each</strong> 示例</h1> <h1 class="ac-h1"><strong>baidu.array().each()</strong> 示例</h1>
<p class="ac-des"> <p class="ac-des">
枚举数组的每一项，作为指定函数执行的参数 枚举数组的每一项，作为指定函数执行的参数
</p> </p>

<ul class="ac-ul"> <ul class="ac-ul">
<li>语法: baidu.array.each(iterator, context)</li> <li>语法: baidu.array().each(iterator, context)</li>
<li>参数1: {Function} iterator(item, index, array)</li> <li>参数1: {Function} iterator(item, index, array) 枚举器，函数</li>
<li>参数2: {Object} context</li> <li>参数2: {Object} context 方法作用域</li>
<li>返回: {TangramArray}</li> <li>返回: {TangramArray} 数组</li>
</ul> </ul>
<div class="pannel"> <div class="pannel">
<div class="pannel-title"> <div class="pannel-title">
<span>枚举数组</span> <span>枚举数组的每一项，作为指定函数执行的参数</span>
</div> </div>
<div class="pannel-content"> <div class="pannel-content">
<!--DemoViewStart-->
<div class="pannel-content-tool"> <div class="pannel-content-tool">
<a class="button" id="demo_btn_1">点击此处，枚举数组：["a", "b", "c", "d", "e"], 并给出索引值</a> <a class="button" id="demo_btn_1">点击运行</a>枚举数组：['a',function(){console.log(1)},'身边','新知',1,'','d'], 并给出索引值
</div> </div>
<div class="pannel-show"> <div class="pannel-show">
运行结果：<span id="demo_execute_result_1"></span> 运行结果：<span id="demo_execute_result_1"></span>
</div> </div>
<!--DemoViewEnd-->
</div> </div>
</div> </div>

</div> </div>
</body> </body>
<script> <script>
baidu('#demo_btn_1').on('click',function(e){ baidu('#demo_btn_1').on('click',function(e){
var arr = ['a',function(){console.log(1)},'身边','新知',1,'','d'];
baidu('#demo_execute_result_1').html(''); baidu('#demo_execute_result_1').html('');
baidu.array.each(["a", "b", "c", "d", "e"], function(item, index){ baidu.array(arr).each(function(item, index){
baidu('#demo_execute_result_1').html(baidu('#demo_execute_result_1').html() + index + ":" + item + " ; "); baidu('#demo_execute_result_1').html(baidu('#demo_execute_result_1').html() + index + ':' + item + ';');
}); });
}); });
</script> </script>
Expand Down
43 changes: 43 additions & 0 deletions demos/baidu.array().empty()/default.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="baidu.array().empty() 示例" />
<title>baidu.array().empty() 示例</title>
<link rel="stylesheet" href="../../demos/public.css" type="text/css" />
<script type="text/javascript" src="../../demos/tangram2.0-all.js"></script>
<script type="text/javascript" src="../../demos/public.js"></script>
</head>
<body>
<div class="demo" id="demo">
<h1 class="ac-h1"><strong>baidu.array().empty()</strong> 示例</h1>
<p class="ac-des">
清空数组
</p>
<ul class="ac-ul">
<li>语法: baidu.array().empty()</li>
<li>返回: {Array} 空数组</li>
</ul>
<div class="pannel">
<div class="pannel-title">
<span>清空数组</span>
</div>
<div class="pannel-content">
<div class="pannel-content-tool">
<a class="button" id="demo_btn_1">点击运行</a>清空数组['a',function(){console.log(1)},'身边','新知',1,'','d'];
</div>
<div class="pannel-show">
运行结果：<span id="demo_execute_result_1"></span>
</div>
</div>
</div>
</div>
</body>
<script>
baidu('#demo_btn_1').on('click',function(e){
var arr = ['a',function(){console.log(1)},'身边','新知',1,'','d'];
baidu.array(arr).empty();
baidu('#demo_execute_result_1').html('数组清空后长度为：' + arr.length + ',内容为' + arr.join(','));
});
</script>
</html>
46 changes: 46 additions & 0 deletions demos/baidu.array().every()/default.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="baidu.array().every() 示例" />
<title>baidu.array().every() 示例</title>
<link rel="stylesheet" href="../../demos/public.css" type="text/css" />
<script type="text/javascript" src="../../demos/tangram2.0-all.js"></script>
<script type="text/javascript" src="../../demos/public.js"></script>
</head>
<body>
<div class="demo" id="demo">
<h1 class="ac-h1"><strong>baidu.array().every()</strong> 示例</h1>
<p class="ac-des">
遍历数组每一项，判断是否全部符合指定的条件
</p>

<ul class="ac-ul">
<li>语法: baidu.array().every(iterator[, context])</li>
<li>参数1: {Function} iterator 用于做对比的函数</li>
<li>参数2: {Object} context 方法作用域</li>
<li>返回: {Boolean} 是否全部满足条件</li>
</ul>
<div class="pannel">
<div class="pannel-title">
<span>遍历数组每一项，判断是否全部符合指定的条件</span>
</div>
<div class="pannel-content">
<div class="pannel-content-tool">
<a class="button" id="demo_btn_1">点击运行</a>判断数组 ['a',function(){console.log(1)},'身边','新知',1,'','d'] 中的每一项是否满足指定条件isNaN
</div>
<div class="pannel-show">
运行结果：<span id="demo_execute_result_1"></span>
</div>
</div>
</div>
</div>
</body>
<script>
baidu('#demo_btn_1').on('click',function(e){
var arr = ['a',function(){console.log(1)},'身边','新知',1,'','d'],
result = baidu.array(arr).every(function (item, index) {return isNaN(item);});
baidu('#demo_execute_result_1').html(''+result);
})
</script>
</html>
51 changes: 51 additions & 0 deletions demos/baidu.array().filter()/default.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="baidu.array().filter() 示例" />
<title>baidu.array().filter() 示例</title>
<link rel="stylesheet" href="../../demos/public.css" type="text/css" />
<script type="text/javascript" src="../../demos/tangram2.0-all.js"></script>
<script type="text/javascript" src="../../demos/public.js"></script>
</head>
<body>
<div class="demo" id="demo">
<h1 class="ac-h1"><strong>baidu.array().filter()</strong> 示例</h1>
<p class="ac-des">
过滤数组
</p>

<ul class="ac-ul">
<li>语法: baidu.array().filter(iterator[, context])</li>
<li>参数1: {Function} iterator 用于做对比的函数</li>
<li>参数2: {Object} context 方法作用域</li>
<li>返回: {Array} 已经过滤后的数组</li>
</ul>
<div class="pannel">
<div class="pannel-title">
<span>过滤数组</span>
</div>
<div class="pannel-content">
<div class="pannel-content-tool">
<a class="button" id="demo_btn_1">点击运行</a>过滤数组 ['a',function(){console.log(1)},'身边','新知',1,'','d'],筛选符合指定条件的项
<select id="param0">
<option value="isNaN(item)">不是数字</option>
<option value="item.length &gt; 1">长度大于1</option>
</select>
</div>
<div class="pannel-show">
运行结果：<span id="demo_execute_result_1"></span>
</div>
</div>
</div>
</div>
</body>
<script>
baidu('#demo_btn_1').on('click',function(e){
var value=baidu('#param0').val(),
arr = ['a',function(){console.log(1)},'身边','新知',1,'','d'],
result = baidu.array(arr).filter(function (item, index) {return eval(value);});
baidu('#demo_execute_result_1').html( '条件：' + value + ';结果：' + result);
})
</script>
</html>
53 changes: 53 additions & 0 deletions demos/baidu.array().find()/default.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="baidu.array().find() 示例" />
<title>baidu.array().find() 示例</title>
<link rel="stylesheet" href="../../demos/public.css" type="text/css" />
<script type="text/javascript" src="../../demos/tangram2.0-all.js"></script>
<script type="text/javascript" src="../../demos/public.js"></script>
</head>
<body>
<div class="demo" id="demo">
<h1 class="ac-h1"><strong>baidu.array().find([fn])</strong> 示例</h1>
<p class="ac-des">
从数组中寻找符合条件的第一个元素,找不到时返回null
</p>

<ul class="ac-ul">
<li>语法: baidu.array().find([fn])</li>
<li>参数1: {Function} iterator 用于做对比的函数</li>
<li>返回: {Object} 匹配的项</li>
</ul>
<div class="pannel">
<div class="pannel-title">
<span>从数组中寻找符合条件的第一个元素</span>
</div>
<div class="pannel-content">
<div class="pannel-content-tool">
<a class="button" id="demo_btn_1">点击运行</a>从数组['a',function(){console.log(1)},'身边','新知',1,'','d'],寻找符合条件的第一个元素
<select id="param0">
<option value="isNaN(item)">不是数字</option>
<option value="item.length &gt; 1">长度大于1</option>
<option value="typeof(item)=='number'">是数字</option>
<option value="item.length &gt; 3">长度大于3</option>
<option value="item.length &lt; 1">长度小于1</option>
</select>
</div>
<div class="pannel-show">
运行结果：<span id="demo_execute_result_1"></span>
</div>
</div>
</div>
</div>
</body>
<script>
baidu('#demo_btn_1').on('click',function(e){
var value=baidu('#param0').val(),
arr = ['a',function(){console.log(1)},'身边','新知',1,'','d'],
result = baidu.array(arr).find(function (item, index) {return eval(value);});
baidu('#demo_execute_result_1').html( '条件：' + value + ';结果：' + result);
})
</script>
</html>

0 comments on commit b35811e

Please sign in to comment.