2010
10-10

za duże elementy jquery-ui

Wczoraj instalowalem jquery-ui na jednej z stron.
Kiedy zrobiłem to tak jak pisało w instrukcji to elementy jquery-ui były 2 razy większe niż powinny.
Poszukałem nieco i znalazłem jak było to rozwiązane w przykładach na stronie jquery.com.
  1.  
  2. body{ font: 62.5% "Trebuchet MS", sans-serif;}
  3. .demoHeaders { margin-top: 2em; }
  4. #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
  5. #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
  6. ul#icons {margin: 0; padding: 0;}
  7. ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
  8. ul#icons span.ui-icon {float: left; margin: 0 4px;}
  9.  
Niestety taka zmiana zmieniła (zniszczyła) cały wygląd strony. Ale udało mi się rozwiązać ten problem i opisze tutaj cały proces instalacji krok po kroku.
1. Ściągnij jquery-ui z jqueryui.com/download z wszyskimi komponentami. 2. Rozpakuj archiwum zip do jakiegoś folderu. Ja urzyłęm lib/jquery-ui/ i tego folderu bede urzywał dalej w instrukcji, ale możesz zamienić go na inny. Urzyje także jquery-ui w wersji 1.8.5 i theme ui-darkness, jeśli urzywasz nowszej to poprostu zamień te numery w przykładach na swoje (pisanie jquery-ui-x.x.x źle wygląda). 3. Dodaj ten kod na każdejpodstronie swojej strony pomiędzy <head> i </head> :
  1. <link type="text/css" href="libs/jquery-ui/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
  2. <script type="text/javascript" src="libs/jquery-ui/js/jquery-1.4.2.min.js"></script>
  3. <script type="text/javascript" src="libs/jquery-ui/js/jquery-ui-1.8.5.custom.min.js"></script>
  4. <style type="text/css">
  5. #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
  6. #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
  7. ul#icons {margin: 0; padding: 0;}
  8. ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
  9. ul#icons span.ui-icon {float: left; margin: 0 4px;}
  10. .ui-widget{
  11. font: 62.5% "Trebuchet MS", sans-serif;
  12. }
  13. </style>
  14.  
Jeśli chcesz możesz umieścić kod CSS w osobnym poliku, ale jest bardzo istotne by zainkludować go po zainkludowaniu jquery-ui (po pierwszych 3 liniach, a nie przed). 4. Teraz wszysko powinno dziłać poprawnie. Możesz przetestować to za pomocą kodu takiego jak ten:
  1. <link type="text/css" href="libs/jquery-ui/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
  2. <script type="text/javascript" src="libs/jquery-ui/js/jquery-1.4.2.min.js"></script>
  3. <script type="text/javascript" src="libs/jquery-ui/js/jquery-ui-1.8.5.custom.min.js"></script>
  4. <style type="text/css">
  5. #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
  6. #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
  7. ul#icons {margin: 0; padding: 0;}
  8. ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
  9. ul#icons span.ui-icon {float: left; margin: 0 4px;}
  10. .ui-widget{
  11. font: 62.5% "Trebuchet MS", sans-serif;
  12. }
  13. </style>
  14. $(function(){
  15. $('#date').datepicker();
  16. });
  17. </script>
  18. </head>
  19. date:
  20. <input id="date"/>
  21. </form>
  22. </body>
  23. </html>

4 Komentarze.

  1. Nice site, nice and easy on the eyes and great content too.

  2. I’ve recently started a blog, the information you provide on this site has helped me tremendously. Thank you for all of your time & work.

  3. great post, very informative. I wonder why the opposite experts of this sector do not reaize this.
    Yoou must proceed your writing. I’m confident, you hae a great
    readers’ base already!

    Take a look at my web site :: social media Berkhamsted

  4. Mitch says:

    Finally i quit my day job, now i earn decent money on-line you should try too,
    just search in google – blackhand roulette
    system

Zostaw odpowiedź

  ( Ctrl+Enter )