Question

我想知道最好的方法是将这个放大镜Icon放入可点击的按钮吗？不改变JQuery框架

http://jquerymobile.com/demos/1.0a2/#docs/forms/forms-search.html

这是它在框架中的映射

if( input.is('[type="search"],[data-type="search"]') 
focusedEl = input.wrap('<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-search'+ themeclass +'"></div>').parent();

Answer 1

使用javascript hack做任何事都会破坏整个 progressive enhancement 的想法。

只需创建一个普通的提交按钮并用<span class="maglass">包装它，然后在最后用!important创建一些CSS规则，以覆盖jqm创建的元素的jQuery Mobile按钮样式以替换提交按钮（用firebug检查它以获得在那里创建的内容的抓地力）最后 - 如果你希望山雀在半支持的浏览器中看起来很好，你将不得不得到其中一个并添加另一个CSS规则。

完成。有不支持浏览器的按钮，它增强到带有CSS的放大镜。无处不在。

Answer 2

我能说的最好的是以输入元素为主题的div。话虽这么说，你可以做两件事之一：

绑定到输入的包装器，例如：

$('__INPUT_SELECTOR__') // grab the input field
  .closest('div')       // traverse up to the parent div
  .bind('click',function(){
    // grab the click event and make it a form submit
    $(this).closest('form').submit();
  });

或者，你走另一个方向：

$('div.ui-input-search') // find the div first
  .bind('click',function(){
    // now you have a click event on the div. Transfer it to the form's submit
    $(this).closest('form').submit();
  });

只取决于你想去的方向。（可能应该使用jquerymobile事件，而不是经典的jQuery事件（所以你可以抓住figner水龙头等））此外，这应该被解释为伪代码，因为我不熟悉图书馆，跟我所知道的一样。

修改
所以很明显，我意识到DIV的点击事件需要做更多的工作（就检查而言）。您需要测试实际在DIV上执行的点击而不是导致DIV事件触发的输入 只是把它扔出去避免“这不起作用”的评论。这就是为什么它是伪代码。

JQuery移动搜索输入图标

2 个答案: