PageRenderTime 48ms CodeModel.GetById 21ms RepoModel.GetById 1ms app.codeStats 0ms

/gallery/city-selector/1.0/demo.html

https://github.com/akecn/kissy-gallery
HTML | 95 lines | 94 code | 1 blank | 0 comment | 0 complexity | 22da58696ce39f1ae43b98e9845d810b MD5 | raw file
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8"/>
    5. 

  5. <title>KISSY gallery - yourGallery</title>
    6. 

  6. <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/base-min.css"/>
    7. 

  7. <link rel="stylesheet" href="../../../tools/skin/default.css"/>
    8. 

  8. <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy.js" charset="utf-8"></script>
    9. 

  9.     <link rel="stylesheet" href="../../../tools/skin/show-code.js"/>
    10. 

  10. <script>
    11. 

  11.     KISSY.config({
    12. 

  12.         packages:[
    13. 

  13.             {
    14. 

  14.                 name:"gallery",
    15. 

  15.                 tag:"20111220",
    16. 

  16.                 path:"../../../",  // cdn上适当修改对应路径
    17. 

  17.                 charset:"utf-8"
    18. 

  18.             }
    19. 

  19.         ]
    20. 

  20.     });
    21. 

  21. </script>
    22. 

  22. </head>
    23. 

  23. <body>
    24. 

  24. <div id="header">
    25. 

  25.     <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="http://a.tbcdn.cn/s/kissy/logo.png"/></a></h1>
    26. 

  26.     <div class="sub-title">Gallery</div>
    27. 

  27.     <ul class="navigation">
    28. 

  28.         <li><a href="http://docs.kissyui.com/">首页</a></li>
    29. 

  29.         <li><a href="http://github.com/kissyteam">源码</a></li>
    30. 

  30.     </ul>
    31. 

  31. 

  32. </div>
    33. 

  33. <div id="content">
    34. 

  34. 	<div class="s-crumbs">
    35. 

  35.             <span>当前位置：</span>
    36. 

  36.             <a href="http://kissyui.com/">KISSY</a>
    37. 

  37.             <a href="http://docs.kissyui.com/kissy-gallery/index.html">Gallery</a>
    38. 

  38.             <span>CitySelector</span>
    39. 

  39.         </div>
    40. 

  40. <pre class="s-section">             
    41. 

  41. 作者：baxian@taobao.com(霸先)
    42. 

  42. 功能：城市选择组件
    43. 

  43. 源码：<a href="index.js">index.js</a>
    44. 

  44. <a href="../out/classes/CitySelector.html">API文档</a>
    45. 

  45. </pre>
    46. 

  46. 	<h3 class="s-title">demo1:使用overlay模式</h3>
    47. 

  47. 	<div class="s-section s-demo">
    48. 

  48. 		<input type="text" id="foo" style="width:200px">
    49. 

  49. 		<script>
    50. 

  50. 			KISSY.use('gallery/city-selector/1.0/domestic,gallery/city-selector/1.0/index',function(S,DomesticData,CitySelector){
    51. 

  51. 			    var tmp = new CitySelector({
    52. 

  52. 			      data : DomesticData,
    53. 

  53. 			      canProvinceSelect : true,
    54. 

  54. 			      node : '#foo'
    55. 

  55. 		    	});
    56. 

  56. 		    });
    57. 

  57. 		</script>
    58. 

  58. 	</div>
    59. 

  59. 	<h3 class="s-title">demo2:使用指定容器模式</h3>
    60. 

  60. 	<div class="s-section s-demo">
    61. 

  61. 		<input type="text" id="foo1" style="width:200px">
    62. 

  62. 		<div id="con1"></div>
    63. 

  63. 		<script>
    64. 

  64. 			KISSY.use('gallery/city-selector/1.0/domestic,gallery/city-selector/1.0/index',function(S,DomesticData,CitySelector){
    65. 

  65. 			    var tmp = new CitySelector({
    66. 

  66. 			      data : DomesticData,
    67. 

  67. 			      canProvinceSelect : true,
    68. 

  68. 			      render : '#con1',
    69. 

  69. 			      node : '#foo1'
    70. 

  70. 		    	});
    71. 

  71. 		    });
    72. 

  72. 		</script>
    73. 

  73. 	</div>
    74. 

  74. 	<h3 class="s-title">demo2:多选</h3>
    75. 

  75. 	<div class="s-section s-demo">
    76. 

  76. 		<input type="text" id="foo2" style="width:500px">
    77. 

  77. 		<div id="con2"></div>
    78. 

  78. 		<script>
    79. 

  79. 			KISSY.use('gallery/city-selector/1.0/foreign,gallery/city-selector/1.0/index',function(S,DomesticData,CitySelector){
    80. 

  80. 			    var tmp = new CitySelector({
    81. 

  81. 			      data : DomesticData,
    82. 

  82. 			      canProvinceSelect : true,
    83. 

  83. 			      mutiple : true,
    84. 

  84. 			      render : '#con2',
    85. 

  85. 			      node : '#foo2'
    86. 

  86. 		    	});
    87. 

  87. 		    });
    88. 

  88. 		</script>
    89. 

  89. 	</div>
    90. 

  90. </div>
    91. 

  91.       <div id="footer">
    92. 

  92.         &copy; Copyright 2010~2100, KISSY Team.
    93. 

  93.       </div>
    94. 

  94.     </body>
    95. 

  95.   </html>
    96. 

  96.