Ajout d'une fonctionnalité Lightbox à un modèle JQueryUI dans Visual Studio 2010

J'essaie d'ajouter des fonctionnalités de visionneuse à mon site Web, mais cela semble poser problème. J'utilise un modèle d'interface utilisateur jQuery standard. J'ai lu sur le net que les scripts pourraient être en conflit, mais j'ai aussi été informé que je rencontre des problèmes parce que j'utilise Prototype et jQuery ensemble. S'il vous plaît pourriez-vous conseiller?Ajout d'une fonctionnalité Lightbox à un modèle JQueryUI dans Visual Studio 2010

Voici mon code

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>jQuery UI Example Page</title> 

    <link rel=Stylesheet href="css/lightbox.css" type="text/css" media="screen" /> 

    <script src="js/prototype.js" type="text/javascript"></script> 
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> 
    <script src="js/lightbox.js" type="text/javascript"></script> 

    <style type="text/css"> 
     body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; } 
    </style> 

    <link type="text/css" href="css/dot-luv/jquery-ui-1.8.5.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script> 
    <script type="text/javascript"> 

     $(function(){ 

     // Accordion 
     $("#accordion").accordion({ header: "h3" }); 

     // Tabs 
     $('#tabs').tabs(); 

     // Dialog   
     $('#dialog').dialog({ 
      autoOpen: false, 
      width: 600, 
      buttons: { 
      "Ok": function() { 
       $(this).dialog("close"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
      } 
     }); 

     // Dialog Link 
     $('#dialog_link').click(function(){ 
      $('#dialog').dialog('open'); 
      return false; 
     }); 

     // Datepicker 
     $('#datepicker').datepicker({ 
      inline: true 
     }); 

     // Slider 
     $('#slider').slider({ 
      range: true, 
      values: [17, 67] 
     }); 

     // Progressbar 
     $("#progressbar").progressbar({ 
      value: 20 
     }); 

     //hover states on the static widgets 
     $('#dialog_link, ul#icons li').hover(
      function() { $(this).addClass('ui-state-hover'); }, 
      function() { $(this).removeClass('ui-state-hover'); } 
     ); 

     }); 
    </script> 

    <style type="text/css"> 
     /*demo page css*/ 
     body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} 
     .demoHeaders { margin-top: 2em; } 
     #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} 
     #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} 
     ul#icons {margin: 0; padding: 0;} 
     ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} 
     ul#icons span.ui-icon {float: left; margin: 0 4px;} 
    </style> 

    </head> 
    <body> 
    </body> 
</html>

Source

2010-10-19 Mark

A l'intérieur de la balise script ajouter ce code:

JQuery(document).ready(function ($) { 
$('a[@rel*=lightbox]').lightbox() 
})

et vous allez exécuter ainsi:

<a href="WebSite.aspx" rel="lightbox">Text link</a>

dans De cette façon, le "WebSite.aspx" sera ouvert dans la visionneuse.

Source

2011-10-06 23:43:51

Ajout d'une fonctionnalité Lightbox à un modèle JQueryUI dans Visual Studio 2010

Répondre

Questions connexes