prev/next iconos que no se muestran en el tema jquery datepicker personalizado

Question

Implementé jQuery DatePicker en mi proyecto VS2010 y funciona bien con un pequeño problema. Cuando implementé un tema personalizado, perdí mis iconos previos y siguientes (para pasar de los meses).

Aquí está la imagen:

Estas son las referencias de biblioteca jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
<script type="text/javascript" src="~/lightbox/js/prototype.js"></script> 
<script type="text/javascript" src="~/lightbox/js/scriptaculous.js?load=effects,builder"></script> 
<script type="text/javascript" src="~/lightbox/js/lightbox.js"></script> 
<link type="text/css" rel="stylesheet" href="~/lightbox/css/lightbox.css" media="screen" /> 
<link type="text/css" rel="Stylesheet" href="~/Scripts/jquery-ui-1.8.9.custom.css" /> 

Aquí están mis referencias de imagen en jquery-ui-1.8.9-custom.css

/* states and images */ 
.ui-icon { width: 16px; height: 16px; background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); } 
.ui-widget-content .ui-icon {background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); } 
.ui-widget-header .ui-icon {background-image: url(~/images/jquery/ui-icons_d8e7f3_256x240.png); } 
.ui-state-default .ui-icon { background-image: url(~/images/jquery/ui-icons_6da8d5_256x240.png); } 
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(~/images/jquery/ui-icons_217bc0_256x240.png); } 
.ui-state-active .ui-icon {background-image: url(~/images/jquery/ui-icons_f9bd01_256x240.png); } 
.ui-state-highlight .ui-icon {background-image: url(~/images/jquery/ui-icons_2e83ff_256x240.png); } 
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(~/images/jquery/ui-icons_cd0a0a_256x240.png); } 

Modifiqué la ruta para asegurarme de que apuntaba a los archivos. No estoy seguro de lo que me estoy perdiendo.

Cualquier ayuda sería muy apreciada.

Gracias.

Answer 1

¿Estás seguro de que tus rutas están apuntando correctamente (AKA, estás viendo los íconos de la interfaz de usuario de jQuery en otro lugar de tu sitio)? Eso es lo primero que verificaría ... sobre todo porque modificó el camino. Es posible que inadvertidamente haya jodido algo.

actualización

Creo que se necesita para arreglar sus caminos - No creo que están apuntando correctamente. Por lo que veo, tienen que ser relativos a su archivo .custom.css. Entonces, por ejemplo, mi archivo jquery-ui-1.8.9.custom.css existe en mi carpeta de contenido. Mis estados y las imágenes se hace referencia como esto:

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); } 

Por lo tanto, tengo que colocar una carpeta de imágenes al mismo nivel que el jquery-ui-1.8.9.custom.css y colocar todas las imágenes dentro de esa carpeta . Pruébalo y ve si te soluciona el problema.

Answer 2

Tuve el mismo problema. Creé un directorio de imágenes bajo el nombre de mi tema y arrastré todos los archivos gif y png desde el tema al nuevo directorio de imágenes. funcionó como un encanto, sin jugar con los caminos.

Creo que la aplicación themeroller en JQuery_ui no empaqueta las imágenes en un directorio de imágenes, y debería.

De todos modos, invierta su ruta de regreso a la forma en que estaba, y pruébela. Buena suerte.

Por cierto, parece que pones tu custom.css en tu carpeta de scripts, eso se pone complicado, simplemente apunté el mío a la copia de la carpeta de temas. es decir

enlace href = "../../ content/themes/humanidad/jquery-ui-1.8.13.custom.css" rel = "stylesheet" type = "text/css"

Answer 3

I también estaba teniendo este problema. Estaba tirando de mi cabello. Pero sí, JasCav es correcto, debe poner una carpeta de "imágenes" en el mismo nivel que su archivo query-ui-1.8.9.custom.css (o en mi caso jquery-ui-1.8.16.custom.css) . Y dentro de esta carpeta, copie sus archivos * .png de su descarga de jquery ui.

Answer 4

Tuve exactamente el mismo problema y finalmente lo resolví.

El problema provenía de los derechos en el directorio 'images'. Tenía que hacer que el directorio navegable para los 'otros' usando chmod:

chmod o+rx images 

espero que esto ayude a

Answer 5

También fue víctima de esto. He leído las respuestas dadas anteriormente y no cuentan al 100% con mi experiencia a partir de julio de 2012. No sé si la UI ThemeRoller personalizada se ha modificado en absoluto desde que se planteó esta pregunta por primera vez, lo que puede explicar los comentarios/respuestas anteriores. . Sin embargo, para mí estas respuestas complican más lo que se debe hacer y, por lo tanto, fueron una confusión para mí.

