переключатель на ajax

(Ответов: 2, Просмотров: 1104)
  1. [web-developer] Аватар для cOAPerator
    • Регистрация: 22.02.2011
    • Сообщений: 613
    • Репутация: 110
    • Webmoney BL: ?
    приветствую всех!
    вопрос к знатокам js, нарыл такой код

    спойлер

    <?php
    $query=mysql_connect("localhost","root","");
    mysql_select_db("freeze",$query);
    ?>
    <!DOCTYPE html>
    <title>iPhone Style Radio and Checkbox Switches, found on DevGrow.com</title>
    <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#myonoffswitch').click(function(){
    var myonoffswitch=$('#myonoffswitch').val();
    if ($("#myonoffswitch:checked").length == 0)
    {
    var a=myonoffswitch;
    }
    else
    {
    var a="off";
    }

    $.ajax({
    type: "POST",
    url: "ajax.php",
    data: "value="+a ,
    success: function(html){
    $("#display").html(html).show();
    }
    });

    });
    });
    </script>

    <script type="text/javascript">
    $(document).ready( function(){
    $(".cb-enable").click(function(){
    var parent = $(this).parents('.switch');
    $('.cb-disable',parent).removeClass('selected');
    $(this).addClass('selected');
    $('.checkbox',parent).attr('checked', true);
    });
    $(".cb-disable").click(function(){
    var parent = $(this).parents('.switch');
    $('.cb-enable',parent).removeClass('selected');
    $(this).addClass('selected');
    $('.checkbox',parent).attr('checked', false);
    });
    });
    </script>

    <style type="text/css">
    .onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .onoffswitch-checkbox {
    display: none;
    }
    .onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
    }
    .onoffswitch-inner {
    width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
    }
    .onoffswitch-inner:before, .onoffswitch-inner:after {
    float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    .onoffswitch-inner:before {
    content: "OFF";
    padding-left: 10px;
    background-color: #2FCCFF; color: #FFFFFF;
    }
    .onoffswitch-inner:after {
    content: "ON";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
    }
    .onoffswitch-switch {
    width: 18px; margin: 6px;
    background: #FFFFFF;
    border: 2px solid #999999; border-radius: 20px;
    position: absolute; top: 0; bottom: 0; right: 56px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
    }
    </style>

    </head>
    <body>
    <div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
    >
    <label class="onoffswitch-label" for="myonoffswitch">
    <div class="onoffswitch-inner"></div>
    <div class="onoffswitch-switch"></div>
    </label>
    </div>

    <div id="display"></div>
    </body>
    </html>


    обработчик
    Код:
    <?php
    $query=mysql_connect("localhost","root","");
    mysql_select_db("freeze",$query);
    if(isset($_POST['value']))
    {
    $value=$_POST['value'];
    mysql_query("update choice set choice='$value' where id='1'");
    echo "<h2>You have Chosen the button status as:" .$value."</h2>";
    }
    ?>
    [свернуть]


    все работет, но мне не понятно, как сделать несколько таких переключателей на странице.
    так же мне непонятно, как сделать обработчик..
    точнее если у меня на странице 1 переключатель = 1 обработчик, это понятно
    но у меня есть форма с 14 переключателями, мне что создавать 14 обработчиков?
    а таких форм у меня 6, это выходит 84 файла - обработчика создавать что ли?
    объясните пожалуйста как лучше организовать.
    • 0
  2. Студент Аватар для Bukmeker
    • Регистрация: 27.10.2012
    • Сообщений: 74
    • Репутация: 6
    • Webmoney BL: ?
    слушаешь клик на переключателе;

    Код:
    $('input[type="checkbox"]').on('change', function() {
        var id = $(this).id;// здесь будет id элемента
        alert(id);
    });
    узнаешь айди;
    делаешь, что хочешь.
    • 1

    Спасибо сказали:

    cOAPerator(02.07.2014),
  3. [web-developer] Аватар для cOAPerator
    • Регистрация: 22.02.2011
    • Сообщений: 613
    • Репутация: 110
    • Webmoney BL: ?
    Bukmeker, с id понял, спасибо!

    а вот с обработчиками теперь как поступить, пока придумал только запихнуть в 1 файл все обработчики и при ajax запросе дополнительный параметр отправлять, который будет выбирать тот или иной обработчик..
    Верно мыслю?
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Программирование на JS, JQ, Ajax
Web программирование 130 25.03.2017 15:02
Ajax SEO и аналитика
Общие вопросы поисковой оптимизации 1 19.06.2014 01:34
функция load ajax
Web программирование 2 28.08.2012 00:35
{AJAX} в DLE.
Вопросы от новичков 3 28.01.2012 21:55

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры