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

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

دمو کد

<!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 style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://codebazan.ir/%da%a9%d8%af-%d9%be%d8%b4%d8%aa%db%8c%d8%a7%d9%86%db%8c-%d9%88%d8%a7%d8%aa%d8%b3%d8%a7%d9%be-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%da%af%d9%81%d8%aa%da%af%d9%88-%d8%a8%d8%a7-%da%a9%d8%a7/" target="_blank" class="ubde276f354809296216867e4510e812d"><!-- INLINE RELATED POSTS 1/2 //--><style> .ubde276f354809296216867e4510e812d { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); text-decoration:none; } .ubde276f354809296216867e4510e812d:active, .ubde276f354809296216867e4510e812d:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .ubde276f354809296216867e4510e812d { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .ubde276f354809296216867e4510e812d .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .ubde276f354809296216867e4510e812d .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .ubde276f354809296216867e4510e812d:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">مشاهده</span>  <span class="postTitle">کد پشتیانی واتساپ برای سایت وبلاگ-گفتگو با کاربران سایت ازطریق واتساپ</span></div></a></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: 1em 1em ;

padding: 0.3em;

}

.portlet-header {

padding: 0.2em 0.3em;

margin-bottom: 0.5em;

position: relative;

}

.portlet-toggle {

position: absolute;

top: 50%;

right: ;

margin-top: -8px;

}

.portlet-content {

padding: 0.4em;

}

.portlet-placeholder {

border: 1px dotted black;

margin: 1em 1em ;

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

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