accordionreload.htm 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  6. <style type="text/css">
  7. </style>
  8. <script src="../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  9. <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
  10. <script src="../../lib/ligerUI/js/plugins/ligerAccordion.js" type="text/javascript"></script>
  11. <script type="text/javascript">
  12. $.ligerMethos.Accordion.reload = function (html) {
  13. this.accordion.html(html);
  14. this._render();
  15. };
  16. $(function ()
  17. {
  18. $("#accordion1").ligerAccordion({ height: 300 });
  19. $("#txtHtml").val('<div title="NEW功能列表">11111</div><div title="NEW列表">2222</div>');
  20. });
  21. function f_reload() {
  22. var html = $("#txtHtml").val();
  23. $("#accordion1").ligerAccordion('reload', html);
  24. }
  25. </script>
  26. <style type="text/css">
  27. body{ padding:20px; margin:0;}
  28. #txtHtml{ width:300px; height:200px;}
  29. #accordion1{ width:160px;overflow:hidden;}
  30. </style>
  31. </head>
  32. <body style="padding:10px">
  33. <textarea id="txtHtml"></textarea><input id="Button1" type="button"
  34. value="reload" onclick="f_reload()" />
  35. <div id="accordion1">
  36. <div title="功能列表">
  37. <ul>
  38. <li>列表一</li>
  39. <li>列表二</li>
  40. <li>列表三</li>
  41. <li>列表四</li>
  42. <li>列表五</li>
  43. </ul>
  44. </div>
  45. <div title="列表">
  46. <ul>
  47. <li>列表一</li>
  48. <li>列表二</li>
  49. <li>列表三</li>
  50. <li>列表四</li>
  51. <li>列表五</li>
  52. </ul>
  53. </div>
  54. <div title="其他" style="padding:10px">
  55. 其他内容
  56. </div>
  57. </div>
  58. <div style="display:none;">
  59. </div>
  60. </body>
  61. </html>