Ищу Выезжающая форма поиска

Тема в разделе "Open Source", создана пользователем parks, 26 авг 2011.

Модераторы: Amazko, Aste
  1. parks

    parks

    Регистр.:
    18 сен 2008
    Сообщения:
    424
    Симпатии:
    61
  2. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    Например с jquery
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Selector</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function(){
                
                //при клике на поле, прибавляем к ширине 500
                $('#search-field').click(function() {
                    $(this).animate({right: "0", width: "+=500"}, 500);
                });
                //при клике не на поле, отнимаем от ширины 500
                $("#search-field").blur(function(){
                    $(this).animate({right: "0", width: "-=500"}, 500);
                });
    
            });
        </script>
    
    </head>
    
    <body>
        <form id="search-form" method="get" action="/search/">
            <input id="search-field" name="q" value="Поиск по сайту" type="text" style="position:relative;float:right;">                
        </form>
    </body>
    </html>
    
    
     
    parks нравится это.
  3. parks

    parks

    Регистр.:
    18 сен 2008
    Сообщения:
    424
    Симпатии:
    61
    А как подправить чтоб только при одном клике прибавляло , о та если кликнуть два раза она уезжает за границы
     
  4. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    указать фиксированную ширину например мин 200px макс 500px
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Selector</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function(){
                
                //при клике на поле, ширина 500
                $('#search-field').click(function() {
                    $(this).animate({right: "0", width: "500px"}, 500);
                });
                //при клике не на поле, ширина 200
                $("#search-field").blur(function(){
                    $(this).animate({right: "0", width: "200px"}, 500);
                });
    
            });
        </script>
    
    </head>
    
    <body>
        <form id="search-form" method="get" action="/search/">
            <input id="search-field" name="q" value="Поиск по сайту" type="text" style="position:relative;right:0;float:right;width:200px;">                
        </form>
    </body>
    </html>
    
     
    parks нравится это.