1. дома
  2. Вопрос и ответ
  3. Как переключить эффект jquery blind (по умолчанию) без списка выбора

Как переключить эффект jquery blind (по умолчанию) без списка выбора

2016-06-08 4 views

ответ

2

Вам это нравится?

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery UI Effects - Toggle Demo</title> 
 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
    <style> 
 
    .toggler { 
 
    width: 500px; 
 
    height: 200px; 
 
    } 
 
    #button { 
 
    padding: .5em 1em; 
 
    text-decoration: none; 
 
    } 
 
    #effect { 
 
    position: relative; 
 
    width: 240px; 
 
    height: 135px; 
 
    padding: 0.4em; 
 
    } 
 
    #effect h3 { 
 
    margin: 0; 
 
    padding: 0.4em; 
 
    text-align: center; 
 
    } 
 
    </style> 
 
    <script> 
 
    $(function() { 
 
    // run the currently selected effect 
 
    function runEffect() { 
 
     // get effect type from 
 
     var selectedEffect = $("#effectTypes").val(); 
 
    
 
     // most effect types need no options passed by default 
 
     var options = {}; 
 
     // some effects have required parameters 
 
     if (selectedEffect === "scale") { 
 
     options = { percent: 0 }; 
 
     } else if (selectedEffect === "size") { 
 
     options = { to: { width: 200, height: 60 } }; 
 
     } 
 
    
 
     // run the effect 
 
     $("#effect").toggle(selectedEffect, options, 500); 
 
    }; 
 
runEffect(); 
 
    // set effect from select menu value 
 
    $("#button").click(function() { 
 
     runEffect(); 
 
    }); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    
 
<div class="toggler"> 
 
    <div id="effect" class="ui-widget-content ui-corner-all"> 
 
    <h3 class="ui-widget-header ui-corner-all">Toggle</h3> 
 
    <p> 
 
     Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. 
 
    </p> 
 
    </div> 
 
</div> 
 
    
 
<select name="effects" id="effectTypes" style="display:none;"> 
 
    <option value="blind">Blind</option> 
 
</select> 
 
    
 
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button> 
 
    
 
    
 
</body> 
 
</html>

источник

2016-06-08 01:29:35 Mani

+2

это работает, спасибо :) – Zub

+1

прием @ Зуб .... – Mani

1

Здесь мы идем: https://jsfiddle.net/54z8vLLb/

var selectedEffect = "blind";

Просто удалите выберите разметку из HTML и установить значение по умолчанию для «слепой» в JavaScript функции.

источник

2016-06-08 00:08:43 SenthilKumarM

+3

работает как шарм, спасибо большое :) – Zub

Смежные вопросы

 Смежные вопросы