VPF::в форме списка select картинки - Форум программистов

gcc

Дата 9.1.2011, 15:09 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17

http://jqueryui.com/demos/position/

на сайте jqueryui там где выбираем тему оформления, в спике есть картинки...

как сделать, тоже, самое, чтобы картинки вставить в такой же список?

я посмотрел исходники странциы и не нашел как эти картинки оказались в этом списке
...картинки ~100px на 100px хотел вставить

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

Amphiluke

Дата 9.1.2011, 16:35 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112

Они вставляются динамически вот этим скриптом.

Добавлено через 4 минуты и 44 секунды
Соответственно вот, кажется, доки…

gcc

Дата 9.1.2011, 16:51 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17

сейчас попробую, вот это они тут:
http://jqueryui.com/themeroller/themeswitchertool/

Код


//markup 
    var button = $('.................

а функциями подгружу... которые там...

а тут http://jqueryui.com/docs/Theming/ThemeSwitcher где сами картинки?

я хочу свои картинки поставить

Это сообщение отредактировал(а) gcc - 9.1.2011, 16:53

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

Amphiluke

Дата 9.1.2011, 17:18 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112

Цитата(gcc @ 9.1.2011, 19:51

)

а тут http://jqueryui.com/docs/Theming/ThemeSwitcher где сами картинки?я хочу свои картинки поставить

Похоже, что они жестко в тот скрипт вшиты. Тогда нигде это не настраивается. Прямо в скрипте правьте... smile

gcc

Дата 14.1.2011, 10:35 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17

Amphiluke, как сделать, чтобы при нажатии на картинку со ссылкой был редирект?

(как сделать редирект я знаю)

я искал в коде и не мог понять куда вставить или как "забиндить" кликабельность ссылки...

пробовал:

Код


   $(".menu_click").click(function(){

    top.location.href = $(".menu_click").attr('href');
        
    });

в консоле firefox ничего не было...

Это сообщение отредактировал(а) gcc - 14.1.2011, 10:35

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

нуп

Дата 14.1.2011, 19:32 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Код


 $(".menu_click").click(function(){
    top.location.href = $(this).attr('href');
        
    });

Так наверное

gcc

Дата 15.1.2011, 05:42 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17

нет, не работает:

Код


.................

    //markup 
    var button = $('<a href="#" class="jquery-ui-themeswitcher-trigger"><span class="jquery-ui-themeswitcher-icon"></span><span class="jquery-ui-themeswitcher-title">'+ options.initialText +'</span></a>');
    var switcherpane = $('<div class="jquery-ui-themeswitcher">    <div id="themeGallery">    <ul>    <li><a class="menu_click" href="http://jqueryui.com/themeroller/css/parseTheme.css.php">            <img src="http://www.x0.org.ua/images/79/thumbnail/2118.jpg" alt="UI Lightness" title="UI Lightness" />                    <span class="themeName">UI lightness</span>        </a></li>    <li><a class="menu_click" href="http://jqueryui.com/themeroller/css/parseTheme.css.php">            <img src="http://www.x0.org.ua/images/79/thumbnail/2118.jpg" alt="UI Lightness" title="UI Lightness" />                    <span class="themeName">UI lightness</span>        </a></li>                            </ul>                            </div></div>').find('div').removeAttr('id');

 $(".menu_click").click(function(){
    top.location.href = $(this).attr('href');
        
    });


.............

попробуй нажать там где комментарии:
http://www.x0.org.ua/photo/view/79/2120
(на самой странице кода много)
(но когда я нажимаю, то не работает, в консоле нету ничего...)

Это сообщение отредактировал(а) gcc - 15.1.2011, 05:53

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

gcc

Дата 15.1.2011, 08:23 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17

UPD:

добавил:

Код


    /* Theme Loading
    ---------------------------------------------------------------------*/
    switcherpane2.find('a').click(function(){


        options2.onSelect();
        if(options2.closeOnSelect && switcherpane2.is(':visible')){
                    top.location.href = $(this).attr('href'); 
        switcherpane2.spHide(); }
        return false;
    });

Код


                    top.location.href = $(this).attr('href');

UPD2:

есть вопрос:

я хочу поставить несколько таких списков...
из поставил...

но когда нажимаю на левый список, то открывается правый список...
http://www.x0.org.ua/photo/view/79/2120 (там где комментарии)

я все классы поменял на другие имена...
Но оно все равно открывает правый список, тогда когда нажимаю на левый...
как это исправить?

исходники:

Код


  <script>
  $(document).ready(function(){
    $('#switcher').themeswitcher();

    $('#switcher2').themeswitcher2();
    
  });
  </script>

Код


 <tr><td  align='center' > 
<div id="switcher"></div>
</td><td  align='center' > 
<div id="switcher2"></div>
</td></tr>

Код




<script type="text/javascript">
/* jQuery plugin themeswitcher
---------------------------------------------------------------------*/


$.fn.themeswitcher2 = function(settings2){
    var options2 = jQuery.extend({
        loadTheme: null,
        initialText: 'Switch Theme',
        width: 150,
        height: 200,
        buttonPreText: 'Theme: ',
        closeOnSelect: true,
        buttonHeight: 14,
        cookieName: 'jquery-ui-theme',
        onOpen: function(){},
        onClose: function(){},
        onSelect: function(){}
    }, settings2);

    //markup 
    var button = $('<a href="#" class="jquery-ui-themeswitcher-trigger2"><span class="jquery-ui-themeswitcher-icon2"></span><span class="jquery-ui-themeswitcher-title2">'+ options2.initialText +'</span></a>');
    var switcherpane2 = $('<div class="jquery-ui-themeswitcher2">    <div id="themeGallery2">    <ul>    <li><a href="http://www.x0.org.ua/photo/view/79/21210">            <img src="http://www.x0.org.ua/images/79/thumbnail/2121.jpg" alt="UI Lightness" title="UI Lightness" />                    <span class="themeName">UI lightness</span>        </a></li>    <li><a href="http://www.x0.org.ua/photo/view/79/2122">            <img src="http://www.x0.org.ua/images/79/thumbnail/2122.jpg" alt="UI Lightness" title="UI Lightness" />                    <span class="themeName">UI lightness</span>        </a></li>                            </ul>                            </div></div>');



    //button events
    button.click(
        function(){
            if(switcherpane2.is(':visible')){ switcherpane2.spHide(); }
            else{ switcherpane2.spShow(); }
                    return false;
        }
    );
    
    //menu events (mouseout didn't work...)
    switcherpane2.hover(
        function(){},
        function(){if(switcherpane2.is(':visible')){$(this).spHide();}}
    );

    //show/hide panel functions
    $.fn.spShow = function(){ $(this).css({top: button.offset().top + options2.buttonHeight + 6, left: button.offset().left}).slideDown(50); button.css(button_active); options2.onOpen(); }
    $.fn.spHide = function(){ $(this).slideUp(50, function(){options2.onClose();}); button.css(button_default); }
    
        
    /* Theme Loading
    ---------------------------------------------------------------------*/
    switcherpane2.find('a').click(function(){


        options2.onSelect();
        if(options2.closeOnSelect && switcherpane2.is(':visible')){
                    top.location.href = $(this).attr('href'); 
        switcherpane2.spHide(); }
        return false;
    });
    
    //function to append a new theme stylesheet with the new style changes
    function updateCSS(locStr){
        var cssLink = $('<link href="'+locStr+'" type="text/css" rel="Stylesheet" class="ui-theme" />');
        $("head").append(cssLink);
    
        
        if( $("link.ui-theme").size() > 3){
            $("link.ui-theme:first").remove();
        }    
    }    
    
    /* Inline CSS 
    ---------------------------------------------------------------------*/
    var button_default = {
        fontFamily: 'Trebuchet MS, Verdana, sans-serif',
        fontSize: '11px',
        color: '#666',
        background: '#eee url(http://jqueryui.com/themeroller/themeswitchertool/images/buttonbg.png) 50% 50% repeat-x',
        border: '1px solid #ccc',
        '-moz-border-radius': '6px',
        '-webkit-border-radius': '6px',
        textDecoration: 'none',
        padding: '3px 3px 3px 8px',
        width: options2.width - 11,//minus must match left and right padding 
        display: 'block',
        height: options2.buttonHeight,
        outline: '0'
    };
    var button_hover = {
        'borderColor':'#bbb',
        'background': '#f0f0f0',
        cursor: 'pointer',
        color: '#444'
    };
    var button_active = {
        color: '#aaa',
        background: '#000',
        border: '1px solid #ccc',
        borderBottom: 0,
        '-moz-border-radius-bottomleft': 0,
        '-webkit-border-bottom-left-radius': 0,
        '-moz-border-radius-bottomright': 0,
        '-webkit-border-bottom-right-radius': 0,
        outline: '0'
    };
    
    
    
    //button css
    button.css(button_default)
    .hover(
        function(){ 
            $(this).css(button_hover); 
        },
        function(){ 
         if( !switcherpane2.is(':animated') && switcherpane2.is(':hidden') ){    $(this).css(button_default);  }
        }    
    )
    .find('.jquery-ui-themeswitcher-icon').css({
        float: 'right',
        width: '16px',
        height: '16px',
        background: 'url(http://jqueryui.com/themeroller/themeswitchertool/images/icon_color_arrow.gif) 50% 50% no-repeat'
    });    
    //pane css
    switcherpane2.css({
        position: 'absolute',
        float: 'left',
        fontFamily: 'Trebuchet MS, Verdana, sans-serif',
        fontSize: '12px',
        background: '#000',
        color: '#fff',
        padding: '8px 3px 3px',
        border: '1px solid #ccc',
        '-moz-border-radius-bottomleft': '6px',
        '-webkit-border-bottom-left-radius': '6px',
        '-moz-border-radius-bottomright': '6px',
        '-webkit-border-bottom-right-radius': '6px',
        borderTop: 0,
        zIndex: 999999,
        width: options2.width-6//minus must match left and right padding
    })
    .find('ul').css({
        listStyle: 'none',
        margin: '0',
        padding: '0',
        overflow: 'auto',
        height: options2.height
    }).end()
    .find('li').hover(
        function(){ 
            $(this).css({
                'borderColor':'#555',
                'background': 'url(http://jqueryui.com/themeroller/themeswitchertool/images/menuhoverbg.png) 50% 50% repeat-x',
                cursor: 'pointer'
            }); 
        },
        function(){ 
            $(this).css({
                'borderColor':'#111',
                'background': '#000',
                cursor: 'auto'
            }); 
        }
    ).css({
        width: options2.width-30,
        height: '',
        padding: '2px',
        margin: '1px',
        border: '1px solid #111',
        '-moz-border-radius': '4px',
        clear: 'left',
        float: 'left'
    }).end()
    .find('a').css({
        color: '#aaa',
        textDecoration: 'none',
        float: 'left',
        width: '100%',
        outline: '0'
    }).end()
    .find('img').css({
        float: 'left',
        border: '1px solid #333',
        margin: '0 2px'
    }).end()
    .find('.themeName').css({
        float: 'left',
        margin: '3px 0'
    }).end();
    


    $(this).append(button);
    $('body').append(switcherpane2);
    switcherpane2.hide();


    return this;
};







</script>

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

gcc

Дата 15.1.2011, 09:16 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17

UPD3:

сделал!
http://www.x0.org.ua/photo/view/79/2120

надо было изменить имена этих функций в другом списке:

Код


    $.fn.spShow = function(){ $(this).css({top: button.offset().top + options.buttonHeight + 6, left: button.offset().left}).slideDown(50); button.css(button_active); options.onOpen(); }
    $.fn.spHide = function(){ $(this).slideUp(50, function(){options.onClose();}); button.css(button_default); }

т.е. поставить:
$.fn.spShow2
$.fn.spHide2

Добавлено @ 09:19
кстати, вот если кому-то интересно есть еще вариант:

http://tutorialzine.com/2010/11/better-select-jquery-css3/
демо: http://demo.tutorialzine.com/2010/11/bette...ect-jquery.html

только, он не такой, а не много другой...

Это сообщение отредактировал(а) gcc - 15.1.2011, 09:39

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »