Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery]Obrócony tekst w komórce tabeli
wicek
post 23.09.2014, 13:57:52
Post #1





Grupa: Zarejestrowani
Postów: 55
Pomógł: 1
Dołączył: 13.02.2014

Ostrzeżenie: (0%)
-----


Witam, próbuję uruchomić skrypt obracający tekst w komórce o 90 stopni z strony : Rotate table cell content i nie udaje mi się... Czy mógł by ktoś pokazać mi jak to ma wyglądać na przykładzie jednej komórki w tabeli aby tekst był obrócony?

style_text.css
  1. <STYLE type="text/css">
  2. /* Styles for rotateTableCellContent plugin*/
  3. table div.rotated {
  4. -webkit-transform: rotate(90deg);
  5. -moz-transform: rotate(90deg);
  6. writing-mode:tb-rl;
  7. white-space: nowrap;
  8. }
  9.  
  10. thead th {
  11. vertical-align: top;
  12. }
  13.  
  14. table .vertical {
  15. white-space: nowrap;
  16.  
  17. }


test.php
  1. <link rel="stylesheet" type="text/css" href="style_text.css">
  2. <script src="jquery.js">
  3. (function ($) {
  4. $.fn.rotateTableCellContent = function (options) {
  5. /*
  6. Version 1.0
  7. 7/2011
  8. Written by David Votrubec (davidjs.com) and
  9. Michal Tehnik (@Mictech) for ST-Software.com
  10. */
  11.  
  12. var cssClass = ((options) ? options.className : false) || "vertical";
  13.  
  14. var cellsToRotate = $('.' + cssClass, this);
  15.  
  16. var betterCells = [];
  17. cellsToRotate.each(function () {
  18. var cell = $(this)
  19. , newText = cell.text()
  20. , height = cell.height()
  21. , width = cell.width()
  22. , newDiv = $('
  23. <div>', { height: width, width: height })
  24. , newInnerDiv = $('
  25. <div>', { text: newText, 'class': 'rotated' });
  26.  
  27. newDiv.append(newInnerDiv);
  28.  
  29. betterCells.push(newDiv);
  30. });
  31.  
  32. cellsToRotate.each(function (i) {
  33. $(this).html(betterCells[i]);
  34. });
  35. };
  36. })(jQuery);
  37. $('.dupa2')
  38. .rotateTableCellContent({className: 'dupa'});
  39.  
  40. <table class="dupa2"><tr><td class="dupa">dupa</td>



Z góry dzięki za pomoc

Wicek
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 4)
Pyton_000
post 23.09.2014, 15:27:50
Post #2





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


http://jsfiddle.net/j06q5ejp/
Go to the top of the page
+Quote Post
djgarsi
post 23.09.2014, 16:57:29
Post #3





Grupa: Zarejestrowani
Postów: 459
Pomógł: 26
Dołączył: 1.06.2009

Ostrzeżenie: (0%)
-----


To aż trzeba JavaScript do tego wykorzystać?
http://jsfiddle.net/cvfzpgna/


--------------------
Go to the top of the page
+Quote Post
Pyton_000
post 23.09.2014, 17:16:08
Post #4





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


Nasz klient nasz Pan wink.gif
Go to the top of the page
+Quote Post
wicek
post 24.09.2014, 07:36:28
Post #5





Grupa: Zarejestrowani
Postów: 55
Pomógł: 1
Dołączył: 13.02.2014

Ostrzeżenie: (0%)
-----


Wohoho ale ze mnie dupa smile.gif Dzięki Panowie za pomoc oczywiście +
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 07:16