Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Metody setSelectionRange + scrollTop
Forum PHP.pl > Forum > Przedszkole
amii
Generalnie to chodzi mi o zrozumienie co robi ta funkcja tag poniżej. Nie kapuje co robią metody setSelectionRange + document.selection.createRange().text + scrollTop, wujek Google nie za bardzo pomaga tym razem. Dodatkowo co to za dziwna składnia i czemu to służy -> start = '[func]'+url+':|:'; lub start = '[break]';

[JAVASCRIPT] pobierz, plaintext
  1. function tag(tag) {
  2. var src = document.getElementById('txt');
  3. var start, end, url, alt, title='';
  4. switch(tag) {
  5. case 'underline':
  6. start = '<span class="underline">';
  7. end = '<\/span>';
  8. break;
  9. case 'intro':
  10. start = '[break]';
  11. end = '\n';
  12. break;
  13. // function use
  14. case 'func':// adding function insertion
  15. // function name no brackets
  16. url = prompt("<?php echo l('js_func1'); ?>", '');
  17. //params, seperated by comma.
  18. title = prompt("<?php echo l('js_func2'); ?>", "");
  19. if (url != null) {
  20. start = '[func]'+url+':|:';
  21. end = '[\/func]';
  22. } else {
  23. start = '';
  24. end = '';
  25. title = '';
  26. }
  27. break;
  28. // function use end
  29. case 'include':
  30. url = prompt("<?php echo l('js_file'); ?>", '');
  31. start = url !=null ? '[include]'+url+'[\/include]' : '';
  32. end = '';
  33. break;
  34. case 'br':
  35. start = '';
  36. end = '<br \/>\n';
  37. break;
  38. case 'img':
  39. url = prompt("<?php echo l('js_image1'); ?>", '');
  40. alt = prompt("<?php echo l('js_image2'); ?>", '');
  41. start = url != null ? '<img src="'+url+'" alt="'+alt+'" \/>' : '';
  42. end = '';
  43. break;
  44. case 'link':
  45. url = prompt("<?php echo l('js_link1'); ?>", '');
  46. title = prompt("<?php echo l('js_link2'); ?>", '');
  47. if (url != null) {
  48. start = '<a href="'+url+'" title="'+title+'">';
  49. end = '<\/a>';
  50. } else {
  51. start = '';
  52. end = '';
  53. title = '';
  54. }
  55. break;
  56. default:
  57. start = '<'+tag+'>';
  58. end = '<\/'+tag+'>\n';
  59. }
  60. if (!src.setSelectionRange) {
  61. var selected = document.selection.createRange().text;
  62. src.focus();
  63. if (selected.length <= 0) {
  64. var codetext = start + title + end;
  65. } else {
  66. var codetext = start + selected + end;
  67. }
  68. document.selection.createRange().text = codetext;
  69. } else {
  70. var h = src.scrollTop;
  71. var pretext = src.value.substring(0, src.selectionStart);
  72. var codetext = start + src.value.substring(src.selectionStart, src.selectionEnd) + end;
  73. var posttext = src.value.substring(src.selectionEnd, src.value.length);
  74. if (codetext == start + end) {
  75. codetext = start + title + end;
  76. }
  77. src.value = pretext + codetext + posttext;
  78. document.getElementById("txt").scrollTop = h;
  79. src.selectionStart=pretext.length;
  80. src.selectionEnd=pretext.length+codetext.length;
  81. src.focus();
  82. }
  83. }
[JAVASCRIPT] pobierz, plaintext


Przykładowe zastosowanie:
  1. function buttons(){
  2. echo '<div class="clearer"></div>
  3. <p>'.l('formatting').':
  4. <br class="clearer" />';
  5. $formatting = array(
  6. 'strong' => '',
  7. 'em' => 'key',
  8. 'underline' => 'key',
  9. 'del' => 'key',
  10. 'p' => '',
  11. 'br' => ''
  12. );
  13. foreach ($formatting as $key => $var) {
  14. $css = $var == 'key' ? $key :'buttons';
  15. echo '<input type="button" name="'.$key.'" title="'.l($key).'" class="'.$css.'" onclick="tag(\''.$key.'\')" value="'.
  16. l($key.'_value').'" />';
  17. }
  18. echo '</p><br class="clearer" /><p>'.l('insert').': <br class="clearer" />';
  19. $insert = array('img', 'link', 'include', 'func','intro');
  20. foreach ($insert as $key) {
  21. echo '<input type="button" name="'.$key.'" title="'.l($key).'" class="buttons" onclick="tag(\''.
  22. $key.'\')" value="'.l($key.'_value').'" />';
  23. }
  24. echo '<br class="clearer" /></p>';
  25. }
  26. }
skowron-line
A odpaliłeś ten kod questionmark.gif
document.selection.createRange().text - zwróci zaznaczony tekst (IE only)
setSelectionRange - to samo co wyżej ale dla innych przeglądarek niż IE
scrollTop - "pobiera bądź ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu. " więcej na tej stronie
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.