是否可以在没有完整框架的情况下拥有 JQuery Mobile 选择菜单？

发布于 2025-01-06 02:11:19 字数 1224 浏览 0 评论 0原文

我正在尝试使用 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

原文

I am attempting to use a JQuery Mobile select menu without having to use the full framework and running into problems.

I would prefer to not use the full jquery mobile library because it adjusts my entire page and all controls, links on it and applies style's to the page tag. This causes the look and feel to be adjusted for the whole page. I am using adaptive web design to adjust the pages controls and have been able to successfully apply the JQuery Mobile look and feel for the text boxes when the max-width hits 680, this looks great but my select boxes look bad when applying those same styles. Specifically the drop down arrow is chopped off on the right because of the rounded edges. If possible I would love to have the same look as the text boxes applied to the select menu's and control everything in the CSS file but if there is a trimmed down .js library for select menu's that would be a viable option too.

Has anyone successfully applied the JQuery Mobile look and feel for select boxes with just CSS? Has anyone used a narrow JQuery Mobile library that allows you to target just select menu's and doesn't require the entire JQuery Mobile .js library or style sheets?

Any help will be greatly appreciated! Thanks in advance.

I did manage to get some CSS that looks like it might be the start of what I need but the drop down is invisible, though it is clickable and shows the options when you select it. I think this might be tied to the javascript that JQM is running to apply the select drop down style. Below is the CSS though, maybe I'm just missing something.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

命硬 2025-01-13 02:11:19

我知道在 RC1 的发行说明中，他们已经解耦了 jQM 并正在开发下载生成器

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

不确定这是否已经发布

回复收藏 0 原文

贵在坚持 2025-01-13 02:11:19

我设法仅使用 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; 
}

I managed to get this working using just CSS (below). This is working and tested on IE9, Chrome, FF and Safari. I thought I would post the response here in case there is anyone else that is up against this issue. This worked well for me when using adaptive web design and adjusting my text fields (and selects) when the browser hit a certain threshold so that it had a more mobile look and feel when viewed on a tablet or phone.

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

回复收藏 0 原文