tutorial - Descargando la interfaz de usuario de jQuery: Ok, entonces, ¿qué parte de este desastre copio en el servidor?

que es jquery ui (5)

De los archivos "debería ser simple, pero ...": tratando de comenzar con jQuery UI. Fui al sitio, utilicé su función de constructor personalizado para ensamblar las piezas que necesitaba, me hice un tema personalizado con el rodillo de temas, descargué el archivo zip producido, lo descomprimí en mi disco local. Ok, entonces tengo 37 carpetas, 311 archivos y un total de 2.4 MB. No es posible en el infierno todo esto está sucediendo en el servidor. ¿Qué partes necesito poner allí?

''css''
- ''custom-theme'': jquery-ui-1.8.custom.css , subcarpeta ''images'' con 12 imágenes .png
''paquete de desarrollo''
- ''demos'': demos.css , index.html , más 18 subcarpetas, pero supongo que "no es necesario"
- ''documentos'': 17 archivos .html, pero de nuevo, supongo que "no es necesario"
- ''externo'': 4 archivos .js, uno .css
- ''temas'': subcarpetas ''base'' y ''tema personalizado'', cada una con 8 o 9 archivos .css y una subcarpeta ''imágenes'' con alrededor de una docena de imágenes
- ''ui'': 25 archivos .js, una subcarpeta ''i18n'' con 53 archivos .js y una subcarpeta ''minified'' con 24 archivos .js
''js'': jquery-1.4.2.min.js y jquery-ui-1.8.custom.min.js

Además, la estructura del archivo. Nuestro servidor está configurado de la siguiente manera:

raíz
- admin (herramientas administrativas)
- css
- formas (la esencia del sitio vive aquí)
- imágenes
- include (fragmentos de código asp que son utilizados por varias páginas)
- js (solo algunas cosas en este momento, como un antiguo corrector ortográfico con sibilancias)

Por lo que puedo decir, los archivos jQuery css suponen que (1) cada tema está en su propia carpeta, y (2) cada carpeta tiene su propia subcarpeta de imágenes. ¿Cómo puedo convencerlo de lo contrario? es decir, ponga los archivos .js necesarios en la carpeta ''js'', los archivos .css en la carpeta ''css'' y las imágenes en la carpeta ''images''.

En mis proyectos solo uso la carpeta css junto con su carpeta de imágenes, y el jquery-ui-1.8.custom.min.js. Si aún no está utilizando jQuery, deberá referenciarlo antes de hacer referencia al archivo jQuery UI .js. No creo que necesites nada en esa carpeta de desarrollo.

No hay problema en separar los archivos css y js, ya que los incluirá en su html de todos modos.

Para las imágenes, sin embargo, tendrá que modificar el CSS. Edite el archivo css y encuentre las referencias a imágenes como

background: url(path/to/image.jpg)

y cambiarlo a la ubicación adecuada

Normalmente copio jquery-ui-1.8.custom.css y jquery-ui-1.8.custom.min.js junto con las imágenes en mi servidor. También necesitará el archivo jquery-1.4.2.min.js si aún no lo tiene en su servidor. El resto no uso.

Si coloca las imágenes en su directorio de imágenes, no necesita cambiar nada.

Realmente no necesitas nada en el paquete de desarrollo. Contiene un montón de demos y todos los temas preconstruidos si desea experimentar con ellos.

Este enlace contiene más información sobre cómo empezar con la interfaz de usuario de jQuery: http://learn.jquery.com/jquery-ui/getting-started/

Simplemente coloque los archivos jQueryUI js en su carpeta de elección (es decir, en su servidor) y luego vincule en su marcado HTML como se muestra a continuación (y recuerde colocarlo después de que su biblioteca jQuery también haya sido incluida):

<script src="js/vendor/jquery-1.10.2.min.js"></script> <script src="js/vendor/jquery-ui-1.10.4.custom.min.js"></script>

La parte difícil es hacia dónde van las imágenes y el archivo jQueryUI css. Descubrí que la mejor ubicación para las imágenes es copiar toda la carpeta del tema personalizado en su carpeta css actual y luego vincularla a jQueryUI css desde la carpeta del tema personalizado. De esta forma, el archivo jQuery css sabrá dónde ubicar los archivos de imagen que necesita, como se muestra a continuación:

<link rel="stylesheet" href="css/custom-theme/jquery-ui-1.10.4.custom.css" />

Simplemente copia el directorio completo y el enlace a jquery-ui.css dentro de él. Recuerde que necesita su directorio de "imágenes", así que mantenga la estructura intacta, y si desea cambiar los temas, simplemente cambie el directorio.

Para editar este tema en Theme-roller

Abra dicho archivo, busque la línea 4 (YMMV) donde dice:

* To view and modify this theme, visit http://jqueryui.com/themeroller/?

Copia toda la línea, sí, es enorme, y ábrela en tu navegador. Presto, proyecto cargado