examples.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. var loadedScript, dataCount = 0;
  2. var isFile = document.location.toString().match(/file:\/\//);
  3. var editor;
  4. $(document).ready(function () {
  5. var url = location.href,isAutoClickTab = false,isAutoClickExample = false;
  6. if (url.lastIndexOf("#") > -1) {
  7. var exampleId = url.substring(url.lastIndexOf('#') + 1, url.length);
  8. //判断url中是否带有锚点
  9. if (exampleId) {
  10. //有锚点则打开相应的范例
  11. var a = $("a[data-name='" + exampleId + "']");
  12. var parentId = a.parents(".tab-pane").attr("id");
  13. addFunc(a);
  14. setTimeout(function(){
  15. isAutoClickTab = true;
  16. $("#myTab a[href='#" + parentId + "']").click();
  17. isAutoClickExample = true;
  18. a.click();
  19. },0);
  20. } else {
  21. //无锚点则默认打开第一个范例
  22. openDefalutExam();
  23. }
  24. } else {
  25. openDefalutExam();
  26. }
  27. function openDefalutExam() {
  28. setTimeout(function(){
  29. isAutoClickExample = true;
  30. $("#myTab li a").first().click();
  31. },0);
  32. }
  33. //添加单击事件
  34. $('#myTab').click(function (e) {
  35. if(isAutoClickTab){
  36. isAutoClickTab = false;
  37. return;
  38. }
  39. e = e || window.event;
  40. var target = e.target || e.srcElement;
  41. var eid = target.hash;
  42. isAutoClickExample = false;
  43. $(eid + " .span10 li a").first().click();
  44. });
  45. //添加单击事件
  46. $('#myTabContent').click(function (e) {
  47. if(isAutoClickExample){
  48. isAutoClickExample = false;
  49. return;
  50. }
  51. e = e || window.event;
  52. var target = e.target || e.srcElement;
  53. addFunc(target);
  54. //阻止浏览器冒泡
  55. if (typeof e.preventDefault === 'function') {
  56. e.preventDefault();
  57. e.stopPropagation();
  58. } else {
  59. e.returnValue = false;
  60. e.cancleBubble = true;
  61. }
  62. });
  63. //判断是否为本地打开
  64. if (!isFile) {
  65. $(window).resize(function () {
  66. var width = $('#container-main').width();
  67. $("#mapContent").width(width * 0.62);
  68. $("#code_area").width(width * 0.37);
  69. });
  70. $("#code_area").css("display", "block");
  71. $("#drag").css("display", "block");
  72. $("#mapContent").css("width", "62%");
  73. $("#container-main").css("border", "1px solid #3473b7");
  74. codeChange();
  75. initCode();
  76. dragCode();
  77. }
  78. });
  79. //加载具体的案例。
  80. function addFunc(srcEle) {
  81. activeExample(srcEle);
  82. if (!isFile) {
  83. setTimeout(function () {
  84. initCode();
  85. }, 200);
  86. }
  87. //将选中地图属性名称添加到url上
  88. var urlName = $(srcEle).data("name");
  89. if (location.href.lastIndexOf('#') > 0) {
  90. location.href = location.href.substring(0, location.href.lastIndexOf('#')) + '#' + urlName;
  91. }
  92. else {
  93. location.href = location.href + '#' + urlName;
  94. }
  95. }
  96. function activeExample(srcEle) {
  97. updateClassName(srcEle);
  98. var $srcEle = $(srcEle);
  99. $('#sourceCode').prop('url', './' + $srcEle.data("name") + '.html');
  100. $('#skip').prop('href', './' + $srcEle.data("name") + '.html');
  101. runExample($srcEle);
  102. }
  103. function updateClassName(ele) {
  104. /*需要更精确的定位*/
  105. $('.tab-content').find('> .tab-pane ul > .active').removeClass('active');
  106. $(ele).parent().addClass('active');
  107. }
  108. function attachScript(url, id) {
  109. $("#examplesIframe").attr("src", url);
  110. }
  111. function attachDetails(name) {
  112. var details = DemoDescription[name];
  113. if (!details.title) {
  114. details.title = "案例名称";
  115. }
  116. if (!details.desc) {
  117. details.desc = "对本案例的描述";
  118. }
  119. if (!details.oper) {
  120. details.oper = "详细的操作说明";
  121. }
  122. $('h3 #demo-title').text(details.title);
  123. $('#desc').text(details.desc);
  124. $('#oper').text(details.oper);
  125. }
  126. function runExample(srcEle) {
  127. var url = './' + srcEle.data("name") + '.html';
  128. attachScript(url, srcEle.data("name") + "_script");
  129. attachDetails(srcEle.data("name"));
  130. }