jquery mobile fullcalendar prev下一个图标 [英] jquery mobile fullcalendar prev next icon

问题描述

使用jquery mobile使用jquery fullcalendar插件（） ，prev和next month按钮图标仅显示向上箭头的背景图像，这是长256 * 240的图像文件中的第一个图标。当我在Firefox中刷新页面时，正确的箭头东方和西方显示，但我失去了所有其他风格，包括背景，主题等刷新不起作用的IE浏览器。

<对于这个相对较小的问题，我搜索了很高和低的答案。这里我相信可能是原因：



1. jquery ui和jquery移动冲突（.js和.css文件的顺序） - 我试过所有的命令都无济于事。


2.在移动页面上呼叫fullcalendar主题（页面内而不是头标签）


3.从家到特定移动页面的过渡问题


4.像素大小的ui-icon css class（应该大于16px，移动16px）


5.需要定制使用$（document）.ready（）函数覆盖jquery ui。

请参阅下面包含的文件头代码：

 < link rel ='stylesheet'type ='text / css'href ='.. / fullcalendar / fullcalendar / fullcalendar.css'> 
< link rel ='stylesheet'type ='text / css'href ='.. / fullcalendar / demos / cupertino / thememobile.css'> 
< link rel ='stylesheet'type ='text / css'href ='.. / fullcalendar / fullcalendar / fullcalendar.print.css'media ='print'> 
 
< link rel =stylesheethref =jquery.mobile-1.0.1.min.css/> 
< script src =jquery-1.6.4.min.js>< / script> 
< script src =jquery.mobile-1.0.1.min.js>< / script> 
 
< script type ='text / javascript'src ='.. / fullcalendar / jquery / jquery-ui-1.8.17.custom.min.js'>< / script> 
< script type ='text / javascript'src ='.. / fullcalendar / jquery / jquery-1.7.1.min.js'>< / script> 
< script type ='text / javascript'src ='.. / fullcalendar / fullcalendar / fullcalendar.min.js'>< / script> 
< script type ='text / javascript'src ='.. / fullcalendar / fullcalendar / jquery.qtip-1.0.0-rc3.min.js'>< / script> 
< script type ='text / javascript'src ='.. / fullcalendar / fullcalendar / calendareventsmobile.js'>< / script> 
  

答案的任何回答或头脑风暴都会非常有用。

预先感谢！

解决方案

必须提供一个将按钮名称（从标题）映射到图标字符串的散列。图标字符串决定了将在按钮上使用的CSS类。例如，字符串'circle-triangle-w'将导致类'ui-icon-triangle-w'。

我正在寻找使用ui-icon -carat-1-w和ui-icon-carat-1-e。我发现萤火虫在确定正确的散列值以获得适当的映射方面非常有用。

这是我需要使用的一个例子。

  buttonIcons：{
 prev：'carat-1-w'，
 next：'carat-1-e'
}，
  

When using the jquery fullcalendar plugin (http://arshaw.com/fullcalendar/) with jquery mobile, the prev and next month button icons only show the arrow-up background image, which is the very first icon on the long 256 by 240 .png image file. When I refresh the page in Firefox, the correct arrow east and west show up, yet I lose all other styles including background, themes, etc. Refresh does not work in IE.

I searched high and low for an answer to this relatively minor issue. Here I believe may be the causes:

1. jquery ui and jquery mobile conflict (order of .js and .css files) --I tried all orders to no avail.
2. calling fullcalendar theme on mobile page (inside of page instead of head tags)
3. transition issue from home to specific mobile page
4. pixel size of ui-icon css class (should it be larger than 16px by 16px for mobile?)
5. need of a custom override of jquery ui using the $(document).ready() function.

Please see my included files head code below:

<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar/fullcalendar.css'>
<link rel='stylesheet' type='text/css' href='../fullcalendar/demos/cupertino/thememobile.css'>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar/fullcalendar.print.css' media='print'>

<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>

<script type='text/javascript' src='../fullcalendar/jquery/jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript' src='../fullcalendar/jquery/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar/jquery.qtip-1.0.0-rc3.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar/calendareventsmobile.js'></script>

Any answer or brainstorming of answers will be very helpful.

Thanks in advance!

解决方案

From the documentation...

A hash must be supplied that maps button names (from the header) to icon strings. The icon strings determine the CSS class that will be used on the button. For example, the string 'circle-triangle-w' will result in the class 'ui-icon-triangle-w'.

I was looking to use ui-icon-carat-1-w and ui-icon-carat-1-e. I found firebug to be very helpful in determining the correct hash value to use to get the proper mapping.

This is an example of what I needed to use.

    buttonIcons: {
        prev: 'carat-1-w',
        next: 'carat-1-e'
    },

这篇关于jquery mobile fullcalendar prev下一个图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！