php页面按钮效果代码_jQuery+PHP打造滑动开关效果

<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "test";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT * FROM `pro1111`";
$result = $conn->query($sql);

// 输出数据
while ($row = $result->fetch_assoc()) {
?>
  

    

      >

      
<?php echo $row['title']; ?>
      
      
<?php echo $row['description']; ?>
    
  
<?php } ?>

《 ./css/switchbutton.css 》

为了渲染一个比较好的页面外观，我们使用CSS来美化页面，使得页面更符合人性化。使用CSS,我们只需用一张图片来标识开关按钮。

.list{padding:6px 4px; border-bottom:1px dotted #d3d3d3; position:relative}   
.fun_title{height:28px; line-height:28px}   
/* .fun_title span{width:82px; height:25px; background:url(switch.gif) no-repeat;     */
  .fun_title span{width:82px; height:25px; background:#f00 url(../image/switch.gif) no-repeat;
  cursor:pointer; position:absolute; right:6px; top:16px}   
.fun_title span.ad_on{background-position:0 -2px}   
.fun_title span.ad_off{background-position:0 -38px}   
.fun_title h3{font-size:14px; font-family:'microsoft yahei';}   
.list p{line-height:20px}   
.list p span{color:#f60}   
.cur_select{background:#ffc}   

CSS代码，我不想详述，提示下我们使用了一张图片，然后通过background-position来定位图片的位置，这是大多数网站使用的方法，好处咱就不说了。

jQuery

我们通过单击开关按钮，及时请求后台，改变对应的功能开关状态。这个过程是一个典型的Ajax应用。通过点击开关按钮，前端向后台PHP发送post请求，后台接收请求，并查询数据库，并将结果返回给前端，前端jQuery根据后台返回的结果，改变按钮状态。