Lo que funcionó para mí: -

1. Uso ThemeRoller para crear su tema personalizado.
2. Descargue el tema, por ejemplo, al directorio my_Work_Area fuera de su proyecto.
3. Descomprime la descarga en my_Work_Area
4. Revisa el index.html después de descomprimir: comprueba que el estilo de datepicker refleje el estilo probado en el ThemeRoller. Si no, vuelve al ThemeRoller y repite 1-3.
5. copia my_Work_Area/JS/jQuery-UI-1.8.21.custom.min.js a su carpeta de jQuery dentro de su proyecto, por ejemplo _PUBLIC/_jquery/jquery-ui-1.8.21.custom.min.js
6. si es necesario, copie jquery-1.7.2.min.js
7. copie my_Work_Area/css/custom-theme/jquery-ui-1.8.21.custom.css en su carpeta css dentro de su proyecto, por ejemplo _public/_css/jquery -ui-1.8.21.custom.css
8. copiar los my_Work_Area carpeta/css/medida de atracciones/imágenes a su carpeta css dentro de su proyecto, por ejemplo _PUBLIC/_css/imágenes

9. según la documentación asegurar que la siguiente está incluido en tu html

   <link rel="stylesheet" type="text/css" href="../_public/_css/jquery-ui-1.8.21.custom.css" /> 
   <script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script> 
   <script type="text/javascript" src="../_public/_jquery/jquery-ui-1.8.21.custom.min.js"></script> 
   

Eso es todo lo que tiene que hacer.

Si es apropiado tener una carpeta llamada imágenes dentro de su carpeta css puede ser necesario considerar. Cambiar la ubicación de esta carpeta implicaría considerar las rutas utilizadas.

Pero si lo que desea es que la interfaz de usuario trabaje "de fábrica", lo anterior funciona sin necesidad de complicar nada.

Espero que esto ayude.

Answer 6

Para mí, el problema era que Themeroller estaba agregando comillas dobles alrededor de las rutas de las imágenes. Acabo de eliminar los de mi archivo CSS personalizado, y todo funcionó.

es decir, que cambió:

url("images/ui-bg_highlight-hard_100_fafaf4_1x100.png") 

a:

url(images/ui-bg_highlight-hard_100_fafaf4_1x100.png) 

lo largo de todo el archivo CSS.

Answer 7

Coloque la carpeta de imágenes con archivos de iconos, en esa ubicación, donde.existe un archivo css.

Answer 8

que la lectura de esta pregunta, Si se utiliza este selector dateime http://www.malot.fr/bootstrap-datetimepicker/

de agregar esta opción: bootcssVer: 3

$(".date").datepicker("option", "changeMonth", true, **"bootcssVer" : 3**); 

El icono se mostrará !!!

Answer 9

Déjame compartir la solución para mi caso. Mi proyecto ASP.NET MVC tiene la siguiente estructura de directorios:

• contenido
  • temas de base
    • • imágenes
        • icon1.png
        • icon2.png
      • jquery-ui.css
• Otros directorios

Cuando ejecuto la aplicación localmente a través de Visual Studio, en el archivo jquery-ui.css puedo consultar los iconos usando la siguiente url: url ("images/icon1.png"). Pero cuando ejecuto la aplicación en el servidor de Azure, debo consultar este ícono con: url ("themes/base/images/icon1.png"). Resultó que el directorio real de "trabajo"/"actual" para jquery-ui.css es Directorio de contenido. Esto es así porque en cshtml me carga jQuery-ui.css usando el paquete, que creo en la siguiente forma:

bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include("~/Content/themes/base/jquery-ui.css")); 

Parece que VS es "súper inteligente" y busca las imágenes que se hace referencia también en el interior subdirectorios.

La solución puede ser utilizar en el interior jquery-ui.css presentar la URL absoluta a las imágenes: url ("/ content/themes/base/images/icon1.png") (o ruta apropiada con relación a la directorio de contenido en mi caso, es decir url ("temas/base/images/icon1.png"), como he mencionado anteriormente) o para crear paquete con la ruta más anidada:

bundles.Add(new StyleBundle("~/Content/themes/base/cssjqryUi").Include("~/Content/themes/base/jquery-ui.css")); 

Otro (peor en mi opinoin) la solución es cargar el archivo css en cshtml usando el elemento <link>: <link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />