تاج مثل الفايس بوك وتويتر Asp.net jQuery TagBox

تاج مثل الفايس بوك وتويتر Asp.net jQuery TagBox

عندما تكتب اسم صديق او اي كلمة في تكست بوكس وتظهر بشكل جذاب مثل الفايس يوكjQuery plugin tags like input in your forms

 تاج مثل الفايس بوك وتويتر Asp.net jQuery TagBox

عندما تكتب اسم صديق او اي كلمة في تكست بوكس وتظهر بشكل جذاب مثل الفايس يوك
jQuery tags like input in your forms

اولا ديمو المقال علي الموقع الرسمي

http://www.geektantra.com/projects/jquery-tagbox/

 

يمكنك تحميل المثال من موقعنا علي الرابط التالي

http://www.citystarit.com/upload/projects/TagBox.zip

jquery_tag_box

خطوات عملQuery tags

1-وضع سكربت الجاكويري في رأس الصفحة او الهيدر  head

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
  <script type="text/javascript" src="http://jquery-tagbox.googlecode.com/hg/js/jquery.tagbox.js"></script>
  <script type="text/javascript">
    jQuery(function() {
      jQuery("#jquery-tagbox-text").tagBox();
      jQuery("#jquery-tagbox-select").tagBox({
        enableDropdown: true,
        dropdownSource: function() {
          return jQuery("#jquery-tagbox-select-options");
        }
      });
    });
  </script>

 <link rel="stylesheet" href="http://jquery-tagbox.googlecode.com/hg/css/jquery.tagbox.css" />

 


 

2-كتابة جسم الصفحة او الموضوع في الصفحة في وسم الفورم او البودي   form or body

 

<div class="row">
<label for="jquery-tagbox-text">Text TagBox (Comma Separated)</label>
<input id="jquery-tagbox-text" type="text" />
</div><!--div.row-->
 
<div class="row">
<label for="jquery-tagbox-select">Dropdown TagBox</label>
<select id="jquery-tagbox-select-options">
<option value="jQuery">jQuery</option>
<option value="MooTools">MooTools</option>
<option value="ProtoType">ProtoType</option>
<option value="Scriptaculous">Scriptaculous</option>
<option value="Dojo">Dojo</option>    </select><!--select#-->
<input id="jquery-tagbox-select" type="text" /> </div><!--div.row-->

 

النتيجة كالاتي

 

 

jquery_tag_box

 

بواسطة
مصر
سيتي ستار لتكنولوجيا المعلومات
سيتي ستار لتكنولوجيا المعلومات

عودة لمقالات الموقع