2011-02-07 2 views
9

내 VS2010 프로젝트에서 jQuery DatePicker를 구현했는데 작은 문제 하나에서 문제없이 작동합니다. 사용자 정의 테마를 구현할 때 이전 및 다음 아이콘을 잃어 버렸습니다 (몇 달 동안 이동하기 위해). 여기 preview이전/다음 아이콘이 사용자 정의 jquery datepicker 테마에 표시되지 않습니다.

는 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" /> 

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); } 

경로를 수정하여 파일을 가리키고 있는지 확인했습니다. 내가 무엇을 놓치고 있는지 모르겠다.

도움을 주시면 감사하겠습니다.

감사합니다.

답변

8

경로가 정확하게 가리키고 있습니까 (일명 jQuery UI 아이콘이 사이트의 다른 위치에 나타 납니까)? 그게 제가 확인한 첫 번째 것입니다 ... 특히 경로를 수정했기 때문입니다. 실수로 뭔가를 망칠 수도 있습니다. 나는 그들이 올바르게 가리키는 생각하지 않는다 -

업데이트

나는 당신이 당신의 경로를 수정해야합니다 생각합니다. 내가보기에 .custom.css 파일에 상대적이어야합니다. 예를 들어 내 jquery-ui-1.8.9.custom.css 파일이 내 Content 폴더에 있습니다. 내 상태와 이미지는 다음과 같이 언급하고 있습니다 :

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

따라서, 나는 JQuery와 - UI를-1.8.9.custom.css와 같은 수준에서 이미지 폴더를 배치하고 해당 폴더 안에있는 모든 이미지를 배치해야 . 그것을 시도하고 그것이 당신을 위해 문제를 해결하는지보십시오.

+0

나는 이에 동의합니다. 방금 테스트 한 것은 Image 컨트롤의 이미지 랑 같은 경로를 사용하여 페이지에 나타났습니다. 그래서 나는 그게 문제가 아니라고 믿어야 만합니다. – nycdan

+0

반면에, (페이지 소스에서) 컨트롤이 사용하려고하는 정확한 이미지 URL을 확인하는 방법이 있습니까? – nycdan

+0

고마워, Jas. 나는 곧 시험 할 것이고 그것이 효과가 있으면 확실히 받아 들일 것입니다. 그리고 이전 질문에 대한 답을 살펴보면 실제로 문제를 해결하지 못한 사람은 문제를 해결하지 못합니다. 곧 다시 확인해 드리겠습니다. – nycdan

0

같은 문제가있었습니다. 내 테마 이름 아래에 images 디렉토리를 만들고 테마의 모든 gif 파일과 png 파일을 새 이미지 디렉토리로 드래그했습니다. 매력처럼 일했고, 길을 망칠 필요가 없었습니다.

Jerery_ui의 themeroller 앱이 이미지를 이미지 디렉토리에 패키지하지 않는다고 생각합니다.

어쨌든 경로를 다시 원래대로 되돌리고 다시 사용해보십시오. 행운을 빕니다.

그런데 custom.css를 스크립트 폴더에 넣으면 지저분 해져서 방금 내 테마 폴더 사본을 가리킨 것 같습니다. 즉

링크 HREF = "../../ 콘텐츠/테마/인류/JQuery와 - UI-1.8.13.custom.css"확인해 = "스타일"유형 = "텍스트/CSS는"

3

I 또한이 문제가 발생했습니다. 나는 머리카락을 꺼내고 있었다. 그러나 예, JasCav가 정확합니다. ui-1.8.9.custom.css (또는 제 경우에는 jquery-ui-1.8.16.custom.css) 파일과 동일한 레벨에 "images"폴더를 두어야합니다 . 그리고이 폴더 안에 jquery ui 다운로드에서 * .png 파일을 복사하십시오.

1

나는 똑같은 문제가있어서 마침내 해결했습니다.

문제는 'images'디렉토리의 권한으로 인해 발생했습니다. 나는 chmod를 사용하여 '다른 사람'에 대한 디렉토리 검색 가능한했습니다 :

chmod o+rx images 

나는이

0

내가이 파울을 내렸다 도움이되기를 바랍니다. 나는 위에 주어진 대답을 읽고 2012 년 7 월 현재로 내 경험으로 100 % 집계하지 않습니다. UI 커스텀 ThemeRoller가 이전에 언급 된/대답을 설명 할 수있는이 질문을 처음으로 제기했기 때문에 전혀 변경되지 않았는지 모르겠습니다. . 그러나 나에게이 대답은 끝내야 할 일을 복잡하게 만들었고 따라서 나에게 혼란 스러웠다. 나를 위해 일한 무엇

