Использование jQuery UI в Bookmarklet - PullRequest
Новая
       2

Использование jQuery UI в Bookmarklet

2 голосов
/ 30 июня 2011

В CoffeeScript этот код почти идентичен JavaScript: 

tabs_html = "<div id='nm-container'><ul><li><a href='#tabs-1'>Guidelines</a></li><li><a href='#tabs-2'>Test</a></li></ul>
            <div id='tabs-1'><p>something1</p></div><div id='tabs-2'><p>something2</p></div></div>"
$("#nm-toolbar").append(tabs_html)
$("#nm-container").tabs()

Это не работает. Самое смешное, что он работает при попытке последней строки: $("#nm-container").tabs() с консоли. Я прилагаю полный код ниже. Обратите внимание, что я использую CoffeeMarklet для создания букмарклета, который работает только на Chrome. 

s1 = window.document.createElement('script')
s1.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'
window.document.body.appendChild(s1)

$ ->

    s2 = window.document.createElement('script')
    s2.src = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'
    window.document.body.appendChild(s2)

    jqueryUIcss = window.document.createElement('link')
    jqueryUIcss.rel = 'stylesheet'
    jqueryUIcss.type = 'text/css'
    jqueryUIcss.href = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/blitzer/jquery-ui.css'
    window.document.head.appendChild(jqueryUIcss)

    if $("#nm-toolbar").length == 0
        toolbar = "<div id='nm-toolbar'></div>"
        $("body").append(toolbar)
        $("#nm-toolbar").css({
            'background':               '#fafafa',
            'height':                   '500px',
            'width':                    '400px',
            'position':                 'fixed',
            'bottom':                   '0px',
            'right':                    '20px',
            'padding':                  '5px'
        })

        tabs_html = "<div id='nm-container'><ul><li><a href='#tabs-1'>Guidelines</a></li><li><a href='#tabs-2'>Test</a></li></ul>
            <div id='tabs-1'><p>something1</p></div><div id='tabs-2'><p>something2</p></div></div>"
        $("#nm-toolbar").append(tabs_html)
        $("#nm-container").tabs()

Ответы [ 2 ]

5 голосов
/ 30 июня 2011

Я подозреваю, что проблема в том, что вы загружаете jQuery UI асинхронно. Линия 

window.document.body.appendChild(s2)

начинает загрузку jQuery UI, но ваш код продолжается до того, как обязательно будет загружен jQuery UI. Это объясняет, почему вызов tabs() в вашем коде завершился неудачно, но успешно, когда вы делаете это из консоли, после того, как скрипт успел загрузить.

Вы сможете исправить это, запустив остальную часть кода из обратного вызова 

s2.onreadystatechange = ->
  return unless @readyState is 'complete'
  # the rest of the code goes here

Редактировать : И в этом отношении, вы действительно должны сделать то же самое с s1, иначе вызов $ -> может завершиться ошибкой. Тот факт, что он успешно выполняется, говорит о том, что либо в вашем браузере кэширована jQuery, либо на странице уже есть jQuery. Вам также следует использовать noConflict, чтобы избежать перезаписи существующей версии jQuery страницы. Запуск jQuery Code Bookmarklet , с которым связан Acorn, выполняет все эти действия (и в более кросс-браузерной манере, чем код в этом ответе).

3 голосов
/ 01 июля 2011

Это должно работать: 

((window, document, requirements, callback) ->
    getScript = (url, callback) ->
        script = document.createElement('script')
        script.src = url
        head = document.documentElement.childNodes[0]
        done = false
        script.onload = script.onreadystatechange = ->
          if not done and (not (readyState = @readyState) or readyState == 'loaded' or readyState == 'complete')
            done = true
            callback()
            script.onload = script.onreadystatechange = null
            head.removeChild script

        head.appendChild script

    if not ($ = window.jQuery) or requirements['jq'] > $.fn.jquery
        getScript 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js', ->
            getScript 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js', ->
                callback window.jQuery.noConflict(1)
    else
        if not (jqui_version = window.jQuery.ui.version) or requirements['jqui'] > jqui_version
            getScript 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js', ->
                callback window.jQuery.noConflict(1)
        else
            callback window.jQuery.noConflict(1)

) window, document, {jq: '1.6.1', jqui: '1.8.7'}, ($) ->
    # Your code goes here:
    alert "jq: #{$.fn.jquery}, jqui: #{$.ui.version}"

Вы хотели бы снять флажок с «добавить jQuery» на странице CoffeeMarklet, если используете вышеуказанный код

Обновление: Добавлена ​​проверка на наличие jQuery и jQuery UI, чтобы он не загружался без необходимости.

Хотя это можно улучшить, проверив, присутствует ли правильная версия jQuery, как код Бена Алманса.

Attribution:

Бейги дал прекрасный фрагмент для загрузки ресурсов javascript один за другим.

...