JQuery темы не работают

Есть идеи, почему тема jquery ui не работает в jsfiddle, но работает на моем локальном хосте?

http://jsfiddle.net/oshirowanen/UxvaG/

3 ответа

Решение

JS ожидает класс портлета, в то время как HTML использует класс виджета.

Вы должны пропустить немного CSS, используйте ThemeROller

Загрузка темы ThemeRoller. Самый простой способ создать тему - использовать ThemeRoller для создания и загрузки темы. Это приложение создаст новый файл ui.theme.css и каталог изображений, содержащий все необходимые фоновые изображения и спрайты значков, которые можно просто добавить в ваш проект. Этот подход будет проще всего создавать и поддерживать, но он ограничивает настройку параметрами, предоставляемыми в ThemeRoller.

ссылка

Удалить $(document).load обертка или шейдж, чтобы перевернуть его из выпадающего списка слева. http://jsfiddle.net/UxvaG/1/

        $( ".column" ).sortable({
            connectWith: ".column"
        });

        $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
            .find( ".portlet-header" )
                .addClass( "ui-widget-header ui-corner-all" )
                .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
                .end()
            .find( ".portlet-content" );

        $( ".portlet-header .ui-icon" ).click(function() {
            $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
            $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
        });

        $( ".column" ).disableSelection();

Если вы выберете onLoad в левом углу, где вы выбираете lib, тогда jsfiddle автоматически обернет код внутри $(document).load({})

Другие вопросы по тегам