0

我想知道将这个放大镜图标变成可点击按钮的最佳方法是什么？无需更改 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();
4

2 回答 2

2

用 javascript hack 做任何事情都会破坏整个渐进增强的想法。

只需创建一个普通的提交按钮并用 a 包装<span class="maglass">，然后!important在最后创建一些 CSS 规则，以覆盖 jqm 创建的元素的 jQuery Mobile 按钮样式以替换提交按钮（用 firebug 检查它以掌握什么在那里创建）最后 - 如果你想让 tit 在半支持的浏览器中看起来不错，你将不得不获得其中一个并添加另一个 CSS 规则。

完毕。有不支持的浏览器的按钮，它通过 CSS 增强为放大镜。到处工作。

于 2011-01-11T08:08:49.777 回答
0

The best I can tell it's a div themed with an input element. That being said, you can probably do one of two things:

Bind to the input's wrapper such as:

$('__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();
  });

OR, you go the other direction:

$('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();
  });

Just depends the direction you want to go. (And probably should be using the jquerymobile events, not classic jQuery ones (so you can catch figner taps, etc.)) Also, this should be interpreted as pseudo-code as I am not familiar with the library, just going with what I know.

EDIT
And so it's clear, I realize more has to be done (in terms of checking) for the DIV's click event. You would need to test the click was actually performed on the DIV not the input which results in a DIV event fire.
Just throwing it out there to avoid "this doesn't work" comments. This is why it's pseudo-code.

于 2011-01-11T00:35:04.533 回答