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

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

دمو کد

<!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>
  <link rel="stylesheet" href="http://dl.codebazan.ir/uploads/1522519643.css">
  
  <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>

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

<!doctype html>

<head>

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

$(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 نظر

محمود

admin

پاسخ دهید لغو پاسخ

جستجو در سایت

خبرنامه

نوشته‌های تازه

آخرین دیدگاه‌ها

بایگانی شمسی

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