JQuery арқылы жинақталған тізім жасау

Алдымен, жинақталған тізім қалай болатынын мына сілтемені басу арқылы көрсеңіз болады. Сілтемені ашқан соң, көк иконкасы бар тексттерді шертіңіз
karmey.kz/index.html#for_codeo

Бұл тізімді жасау үшін, мен осы сілтемедегі нұсқаулықты пайдаландым:
tuljo.com/web-development/expanding-collapsing-sliding-div-jquery

Алдымен, HTML парақтың HEAD бөлімінің ішіне кітапхананы жариялаймыз:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>


Менде тізім көп болғандықтан, Slider 5 мысалын пайдаландым.

Осы Slider 5 мысалындағы кодтарға түсіндірме жаза кетейін. Сіз
Slide one, click to reveal

Slide two, click to reveal

Slide three, click to reveal — деп аталатын үш мысалды шертіп шыққанда, бір-біріне кедергі жасамай, әрқайсысының ішіндегі тізім ашылғанда, орнын босатып беретінін байқадыңыз. Төмендегі кодтарды 
<script type="text/javascript"> осы жерге қойып </script>
HEAD бөлімінің ішіне жариялайсыз:
$(document).ready(function(){
	$('.panel-36').hide();
	$('.toggler-36').click(function()
	{
		$(this).next('.panel-36').slideToggle(600);
	});
});
бөлігін, HEAD бөлімінің ішіне және орналастыру арқылы жария етіңіз. Кейін, BODY тегінің ішіне,
<h3 class="toggler-36">Slide one, click to reveal</h3>
<p class="panel-36">Slide one lorem ipsum opsum, lorem ipsum dopsum...</p>
<h3 class="toggler-36">Slide two, click to reveal</h3>
<p class="panel-36">Slide two lorem ipsum opsum, lorem ipsum dopsum...</p>
<h3 class="toggler-36">Яғни, бұл бізде негізгі текст</h3>
<p class="panel-36">Ал бұл текстті шерткенде ашылатын ішкі текст...</p>

кодын орналастырасыз.

Кейін, бұл текст ашылатынын адамға түсіндіру үшін, тізімнің жанына кішкентай үшбұрыш белгі суретін орналастырамыз.

Ол белгі сурет мынау болды:

www.journeys.travel/images/familytrips/iconExpandArrow16.gif

Бұларды реттелмеген тізім ретінде жариялаймыз:
<ul>
<li class="toggler-36">Расширительные баки</li>
<p class="panel-36">Для отопления, для водоснабжения, накопители для воды</p>

<li class="toggler-36">Облицовочные материалы</li>
<p class="panel-36">Керамогранит, травертин, облицовачные кирпичи, китайская облицовка сайдинг с утеплителем</p>

<li class="toggler-36">Напольные покрытия</li>
<p class="panel-36">Линолеум, паркет, кафель</p>
</ul>


Ал, CSS арқылы тізім суретін нұсқаймыз:
ul 
{
list-style-image:url('images/expand.gif');
}


Тізімнің биіктік бойынша арақашықтығын 5 пискель етеміз:
li
{
padding-top: 5px;
}


Осы пост бойынша сұрақтар болса, пікір ретінде қалдырыңыздар. Оқырманмен пікір алмасу, мен үшін мәртебе. Рақмет!
  • +2
38 пікір
raimbek
Былай жасауға кеңес берем, шертілетін элементтер түсін өзгертіп, келесідей стиль падалану, сонда нені басу керектігі түсінікті болады:

li {
  padding-top: 5px;
  cursor:pointer;
}


Кейін, элементтерді ашқан кезде текст блоктан шығып кетіп жатыр (chrome):

overflow:scroll — пайдаланған дұрыс болар немесе тағы басқа нәрсе.

Менде қызық ой туып тұр. Осы құрал арқылы li-элементін басқан кезде, ашылатын жердегі материал ajax арқылы тартылатын етіп істеуге болады ма?
nurzhol
Осы пікір, сайт стиліне 
cursor:pointer;
параметрін қосуға және шрифтті серверге жүктеу арқылы қате көріністі түзетуге себеп болды. Рақмет!
raimbek
Тағы бір ой, біреуін ашқан кезде қалғандары жабылатын ету керек, сонда блок сыртына шығып кетпейді ;-)
anonym
Осы құрал арқылы li-элементін басқан кезде, ашылатын жердегі материал ajax арқылы тартылатын етіп істеуге болады ма?
2-3 менюді ажакспен???
raimbek
Неге тек меню? мысалы бұл компонентті басқа көп жерде пайдалануға болады, мүмкіндіктер тек фантазиямен шектелген. Мысалы, сондай қолданылуларда егер ашылғанда көп мәлімет көрсетілетін болса, оларды тек қолданушы компонентті басқанда ғана серверден тартылатын етіп ашу өте пайдалы. Мен сізге көрсете алмаймын (коммерциялық құпия) біраұ біздің продукттің көп жерінде сондай нәрселер пайдаланылады.
anonym
Мен сізге көрсете алмаймын (коммерциялық құпия) біраұ біздің продукттің көп жерінде сондай нәрселер пайдаланылады.
Қалай аталады сіздің продукт?
raimbek
Arta Synergy документайналымға арналған.
anonym
Жава кодермін де, қайдан көруге болады демонстрациясын продуктілеріңнің?
raimbek
Жоқ мен кодер емес тестермін, автотесттер жазамын. Мұнда қарауға болады. Бірақ ондай ескі интерфейс, тенденция бойынша плоский дизайнға көшіп жатырмыз )
anonym
ІШ пыстыратын жұмыс қой ))
Чат Жаббермен ба?
raimbek
"ІШ пыстыратын" ??? мен бұл туралы мақала жазуым керек сияқты, сіз мамандықты дұрыс түсінбей тұрған сияқтысыз.
«Чат Жаббермен ба?» иә, бірақ оның не қатысы бар? жаббер негізі көптеген компаниялар үшін өте жақсы шешім. Біз үшін де )
anonym
сіз мамандықты дұрыс түсінбей тұрған сияқтысыз.
Мүмкін, жазшы мақала. Қандай саймандар қолданасың автоматтандыру үшін тағысын тағы
anonym
Меню ашылған кезде иконка төмен қарау керек, соңғы менюлерді қатар ашсаң ең астыңғысы көрінбей қалады. Клиентке ұнай қоймайды ау
nurzhol
Бұл жерде дизайнердің де қателігі бар. Ол осылай ашылатын менюді ескермепті. Енді, уақыт болса осыған бір қайта қарап жіберермін. Клиент қуанып қабылдап алды.
yerbol89
LANDING PAGE қазіргі уақытта жақсы белең алды.
Нұреке нұсқаулыққа үлкен рахмет. Өз ойымды қоса кетсем. Менің интернетім супер-пупер жылдам болмаса да 3,39 мб суретті жүктеуде мамалап кетті :)
Жалпы статистикаға жүгінсек негізгі браузердің ені орташа 1366 пиксел.