: -

  1. 사용 ThemeRoller 당신에게 사용자 정의 테마를 만들 수 있습니다.
  2. 테마를 다운로드합니다 (예 : 프로젝트 외부의 디렉토리 my_Work_Area).
  3. 다운로드를 my_Work_Area에 압축 해제
  4. 압축 해제 후 index.html을 검토하십시오. datepicker 스타일이 ThemeRoller에서 테스트 된 스타일을 반영하는지 확인하십시오. ThemeRoller로 돌아가서 1-3을 반복하십시오.
  5. 는 my_Work_Area/JS/JQuery와 - UI-1.8.21.custom.min.js 예를 들어 프로젝트 내에서 JQuery와 폴더에 _public/_jquery/JQuery와 - UI-1.8.21.custom.min.js
  6. 복사 필요한 경우 유사하게 jquery-1.7.2.min.js를 복사하십시오.
  7. 프로젝트 내에서 css 폴더에 my_Work_Area/css/custom-theme/jquery-ui-1.8.21.custom.css를 _public/_css/jquery와 같이 복사하십시오. -UI-1.8.21.custom.css
  8. 는 문서에 따라, 보장 _public/_css/이미지
  9. 예를 들어 프로젝트 내에서 CSS 폴더에 폴더 my_Work_Area/CSS/맞춤 테마/이미지를 복사 다음은 귀하의 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> 
    

.

css 폴더 내에 images라는 폴더가 있는지 여부를 고려해야 할 수도 있습니다. 이 폴더의 위치를 ​​변경하면 사용 된 경로를 고려해야합니다.

하지만 'out of the box'만 작동 시키려면 위의 작업을 수행하면 아무 것도 복잡하지 않아도됩니다.

도움이되기를 바랍니다.

4

나를 위해 Themeroller가 이미지 경로 주위에 큰 따옴표를 추가하고 있다는 것이 문제였습니다. 방금 사용자 정의 CSS 파일에서 해당 파일을 제거하고 모든 것이 작동했습니다.

나는 변경 :

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

에 :

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

전체 CSS 파일을 통해.

0

아이콘 파일이있는 이미지 폴더를 해당 위치에 배치합니다.CSS 파일이 존재합니다. 이 dateime 선택기 http://www.malot.fr/bootstrap-datetimepicker/

를 사용하는 경우이 질문에, 을 읽는 것은이 옵션을 추가

0

: bootcssVer : 3

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

아이콘이 표시됩니다!

0

제 경우에 대한 해결책을 나에게 알려주세요. 내 ASP.NET MVC 프로젝트는 다음 디렉토리 구조가 있습니다

  • 내용
    • 테마
      • 기본
        • 이미지를
          • icon1.png
          • icon2.png
        • JQuery와 - ui.css
  • 다른 디렉토리

Visual Studio를 통해 응용 프로그램을 로컬로 실행할 때 jquery-ui.css에서 다음 URL을 사용하여 아이콘을 참조 할 수 있습니다. url ("images/icon1.png"). Azure 서버에서 응용 프로그램을 실행할 때이 아이콘을 url ("themes/base/images/icon1.png")과 함께 참조해야합니다. jquery-ui.css의 실제 "현재"/ "현재"디렉토리는 콘텐츠 디렉토리입니다. 그것은 VS처럼 보인다

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

는 "슈퍼 지능형"이고 하위 디렉토리 내부도 언급 이미지를 찾습니다 cshtml에서 나는 다음과 같은 방법으로 만들 번들을 사용하여 JQuery와 - ui.css을로드하기 때문이다.

용액은 이미지 절대 파일 URL JQuery와-ui.css 내부에 사용이 될 수

: URL을 (또는 적절한 경로를 상대적으로 ("/ 콘텐츠/테마/기재/이미지/icon1.png")를 내 경우에는 컨텐츠 디렉토리, 즉 URL ("테마/기본/이미지/icon1.png") 제가 위에서 언급 한) 이상의 중첩 된 경로로 번들을 만들려면 같이

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

또 다른 (더) 솔루션은 <link> 요소를 사용하여 CSS 파일을 cshtml로로드하는 것입니다. <link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />

관련 문제