Super_mousee
07-04-2013, 19:00
Mam Joomlę 2.5.9 - na Joomli mam artykuły i formularze oraz listy z rekordami tabel bazy danych w formularzu "Fabrik".
Listy fabrika zamieszczone są na podstronach Joomli podobnie jak artykuły jako typ "menu".
Sporo list fabrika to szerokie listy - większe niż parametr width szablonu pozycji menu, które to szablony mają standardowo width=1280px i nie powinny być większe.
Listy fabrika są więc zamieszczone w oknach ze scrollbar - czyli poziomym paskiem przeijania na dole.
Chciałam dodać do tych list fabrika dodatkowy poziomy pasek przewijania na górze pod wierszem nagłówków z nazwami kolumn.
Dostałam wskazówkę, że mogę to zrobić za pomocą jakiegoś pluginu jquery.
Znalazłam taki plugin np. tutaj: http://www.myjqueryplugins.com/jquery-plugin/jscrollbar
Mam problem jak ten plugin zainstalować i jak ustawić, żeby był pasek przewijania na górze lub - na dole i dodatkowy na górze?
Dostałam informację, że mam zmodyfikować szablon tej listy z fabrikiem, którą chcę wyświetlić w oknie z dodatkowym paskiem przewijania górnym.
Szablon fabrika jest w:
/var/www/moja.joomla1/components/com_fabrik/views/list/tmpl/moj_szablon1/
1. Nie byłam pewna gdzie wgrać pliki z pluginem "jscrollbar jquery" - po rozpakowaniu zipa (bo z zipa przez menedżera rozszerzeń to się nie instaluje)
- wgrałam tutaj:
/var/www/moja.joomla1/components/com_fabrik/views/list/tmpl/moj_szablon1/jScrollbar-master/jquery
w katalogu są pliki:
jquery.js
j.query-mousewheel.js
jquery-ui.js
jscrollbar.jquery.css
jscrollbar.jquery.js
jScrollbar.jquery.win.js
2. Na stronie z tym pluginem jest napisane, że trzeba zamieścić na stronie 3 części kodu - nie jest napisane w którym pliku i czy na początku pliku lub w którym innym miejscu
- myślę, że może chodzić o wpisanie tych 3 części kodu w pliku:
/var/www/moja.joomla1/components/com_fabrik/views/list/tmpl/moj_szablon1/
template_css.php
lub
/var/www/moja.joomla1/components/com_fabrik/views/list/tmpl/moj_szablon1/
default.php
Fragmenty kodu do zamieszczenia:
część1:
<!-- include CSS & JS files -->
<!-- CSS file -->
<link (http://december.com/html/4/element/link.html) rel="stylesheet" type="text/css" href="jScrollbar.jquery.css" media="screen" />
<!-- jQuery files -->
<script (http://december.com/html/4/element/script.html) type="text/javascript" src="jquery.js">
</script (http://december.com/html/4/element/script.html)>
<script (http://december.com/html/4/element/script.html) type="text/javascript" src="jquery-ui.js"></script (http://december.com/html/4/element/script.html)>
<script (http://december.com/html/4/element/script.html) type="text/javascript" src="jquery-mousewheel.js">
</script (http://december.com/html/4/element/script.html)>
<script (http://december.com/html/4/element/script.html) type="text/javascript" src="jScrollbar.jquery.js"></script (http://december.com/html/4/element/script.html)>
część2:
<!-- Main container -->
<div (http://december.com/html/4/element/div.html) class="jScrollbar">
<!-- Scrolling content container -->
<div (http://december.com/html/4/element/div.html) class="jScrollbar_mask">
<p (http://december.com/html/4/element/p.html)> <!-- Your long content here -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...
</p (http://december.com/html/4/element/p.html)> </div (http://december.com/html/4/element/div.html)>
<!-- slider container -->
<div (http://december.com/html/4/element/div.html) class="jScrollbar_draggable">
<!-- slider -->
<a (http://december.com/html/4/element/a.html) href="#" class="draggable"></a (http://december.com/html/4/element/a.html)> </div (http://december.com/html/4/element/div.html)>
<!-- don't forget to clear the floats -->
<div (http://december.com/html/4/element/div.html) class="clr">
</div (http://december.com/html/4/element/div.html)> </div (http://december.com/html/4/element/div.html)>
część3:
<script type="text/javascript">
$(document).ready(function(){
// simple jScrollbar plugin call
$('.jScrollbar').jScrollbar();
// more complex jScrollbar plugin call
$('.jScrollbar').jScrollbar({
scrollStep : 25,
position : 'left',
showOnHover : true
});
}); </script>
Może ktoś jest bardziej doświadczony z pluginem "JScrollbar jquery" i mógłby podać wskazówkę jak ten plugin zainstalować i jak zrobić ten dodatkowy poziomy pasek przewijania na górze?
Może być wskazówka jak to zrobić dla okna z artykułem Joomli (zamiast okna z listą fabrika - bo tego chyba rzadziej ktoś używa) - żeby był dodatkowy pasek przewijania poziomego na górze. Używam na Joomli podstawowych szablonów beez_5 i beez_20.
Poczytałam trochę w google w temacie jquery ale trudno mi z tego zorientować się jak należy mój plugin zainstalować i jak skonfigurować, żeby był dodatkowy pasek przewijania na górze.
Listy fabrika zamieszczone są na podstronach Joomli podobnie jak artykuły jako typ "menu".
Sporo list fabrika to szerokie listy - większe niż parametr width szablonu pozycji menu, które to szablony mają standardowo width=1280px i nie powinny być większe.
Listy fabrika są więc zamieszczone w oknach ze scrollbar - czyli poziomym paskiem przeijania na dole.
Chciałam dodać do tych list fabrika dodatkowy poziomy pasek przewijania na górze pod wierszem nagłówków z nazwami kolumn.
Dostałam wskazówkę, że mogę to zrobić za pomocą jakiegoś pluginu jquery.
Znalazłam taki plugin np. tutaj: http://www.myjqueryplugins.com/jquery-plugin/jscrollbar
Mam problem jak ten plugin zainstalować i jak ustawić, żeby był pasek przewijania na górze lub - na dole i dodatkowy na górze?
Dostałam informację, że mam zmodyfikować szablon tej listy z fabrikiem, którą chcę wyświetlić w oknie z dodatkowym paskiem przewijania górnym.
Szablon fabrika jest w:
/var/www/moja.joomla1/components/com_fabrik/views/list/tmpl/moj_szablon1/
1. Nie byłam pewna gdzie wgrać pliki z pluginem "jscrollbar jquery" - po rozpakowaniu zipa (bo z zipa przez menedżera rozszerzeń to się nie instaluje)
- wgrałam tutaj:
/var/www/moja.joomla1/components/com_fabrik/views/list/tmpl/moj_szablon1/jScrollbar-master/jquery
w katalogu są pliki:
jquery.js
j.query-mousewheel.js
jquery-ui.js
jscrollbar.jquery.css
jscrollbar.jquery.js
jScrollbar.jquery.win.js
2. Na stronie z tym pluginem jest napisane, że trzeba zamieścić na stronie 3 części kodu - nie jest napisane w którym pliku i czy na początku pliku lub w którym innym miejscu
- myślę, że może chodzić o wpisanie tych 3 części kodu w pliku:
/var/www/moja.joomla1/components/com_fabrik/views/list/tmpl/moj_szablon1/
template_css.php
lub
/var/www/moja.joomla1/components/com_fabrik/views/list/tmpl/moj_szablon1/
default.php
Fragmenty kodu do zamieszczenia:
część1:
<!-- include CSS & JS files -->
<!-- CSS file -->
<link (http://december.com/html/4/element/link.html) rel="stylesheet" type="text/css" href="jScrollbar.jquery.css" media="screen" />
<!-- jQuery files -->
<script (http://december.com/html/4/element/script.html) type="text/javascript" src="jquery.js">
</script (http://december.com/html/4/element/script.html)>
<script (http://december.com/html/4/element/script.html) type="text/javascript" src="jquery-ui.js"></script (http://december.com/html/4/element/script.html)>
<script (http://december.com/html/4/element/script.html) type="text/javascript" src="jquery-mousewheel.js">
</script (http://december.com/html/4/element/script.html)>
<script (http://december.com/html/4/element/script.html) type="text/javascript" src="jScrollbar.jquery.js"></script (http://december.com/html/4/element/script.html)>
część2:
<!-- Main container -->
<div (http://december.com/html/4/element/div.html) class="jScrollbar">
<!-- Scrolling content container -->
<div (http://december.com/html/4/element/div.html) class="jScrollbar_mask">
<p (http://december.com/html/4/element/p.html)> <!-- Your long content here -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...
</p (http://december.com/html/4/element/p.html)> </div (http://december.com/html/4/element/div.html)>
<!-- slider container -->
<div (http://december.com/html/4/element/div.html) class="jScrollbar_draggable">
<!-- slider -->
<a (http://december.com/html/4/element/a.html) href="#" class="draggable"></a (http://december.com/html/4/element/a.html)> </div (http://december.com/html/4/element/div.html)>
<!-- don't forget to clear the floats -->
<div (http://december.com/html/4/element/div.html) class="clr">
</div (http://december.com/html/4/element/div.html)> </div (http://december.com/html/4/element/div.html)>
część3:
<script type="text/javascript">
$(document).ready(function(){
// simple jScrollbar plugin call
$('.jScrollbar').jScrollbar();
// more complex jScrollbar plugin call
$('.jScrollbar').jScrollbar({
scrollStep : 25,
position : 'left',
showOnHover : true
});
}); </script>
Może ktoś jest bardziej doświadczony z pluginem "JScrollbar jquery" i mógłby podać wskazówkę jak ten plugin zainstalować i jak zrobić ten dodatkowy poziomy pasek przewijania na górze?
Może być wskazówka jak to zrobić dla okna z artykułem Joomli (zamiast okna z listą fabrika - bo tego chyba rzadziej ktoś używa) - żeby był dodatkowy pasek przewijania poziomego na górze. Używam na Joomli podstawowych szablonów beez_5 i beez_20.
Poczytałam trochę w google w temacie jquery ale trudno mi z tego zorientować się jak należy mój plugin zainstalować i jak skonfigurować, żeby był dodatkowy pasek przewijania na górze.