Яғни LANDING PAGE суреттің ені 1900, оны 1366 өзгертіп jpg сақтасақ сәл-сәл болса да сайт жылдам ашылатын еді.

Мынау енді бөлек әңгіме :)
raimbek
Негізі фонға бүкіл бір сурет қоя салу маған ұнамайды, кейін заманауи дизайнда ол үрдіс қалған сияқты.
nurzhol
Дизайнерді ату керек XD
Abylai_adil 
$(document).ready(function(){
        $('.toggler-36').click(function()
        {
                $('.panel-36').hide();
                $(this).next('.panel-36').slideToggle(600);
        });
});

Осылай жасаш брат, клик басылғанда, ашық тұрған барлық $('.panel-36') элементтерді жауып отырсаң дұрыс болатын сияқты
Abylai_adil
ан нет. қате мынау қазір дұрыстаймын
Abylai_adil
$(document).ready(function(){
$('.panel-36').hide();
$('.toggler-36').click(function()
{
$(this).next('.panel-36').slideToggle(600);
$('.panel-36').not($(this).next('.panel-36')).hide();
});
});
Осылай болу керек сияқты
raimbek
Стандартты библиотека арқылы, бұл функционалды жасауға болмай ма сонда?
Abylai_adil
Jquery-сіз ба?
raimbek
А жоқ, мен қате түсініп отырм, мен jquery үстінен тағы басқа библиотека пайдаланылып жатыр екен десем. Онда, иә, сеніңкі дұрыс.
nurzhol
Қостым, болмайды екен. Автоматты түрде жиналып жатыр. :)

Сілтеме:
karmey.kz/amigo/
Abylai_adil
Осылай
$('.panel-36').hide();
$('.toggler-36').click(function()
{ 
    $(this).next('.panel-36').slideToggle(600);
    $('.panel-36').not($(this).next('.panel-36')).slideUp(600);
});
nurzhol
nea. Hide ne katit, konflikt jane onin maksati bul jerde baskasha, sebebi jabilatin class id bolek sodan bolar
nurzhol
Оффтоп:
Амиголар, мына жердегі:
archigraphic.kz/slide-afari слайдердің элементтері сопақ болып тұр, таза домалақ ете алмай жатырмын CSS арқылы. Кім себебі таба алар екен?
raimbek
Сенде элемент (ms-thumb-frame) биіктігі 80px сондықтан солай көрініп тұр, height: 100px; деп көрсет те сыртқы блоктың да биіктігін үлкейт, сонда дөңгелек болады.
raimbek
міне саған дөңгелектер )):
Abylai_adil
.ms-thumb-frame width: 80px;
nurzhol
Уа, игі жанды христиан бауырлар! Очм Рысбек пен Абылайдың жазған пікірі болмайды екен. Таңертең сондай идея келген, ол болмайды екен. Ширинасы қандай классқа қалайша меншіктелгені түсініксіз болып тұр XD
anonym
Уа, игі жанды христиан бауырлар!
Неге бұлай? Бұл сайтта тек христиандар отыра ма?
kamyrov
Қалжындап айтқаны ғой), бер жақта діни аразылыққа жол жоқ, тек IT жөнінен қырылысуға болады;)
Abylai_adil
Ширинасы тікелей мастерслайдер скрипты арқылы меншіклеріп тұр, мына жерін тауып алып, width:80 деп өзгертіп көрші. Сосын хабарын айт
nurzhol
Лібә, ішіп кетуге шақ қалдым. Барлық файлды сілкіп шықтым, қайда сол бір МӘН??? (((
Abylai_adil
бұл скриптты қолмен қосқан болсаң, сол қосылған жерде тұр, егер уордпрес плагині болса, плагиннің баплауларынан іздеп көр
nurzhol
Ура, ура! Табылды, амиго!

Суреттегі кнопка басылады деп ойламадым. Өмірден түңілеееп, шұқееп отсам, ананы байқамай басып қалғам ғой, ашылып кетпесі бар ма, е мое)
Тек тіркелген қолданушылар ғана пікір қалдыра алады.