Página inicial Explorar Ajuda
Registrar Entrar
wangdaping
/
wp
1
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
wp
/
nwyj
/
.svn
/
pristine
/
89
/
89613a15e9da7ca8e5e898035779442f34af6899.svn-base

89613a15e9da7ca8e5e898035779442f34af6899.svn-base 6.2 KB
Link permanente Histórico Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    5. 

  5. <title></title>
    6. 

  6. <!--框架必需start-->
    7. 

  7. <script type="text/javascript" src="../../libs/js/jquery.js"></script>
    8. 

  8. <script type="text/javascript" src="../../libs/js/language/cn.js"></script>
    9. 

  9. <script type="text/javascript" src="../../libs/js/framework.js"></script>
    10. 

  10. <link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
    11. 

  11. <link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
    12. 

  12. <link rel="stylesheet" type="text/css" id="customSkin"/>
    13. 

  13. <!--框架必需end-->
    14. 

  14. </head>
    15. 

  15. <body>
    16. 

  16. <div style="width:800px;">
    17. 

  17. <fieldset style="border-color:#999999;">
    18. 

  18.     <legend>1、基本示例：</legend>
    19. 

  19. 	<div class="box2" style="width: 450px;"><div id="box_topcenter" class="box_topcenter"><div class="box_topleft"><div class="box_topright"><div class="title"><span>控制面板</span></div><div class="boxSubTitle"></div><div class="status"><span class="ss"><a href="http://www.baidu.com" target="_blank">更多>></a></span></div><div class="clear"></div></div></div></div><div class="box_middlecenter"><div class="box_middleleft"><div class="box_middleright"><div class="boxContent" style="overflow: visible;height:250px;">
    20. 

  20. 		这是极速版box2的效果。效果与框架自动渲染一样，但速度会快很多。<br/>
    21. 

  21. 		如果需要收缩功能，可以监听状态区域的click自己处理或者手动调用render()方法渲染。
    22. 

  22. 	</div></div></div></div><div id="box_bottomcenter" class="box_bottomcenter"><div class="box_bottomleft"><div class="box_bottomright"></div></div></div></div>
    23. 

  23. </fieldset>
    24. 

  24. <div class="height_15"></div>
    25. 

  25. 

  26. <fieldset style="border-color:#999999;">
    27. 

  27.     <legend>2、自定义图标：</legend>
    28. 

  28. 	<div class="box2" style="width: 300px;"><div id="box_topcenter" class="box_topcenter"><div class="box_topleft"><div class="box_topright"><div class="title"><span class="icon_list" style="background-position: 0px 50%;">与图标库关联</span></div><div class="boxSubTitle"></div><div class="status"><span class="ss"></span></div><div class="clear"></div></div></div></div><div class="box_middlecenter"><div class="box_middleleft"><div class="box_middleright"><div class="boxContent" style="overflow: visible;">
    29. 

  29. 		内容区域<br>内容区域<br>内容区域<br>
    30. 

  30. 		内容区域<br>内容区域<br>内容区域<br>
    31. 

  31. 	</div></div></div></div><div id="box_bottomcenter" class="box_bottomcenter"><div class="box_bottomleft"><div class="box_bottomright"></div></div></div></div>
    32. 

  32. 	
    33. 

  33. 	<div class="box2" style="width: 300px;"><div id="box_topcenter" class="box_topcenter"><div class="box_topleft"><div class="box_topright"><div class="title"><span style="background-image: url(../../libs/images/icons/setting.png); background-repeat: no-repeat; background-position: 0px 50%; display: block; padding-left: 18px;">读取外部图标文件</span></div><div class="boxSubTitle"></div><div class="status"><span class="ss"></span></div><div class="clear"></div></div></div></div><div class="box_middlecenter"><div class="box_middleleft"><div class="box_middleright"><div class="boxContent" style="overflow: visible;">
    34. 

  34. 		内容区域<br>内容区域<br>内容区域<br>
    35. 

  35. 		内容区域<br>内容区域<br>内容区域<br>
    36. 

  36. 	</div></div></div></div><div id="box_bottomcenter" class="box_bottomcenter"><div class="box_bottomleft"><div class="box_bottomright"></div></div></div></div>
    37. 

  37. </fieldset>
    38. 

  38. <div class="height_15"></div>
    39. 

  39. 

  40. <fieldset style="border-color:#999999;">
    41. 

  41.     <legend>3、副标题：</legend>
    42. 

  42. 	<div class="box2" style="width: 300px;"><div id="box_topcenter" class="box_topcenter"><div class="box_topleft"><div class="box_topright"><div class="title"><span>任务列表</span></div><div class="boxSubTitle" style="color: rgb(255, 0, 0);">【您有15条任务未完成】</div><div class="status"><span class="ss"></span></div><div class="clear"></div></div></div></div><div class="box_middlecenter"><div class="box_middleleft"><div class="box_middleright"><div class="boxContent" style="overflow: visible;">
    43. 

  43. 		内容区域<br>内容区域<br>内容区域<br>
    44. 

  44. 		内容区域<br>内容区域<br>内容区域<br>
    45. 

  45. 	</div></div></div></div><div id="box_bottomcenter" class="box_bottomcenter"><div class="box_bottomleft"><div class="box_bottomright"></div></div></div></div>
    46. 

  46. </fieldset>
    47. 

  47. <div class="height_15"></div>
    48. 

  48. 

  49. 

  50. <fieldset style="border-color:#999999;">
    51. 

  51.     <legend>4、自定义风格：</legend>
    52. 

  52. 	<div iconclass="icon_list" paneltitle="信息列表" panelwidth="300" boxtype="box2" class="box2_custom" style="width: 300px;"><div id="box_topcenter" class="box_topcenter"><div class="box_topleft"><div class="box_topright"><div class="title"><span class="icon_list" style="background-position: 0px 50%;">信息列表</span></div><div class="boxSubTitle"></div><div class="status"><span class="ss"></span></div><div class="clear"></div></div></div></div><div class="box_middlecenter"><div class="box_middleleft"><div class="box_middleright"><div class="boxContent" style="overflow: visible;">
    53. 

  53. 		内容区域<br>内容区域<br>内容区域<br>
    54. 

  54. 		内容区域<br>内容区域<br>内容区域<br>
    55. 

  55. 	</div></div></div></div><div id="box_bottomcenter" class="box_bottomcenter"><div class="box_bottomleft"><div class="box_bottomright"></div></div></div></div>
    56. 

  56. </fieldset>
    57. 

  57. <div class="height_50"></div>
    58. 

  58. </div>	
    59. 

  59. 

  60. 	<script>
    61. 

  61. 		$(function(){
    62. 

  62. 			$("#box-6").bind("stateChange",function(e,state){
    63. 

  63. 				alert(state);
    64. 

  64. 			});
    65. 

  65. 		})
    66. 

  66. 		
    67. 

  67. 		function openWin(){
    68. 

  68. 			alert("这是自定义事件，可以弹个窗口什么的")
    69. 

  69. 		}
    70. 

  70. 		function createBox(){
    71. 

  71. 			var $box=$('<div class="box2" panelWidth="300" panelHeight="150"  panelTitle="控制面板">内容部分</div>');
    72. 

  72. 			$("#testBtn").after($box);
    73. 

  73. 			$box.render();
    74. 

  74. 		}
    75. 

  75. 		function changeBox(){
    76. 

  76. 			$("#box6").attr("panelTitle","新标题");
    77. 

  77. 			$("#box6").attr("panelWidth",400);
    78. 

  78. 			$("#box6").attr("panelHeight",300);
    79. 

  79. 			$("#box6").render();
    80. 

  80. 		}
    81. 

  81. 		function getBoxState(){
    82. 

  82. 			alert($("#box-7").box2GetState());
    83. 

  83. 		}
    84. 

  84. 		function changeBoxState(){
    85. 

  85. 			$("#box-7").box2ChangeState();
    86. 

  86. 		}
    87. 

  87. 		function openBox(){
    88. 

  88. 			$("#box-7").box2Open();
    89. 

  89. 		}
    90. 

  90. 		function closeBox(){
    91. 

  91. 			$("#box-7").box2Close();
    92. 

  92. 		}
    93. 

  93. 	</script>
    94. 

  94. </body>
    95. 

  95. </html>
    96.