jquery-ui.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>With jQuery UI</title>
  6. <style>
  7. body {
  8. font-size: 12px;
  9. }
  10. form {
  11. margin: 0;
  12. }
  13. textarea {
  14. display: block;
  15. }
  16. #J_editorDialog {
  17. display: none;
  18. }
  19. </style>
  20. <link rel="stylesheet" href="jquery-ui/css/smoothness/jquery-ui-1.9.2.custom.css" />
  21. <link rel="stylesheet" href="../themes/default/default.css" />
  22. <script charset="utf-8" src="jquery.js"></script>
  23. <script charset="utf-8" src="jquery-ui/js/jquery-ui-1.9.2.custom.js"></script>
  24. <script charset="utf-8" src="../kindeditor.js"></script>
  25. <script charset="utf-8" src="../lang/zh_CN.js"></script>
  26. <script>
  27. $(function() {
  28. $('#J_openDialog').click(function() {
  29. $('#J_editorDialog').dialog({
  30. title : 'KindEditor',
  31. width : 700,
  32. open : function(event, ui) {
  33. // 打开Dialog后创建编辑器
  34. KindEditor.create('textarea[name="content"]', {
  35. resizeType : 1
  36. });
  37. },
  38. beforeClose : function(event, ui) {
  39. // 关闭Dialog前移除编辑器
  40. KindEditor.remove('textarea[name="content"]');
  41. }
  42. });
  43. });
  44. });
  45. </script>
  46. </head>
  47. <body>
  48. <h3>在jQuery UI Dialog里打开编辑器</h3>
  49. <div id="J_editorDialog">
  50. <textarea name="content" style="width:100%;height:200px;"></textarea>
  51. </div>
  52. <button type="button" id="J_openDialog">打开Dialog</button>
  53. </body>
  54. </html>