Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][PHP]Jak łączyć skrypty z Button Bootstrap
Forum PHP.pl > Forum > Przedszkole
silverwind
23.12.2014, 12:01:34
Mam problem jak dobrze łączyć gotowe button lub paski postępu z Bootstrap ze stworzonym skryptem w php. Chodzi mi jak to sobie dobrze po układać w plikach i w kodzie. 
[XML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <!-- saved from url=(0039)http://getbootstrap.com/examples/theme/ -->
  3. <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <meta name="description" content="">
  8.     <meta name="author" content="">
  9.     <link rel="icon" href="Wydajnosc/favicon.ico">
  10.  
  11.     <title>Theme Template for Bootstrap</title>
  12.  
  13.     <!-- Bootstrap core CSS -->
  14.     <link href="Wydajnosc/css/bootstrap.min.css" rel="stylesheet">
  15.     <!-- Bootstrap theme -->
  16.     <link href="Wydajnosc/css/bootstrap-theme.min.css" rel="stylesheet">
  17.  
  18.     <!-- Custom styles for this template -->
  19.     <link href="Wydajnosc/css/theme.css" rel="stylesheet">
  20.  
  21.     <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
  22.     <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
  23.     <script src="./Wydajnosc/ie-emulation-modes-warning.js"></script><style type="text/css"></style><style type="text/css"></style>
  24.  
  25.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  26.     <!--[if lt IE 9]>
  27.       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  28.       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  29.     <![endif]-->
  30.   </head>
  31.  
  32.   <body role="document">
  33.  
  34.     <!-- Fixed navbar -->
  35.     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  36.       <div class="container">
  37.         <div class="navbar-header">
  38.           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  39.             <span class="sr-only">Toggle navigation</span>
  40.             <span class="icon-bar"></span>
  41.             <span class="icon-bar"></span>
  42.             <span class="icon-bar"></span>
  43.           </button>
  44.           <a class="navbar-brand" href="Wydajnosc.php">Testowanie Wydajności</a>
  45.         </div>
  46.        <div id="navbar" class="navbar-collapse collapse">
  47.           <ul class="nav navbar-nav">
  48.             <li class="active"><a href="Wydajnosc.php">Home</a></li>
  49.             <li><a href="Wydajnosc.phpabout">About</a></li>
  50.             <li><a href="Wydajnosc.phpcontact">Contact</a></li>
  51.             <li class="dropdown">
  52.               <!--<a href="Wydajnosc.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>-->
  53.               <ul class="dropdown-menu" role="menu">
  54.                 <li><a href="Wydajnosc.php">Action</a></li>
  55.                 <li><a href="Wydajnosc.php">Another action</a></li>
  56.                 <li><a href="Wydajnosc.php">Something else here</a></li>
  57.                 <li class="divider"></li>
  58.                 <li class="dropdown-header">Nav header</li>
  59.                 <li><a href="Wydajnosc.php">Separated link</a></li>
  60.                 <li><a href="Wydajnosc.php">One more separated link</a></li>
  61.               </ul>
  62.             </li>
  63.           </ul>
  64.         </div>
  65.       </div>
  66.     </nav>
  67. -->
  68.     <div class="container theme-showcase" role="main">
  69.  
  70.       <!-- Main jumbotron for a primary marketing message or call to action -->
  71.       <div class="jumbotron">
  72.         <h1>Witamy </h1>
  73.         <p>Prosze wybrać jedną z trzech możliwości testowanie bazy danych </p>
  74.         <p><a href="Wydajnosc.php" class="btn btn-primary btn-lg" role="button"> ?</a></p>
  75.       </div>
  76.  
  77.  
  78.       <div class="page-header">
  79.         <h1></h1>
  80.       </div>
  81.       <p>
  82.  
  83. 	<button class="btn btn-lg btn-block btn-info" type="button">1. Wstawianie  </button>
[XML] pobierz, plaintext

tu po chciałbym żeby uruchamia się skrypt 1.php i pasek postępu 

[XML] pobierz, plaintext 
  1. <div class="progress">
  2.                <div class="progress-bar progress-bar-success" style="width: 40%"></div>
  3.            </div>
  4.  
  5.  
  6.         <button class="btn btn-lg btn-block btn-success" type="button">2. Modyfikacja </button>
  7.         <button class="btn btn-lg btn-block btn-warning" type="button">3. Wyszukanie </button>
  8.       </p>
  9.  
  10.      </div> <!-- /container -->
  11.  
  12. -->
  13.     <!-- Bootstrap core JavaScript
  14.     ================================================== -->
  15.     <!-- Placed at the end of the document so the pages load faster -->
  16.     <script src="./Wydajnosc/jquery.min.js"></script>
  17.     <script src="./Wydajnosc/bootstrap.min.js"></script>
  18.     <script src="./Wydajnosc/docs.min.js"></script>
  19.     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  20.     <script src="./Wydajnosc/ie10-viewport-bug-workaround.js"></script>
[XML] pobierz, plaintext
cisu
31.12.2014, 13:54:28
Bootstrap do framework CSS, a PHP to język wykonywany po stronie serwera.
Jak chcesz, żeby coś się działo po wykonaniu jakiegoś skryptu, to po wykonaniu tego skryptu wstaw na stronę odpowiedni kod Javascript, który zrobi to, co chcesz (np. uruchomi pasek postępu).

Jak nie o to chodzi, to wytłumacz dokładniej swój problem.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.