السلام عليكم ورحمة الله وبركاته
أخواني/ أخواتي في الله
اليوم سوف نتحدث عن موضوع كيفية إضافة تقوسات في أطراف جدول أو div أو أي container حيث أن الموضوع يتعلق أكثر بـ HTML و CSS مما يتعلق بـ ASP.NET. ولكن سوف نرى كيف يمكننا تسخير ذلك لمصلحتنا في عالم الـ ASP.NET
أنا متأكد أن الكثير قد تسائل عن كيفية إعطاء أو صنع تحدب أو تقوس في أطراف الجداول أو الـ div كما هو الحال في المنتدى هنا وغيره. وأيضا في بعض المواقع قد تشاهدون تقوسا حول الوعاء الذي يحوي بعض الروابط الجانبية. حاليا لا يجود أي HTML Tag يقوم بذلك. تكمن الفكرة في إستخدام خليط من الصور (4 صور لكل طرف من أطراف الوعاء) و html و قليل من الـ CSS. دعونا نرى كيفية عمل ذلك :
أولا: حتى لا يكون هناك لبس سنقوم بإستخدام كل من الصور الأربعة التالية bl.gif, br.gif, tl.gif, tr.gif حيث أنها تمثل التقوسات لكل من الأطراف السفلي الأيسر والسفلي الأيمن والعلوي الأيسر والعلوي الأيمن على التوالي. وبعد ذلك سنقوم بإستخدام قاعدة الـ CSS التالية :
background: [url(your image path)] [x_position y_position] [repeat]
حيث أن الـ url هو عنوان الصورة والـ x_position هو الإحداثي السيني والـ y_position هو الإحداثي الصادي والـ repeat هو قاعدة التكرار وهو إما أن تكون no-repeat ومعنى ذلك أن الصورة لن يتم تكرار رسمها أو ملئها على الوعاء أو repeat-x أي أن الصورة سيتم تكرارها على محور السينات (أي أفقيا) أو repeat-y أي أن الصورة سيتم تكرارها على محور الصادات (أي عموديا) وفي حالة عدم تحديد الـ repeat سيتم تكرار الصورة على كل المحاور (أي بشكل أفقي وعمودي). ولكن قبل أن نكمل يجب أن نعلم أن كل عنصر في الـ HTML لا يمكن أن يحتوي على أكثر من صورة واحده كخلفية، بمعنى آخر لا يمكنك تحديد أكثر من background لكل عنصر. الآن نحن نريد رسم 4 أقواس أي يجب علينا تحديد أربعة خلفيات أي يجب علينا إستخدام 4 عناصر. دعونا نرى كيف يتم ذلك:
<html>
<head>
<title>Testing rounded corners!</title>
<style type="text/css">
.bl { background: url("bl2.gif") 0 100% no-repeat; width: 300px; }
.br { background: url("br2.gif") 100% 100% no-repeat; }
.tl { background: url("tl2.gif") 0 0 no-repeat; }
.tr { background: url("tr2.gif") 100% 0 no-repeat; padding: 10px; }
</style>
</head>
<body>
<h1>Testing rounded corners!</h1>
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">This is the content</div>
</div>
</div>
</div>
</body>
</html>الكود في الألى سيعطينا الشكل التالي:
إلى الآن كل شيء جميل، بقي علينا إضافة حدود بن الأقواس، قد يقول يأتي في بال أحدكم أن نقوم بإستخدام قاعدة الـ CSS والتي هي border حيث يتم فيها تحديد موع الـ border ولونه وحجمه، ولكن قبل ذلك دعونا نسأل السؤال التالي : لدينا 4 أوعية (divs) في أيا منهم نقوم بتحديد الـ border ؟ بالمنطق هو الوعاء الأب أو الأول وذلك لأنه يضم كل الأوعيى الأخرى فبالتالي الـ border سوف يلف عليهم جميعا. دعونا نقوم بتعديل قاعدة الـ CSS المخصصة للوعاء الأول والتي تحمل إسم "bl" بالشكل التالي :
.bl { background: url("bl2.gif") 0 100% no-repeat; width: 300px; border: 1px solid #000; }سيقوم التعديل أعلاه بتوليد الشكل التالي :
هل هذا ما كنا نتوقع أو نريد ؟ ما العمل ؟ لحل هذه المشكلة يتحم علينا صنع صورة بمقسام 1x1 px أي أن الصورة عبارة عن نقطة بنفس لون الأقواس المستخدمة في حالتنا هذه حيث أننا سنقوم بجعلها خلفية لوعاء آخر وملئها أفقيا (top/bottom border) و عموديا (left/right border) حتى نغطي الجهات الأربعة وسيكون الناتج النهائي هو 8 أوعية، 4 للأقواس و 4 للحدود. الصورة بعنوان dot2.gif والكود سيكون بالشكل التالي :
<html>
<head>
<title>Testing rounded corners!</title>
<style type="text/css">
.l { background: url("dot2.gif") 0 0 repeat-y; width: 300px; }
.r { background: url("dot2.gif") 100% 0 repeat-y; }
.t { background: url("dot2.gif") 0 0 repeat-x; }
.b { background: url("dot2.gif") 0 100% repeat-x; }
.bl { background: url("bl2.gif") 0 100% no-repeat; }
.br { background: url("br2.gif") 100% 100% no-repeat; }
.tl { background: url("tl2.gif") 0 0 no-repeat; }
.tr { background: url("tr2.gif") 100% 0 no-repeat; padding: 10px; }
</style>
</head>
<body>
<h1>Testing rounded corners!</h1>
<div class="l"><div class="r"><div class="t"><div class="b">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">This is the content</div>
</div>
</div>
</div>
</div></div></div></div>
</body>
</html>والذي سيولد الشكل التالي :
الآن كيف يمكننا الإستفادة من ذلك في الـ ASP.NET ؟ أول شيء خطر ببالي هو الـ User Control حيث يمكننا صناعة User Control يقوم برسم التقوسات والحدود ونقوم بإرسال List من نوع مثلا Class نقوم بإنشائه بحيث يحوي نص ورابط ومن ثم يتم رسم ذلك بشكل
UL Tag، حيث الـ Class سيكون بإسم MyLink وهو بالشكل التالي :
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
/// <summary>
/// Summary description for MyLink
/// </summary>
public class MyLink
{
public MyLink()
{
//
// TODO: Add constructor logic here
//
}
public string Text { get; set; }
public string Url { get; set; }
}والـ User Control سيكون بإسم MyRoundedCornerContainer وهو بالشكل التالي:
<!-- Design Code -->
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyRoundedCornerContainer.ascx.cs"
Inherits="MyRoundedCornerContainer" %>
<div class="l">
<div class="r">
<div class="t">
<div class="b">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<!-- The following UL will be populated with List<MyLink> -->
<ul id="links" runat="server">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
// Code behind
using System;
using System.Text; // Do not forget to add this line to access StringBuilder
using System.Collections;
using System.Collections.Generic; // Do not forget to add this line to access List<T>
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class MyRoundedCornerContainer : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
StringBuilder sb = new StringBuilder();
foreach (MyLink link in Links)
sb.AppendFormat("<li><a href='{0}'>{1}</a></li>", link.Url, link.Text);
links.InnerHtml = sb.ToString();
}
}
public List<MyLink> Links { get; set; }
}والصفحة التي سوف نقوم بتجربة الـ MyRoundedCornerContainer هي :
<!-- Design Code -->
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="MyRoundedCornerContainer.ascx" tagname="MyRoundedCornerContainer" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>My Rounded Corner Container</title>
<style type="text/css">
.l { background: url("dot2.gif") 0 0 repeat-y; width: 300px; }
.r { background: url("dot2.gif") 100% 0 repeat-y; }
.t { background: url("dot2.gif") 0 0 repeat-x; }
.b { background: url("dot2.gif") 0 100% repeat-x; }
.bl { background: url("bl2.gif") 0 100% no-repeat; }
.br { background: url("br2.gif") 100% 100% no-repeat; }
.tl { background: url("tl2.gif") 0 0 no-repeat; }
.tr { background: url("tr2.gif") 100% 0 no-repeat; padding: 10px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Testing our brand new Rounded Corner Container</h1>
<uc1:MyRoundedCornerContainer ID="MyRoundedCornerContainer1" runat="server" />
</div>
</form>
</body>
</html>
// Code behind
using System;
using System.Collections.Generic; // Do not forger to add this line to access List<T>
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<MyLink> links = new List<MyLink>();
for (int i = 1; i <= 10; i++)
{
MyLink link = new MyLink();
link.Text = string.Format("Link #{0}", i);
link.Url = string.Format("#{0}", i);
links.Add(link);
}
MyRoundedCornerContainer1.Links = links;
}
}
}يمكنك أيضا أن تبدع بحيث أن تضيف قسما للعنوان حيث يظهر داخل h1 tag وأيضا إضافة إمكانية تحديد قاعدة الـ CSS أو أن البيانات أو الروابط تأتي من قاعدة بيانات عن طريق إضافة DataSource معين والإحتمالات كثيرة وأتركها لكم أعزائي
في المرفقات ستجدون المشروع كاملا في ملف مضغوط بإسم RoundedCorners.zip
أتمنى للجميع التوفيق والنجاح
