کد ایجاد باکس متن واکنش گرا

کد ایجاد باکس متن واکنش گرا این کد با جکوئری ساخته شده شما میتوانید متن باکسها رو به دلخواه ویرایش کرده در سایت و یا وبلاگ خود استفاده نمایید.این باکسها قابلیت جابجایی دارد و کاربر میتواند ان را جابجا کند.قابلیت دیگر این کد اینه که کاربر میتونه باکسو باز و بسته کنه و … اطلاعات بیشترو میتونید خودتون در دمو کد ببینید.

دمو کد

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Portlets</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <style> body {
    min-width: 520px;
  }
  .column {
    width: 170px;
    float: left;
    padding-bottom: 100px;

  }
  .portlet {border:1px solid red;
    margin: 0 1em 1em 0;
    padding: 0.3em;
  }
  .portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
  }
  .portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
  }
  .portlet-content {
    padding: 0.4em;
  }
  .portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
  }</style>
  
  <script>
  $(function() {
    $( ".column" ).sortable({
      connectWith: ".column",
      handle: ".portlet-header",
      cancel: ".portlet-toggle",
      placeholder: "portlet-placeholder ui-corner-all"
    });
 
    $( ".portlet" )
      .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
      .find( ".portlet-header" )
        .addClass( "ui-widget-header ui-corner-all" )
        .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
 
    $( ".portlet-toggle" ).click(function() {
      var icon = $( this );
      icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
      icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
    });
  });
  </script>
</head>
<center>
کافیه رو بعلاره دابل کلیک کنی و بکشی اینورو اونور بزاری جاشو تغییر بدی

<body>
 <center>
<div class="column">
 
  <div class="portlet">
    <div class="portlet-header">++</div>
    <div class="portlet-content">متن این باکسو اینجا بنویس</div>
  </div>
 
  <div class="portlet">
    <div class="portlet-header">++</div>
    <div class="portlet-content">متن این باکسو اینجا بنویس</div>
  </div>
 
</div>
 
<div class="column">
 
  <div class="portlet">
    <div class="portlet-header">++</div>
    <div class="portlet-content">متن این باکسو اینجا بنویس</div>
  </div>
 
</div>
 
<div class="column">
 
  <div class="portlet">
    <div class="portlet-header">++</div>
    <div class="portlet-content">متن این باکسو اینجا بنویس</div>
  </div>
 
  <div class="portlet">
    <div class="portlet-header">++</div>
    <div class="portlet-content">متن جعبه 5 خودتو اینجا بنویس</div>
  </div>
 
</div>
 
 
</body>
</html>

100

101

102

103

104

105

106

107

108

109

<!doctype html>

<head>

<title>jQuery UI Sortable - Portlets</title>

<style> body {

min-width: 520px;

}

.column {

width: 170px;

float: left;

padding-bottom: 100px;

}

.portlet {border:1px solid red;

margin: 0 1em 1em 0;

padding: 0.3em;

}

.portlet-header {

padding: 0.2em 0.3em;

margin-bottom: 0.5em;

position: relative;

}

.portlet-toggle {

position: absolute;

top: 50%;

right: 0;

margin-top: -8px;

}

.portlet-content {

padding: 0.4em;

}

.portlet-placeholder {

border: 1px dotted black;

margin: 0 1em 1em 0;

height: 50px;

}</style>

$(function() {

$( ".column" ).sortable({

connectWith: ".column",

handle: ".portlet-header",

cancel: ".portlet-toggle",

placeholder: "portlet-placeholder ui-corner-all"

});

$( ".portlet" )

.addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )

.find( ".portlet-header" )

.addClass( "ui-widget-header ui-corner-all" )

.prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

$( ".portlet-toggle" ).click(function() {

var icon = $( this );

icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );

icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();

});

</script>

</head>

کافیه رو بعلاره دابل کلیک کنی و بکشی اینورو اونور بزاری جاشو تغییر بدی

<body>

<div class="portlet-content">متن این باکسو اینجا بنویس</div>

</div>

<div class="portlet-content">متن این باکسو اینجا بنویس</div>

</div>

<div class="portlet-content">متن این باکسو اینجا بنویس</div>

</div>

<div class="portlet-content">متن این باکسو اینجا بنویس</div>

</div>

<div class="portlet-content">متن جعبه 5 خودتو اینجا بنویس</div>

</div>

</body>

</html>

برای تست کد فوق از ابزار پیش نمایش کدبازان استفاده نمایید.

کد ایجاد باکس متن واکنش گرا

کد ایجاد باکس متن واکنش گرا

2 Comments

دیدگاهتان را بنویسید لغو پاسخ