Question

我试图使用JQuery Mobile选择菜单，而不必使用完整的框架并遇到问题。

我宁愿不使用完整的jquery移动库，因为它会调整我的整个页面和所有控件，链接并将样式应用于页面标记。这样可以调整整个页面的外观。我正在使用自适应网页设计来调整页面控件，并且能够在最大宽度达到680时成功应用文本框的JQuery Mobile外观，这看起来很棒但是我的选择框在应用相同样式时看起来很糟糕。特别是由于圆形边缘，下拉箭头在右侧被切断。如果可能的话，我希望看到与应用于选择菜单的文本框相同的外观，并控制CSS文件中的所有内容，但如果有一个精简的.js库，那么选择菜单也是可行的选项。

是否有人成功应用了仅使用CSS的选择框的JQuery Mobile外观？有没有人使用一个狭窄的JQuery Mobile库，它允许你只选择菜单，而不需要整个JQuery Mobile .js库或样式表？

任何帮助将不胜感激！提前谢谢。

我确实设法得到一些看起来可能是我需要的开始的CSS但是下拉是不可见的，虽然它是可点击的并且在你选择时显示选项。我认为这可能与JQM运行的javascript有关，以应用选择下拉样式。下面是CSS，也许我只是遗漏了一些东西。

box-sizing: border-box;-webkit-box-align: center;border: 1px solid;
border-image: initial;white-space: pre;-webkit-rtl-ordering: logical;
color: black;background-color: white;cursor: pointer;
-webkit-appearance: button;left: 0;top: 0;
width: 100%;min-height: 1.5em;min-height: 100%;height: 3em;
max-height: 100%;opacity: 0;-ms-filter: "alpha(opacity=0)";filter: alpha(opacity=0);
z-index: 2;cursor:pointer;-webkit-appearance:button;left:0;top:0;width:100%;min-height:1.5em;min-height:100%;height:3em;max-height:100%;opacity:0;-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);z-index:2

Answer 1

我知道在RC1的发行说明中，他们将jQM解耦并正在开发下载构建器

http://jquerymobile.com/blog/2011/09/29/jquery-mobile-1-0rc1-released/

下载构建器：正在开发中

现在我们已经将大多数UI小部件分离了，我们已经设置好了舞台   有一个下载生成器。这将让您构建自定义   jQuery Mobile的版本只包含你需要的部分。对于   例如，您可以使用核心文件添加基于Ajax的   使用pushState导航并利用一些触摸事件和   其他实用程序具有非常轻量级的构建（大约10k）。或者您   可以添加特定的UI小部件，如表单元素，列表视图等。   创建优化的构建。我们的目标是拥有一个下载构建器   工具启动是某种形式的1.0决赛的一部分。我们正在努力   现在，所有插件都支持此工具的依赖关系图。

不确定这是否已发布

Answer 2

我设法使用CSS（下面）使用它。这是在IE9，Chrome，FF和Safari上运行和测试的。我想我会在这里发布回复，以防有其他人反对这个问题。当使用自适应网页设计并在浏览器达到某个阈值时调整我的文本字段（和选择）时，这对我来说效果很好，这样在平板电脑或手机上查看时它具有更具移动性的外观。

select  
{
    height:32px; -webkit-appearance: button;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: auto;
    background: url(../Content/Images/selector_trans.png), 
    -webkit-linear-gradient(#E5E5E5, #E5E5E5 40%, #E2E2E2);
    background-position: 100% 53%, center center;        
    background-repeat: no-repeat, repeat-x; 
}

Answer 3

你可以复制它在JQM发挥其魔力之后添加的CSS和HTML吗？如果您将这些属性复制到您的页面中，那么您将拥有所需的显示，而不会超出您的页面。

是否有可能没有完整框架的JQuery Mobile选择菜单？

3 个答案: